回调函数变量作用域丢失：WebSocket实例URL输出异常求助

这个问题我之前也碰到过，是典型的闭包作用域陷阱！下面给你几个实用的解决方案，再帮你理清楚问题根源。

快速最优解：利用事件回调中的this #

WebSocket的open事件回调里，this默认指向当前触发事件的WebSocket实例本身，所以你可以直接用this.url获取当前连接的URL，完全绕开作用域问题：

const search = [{socket: new WebSocket('ws://live.trade/123')}, {socket: new WebSocket('ws://live.trade/xyz')}];

search.forEach(function(element){ 
  element.socket.on('open', function open() { 
    console.log(this.url); 
  }); 
});

为什么原来的代码会出错？ #

你原来的代码里，open事件回调是异步触发的——当WebSocket连接真正打开时，forEach已经完成了所有遍历，而闭包捕获的element变量此时已经指向数组的最后一个元素。所有异步回调都会共享这个最终的element引用，所以只会输出最后一个连接的URL。

其他可选解决方案 #

如果因为某些原因不能用this，还有这些方法可以解决：

• 用闭包创建独立作用域
  通过立即执行函数（IIFE）为每个迭代保存独立的变量引用：

search.forEach(function(element){ 
  (function(currentSocket) {
    currentSocket.on('open', function open() { 
      console.log(currentSocket.url); 
    });
  })(element.socket);
});

• 使用ES6箭头函数
  箭头函数会绑定当前词法作用域的变量，forEach的每次迭代都会生成新的词法环境，确保每个回调拿到的是当前迭代的element：

search.forEach(element => { 
  element.socket.on('open', () => { 
    console.log(element.socket.url); 
  }); 
});

• 通过索引直接获取元素
  借助forEach的第二个索引参数，直接从数组中取对应元素，避免闭包捕获问题：

search.forEach(function(_, index){ 
  const currentSocket = search[index].socket;
  currentSocket.on('open', function open() { 
    console.log(currentSocket.url); 
  }); 
});

内容的提问来源于stack exchange，提问作者Brent Aureli