动态创建按钮事件监听器，避免循环中URL引用覆盖问题

嘿，这可是前端开发里经典的闭包陷阱问题！你遇到的情况是：循环里的finalurl如果用var声明，它是函数级作用域的变量，所有按钮的点击事件监听器都会共享同一个变量引用。当循环结束后，finalurl已经变成数组最后一个元素的值，所以所有按钮点击都会跳转到最后那个URL。

下面给你几个实用的解决方案，按推荐程度排序：

方法1：用let/const声明变量（ES6+ 首选方案） #

这是最简洁直观的现代JS写法，因为let和const是块级作用域，每次循环迭代都会创建一个新的变量绑定，每个事件监听器捕获的都是当前迭代的独立finalurl：

// 假设你的数组是urlsArray，循环逻辑大致如下
for (let i = 0; i < urlsArray.length; i++) {
  // 用let声明finalurl，每个迭代都有独立的变量
  let finalurl = urlsArray[i];
  const thisbutton = document.createElement('button');
  
  // 填充按钮文本等逻辑
  thisbutton.textContent = `跳转至第${i+1}个链接`;
  
  // 绑定点击事件
  thisbutton.addEventListener("click", function(){ 
    window.location.href = finalurl; 
  });
  
  // 将按钮添加到表格行中（假设row是当前表格行元素）
  row.appendChild(thisbutton);
}

方法2：用立即执行函数表达式（IIFE）创建独立作用域 #

如果需要兼容ES6之前的旧环境，可以用IIFE在每次迭代时创建一个局部作用域，把当前的finalurl作为参数传入，这样每个事件监听器绑定的都是当前迭代的变量副本：

for (var i = 0; i < urlsArray.length; i++) {
  var finalurl = urlsArray[i];
  var thisbutton = document.createElement('button');
  thisbutton.textContent = `跳转至第${i+1}个链接`;
  
  // 用IIFE包裹事件绑定逻辑，传入当前的finalurl
  (function(currentUrl) {
    thisbutton.addEventListener("click", function(){ 
      window.location.href = currentUrl; 
    });
  })(finalurl);
  
  row.appendChild(thisbutton);
}

方法3：给按钮添加自定义数据属性 #

这种方法不需要依赖闭包，直接把URL存储在按钮元素本身的自定义属性里，点击时读取这个属性即可，逻辑更直白：

for (var i = 0; i < urlsArray.length; i++) {
  var finalurl = urlsArray[i];
  var thisbutton = document.createElement('button');
  thisbutton.textContent = `跳转至第${i+1}个链接`;
  
  // 给按钮添加data-url属性，存储当前URL
  thisbutton.dataset.url = finalurl;
  
  // 点击时读取按钮自身的data-url属性
  thisbutton.addEventListener("click", function(){ 
    window.location.href = this.dataset.url; 
  });
  
  row.appendChild(thisbutton);
}

总结一下：如果你的项目支持ES6+，优先用方法1；需要兼容旧环境选方法2；想避开闭包逻辑的话用方法3，都能完美解决所有按钮跳同一个URL的问题～

内容的提问来源于stack exchange，提问作者Thomas Mathews