深入 JavaScript:循环回调为什么都读到最后一个值

循环中创建多个回调,最后触发时却都看到同一个编号,原因在于共享了同一变量绑定。

edyang · 2016-03-15

循环中创建多个回调,最后触发时却都看到同一个编号,原因在于共享了同一变量绑定。

本文使用ECMAScript 5.1 与浏览器 DOM,代码可放入独立演示页。JavaScript(脚本语言)的作用域、函数调用与事件调度,需要与浏览器提供的接口区分。本文主体使用当时已经可用的语法,不把语言版本和宿主环境混为一谈。

1. 从现象推到机制

闭包保留对词法环境的访问,不是创建时给所有变量拍一张值快照。使用 var 的循环通常共享同一个函数级变量,回调执行时读取的是当时的最终值。额外函数调用可以为每次迭代创建独立参数绑定。

深入 JavaScript:循环回调为什么都读到最后一个值的处理、反馈与观察关系

图中的四个节点分别表示循环变量、回调创建、独立作用域、延后执行。顺着实线检查输入如何变成输出,再沿虚线核对反馈条件。图示表达的是本文讨论的关系,不是实测曲线或现场截图。

2. 最小实现与输入条件

先把回调保存到数组,循环结束后逐个调用,再用立即调用函数包装。这样不用计时器也能观察闭包问题。

1
2
3
4
5
6
7
var callbacks = [];
for (var i = 0; i < 3; i++) {
  (function(index) {
    callbacks.push(function() { console.log(index); });
  })(i);
}
callbacks[0]();

先记录输入、调用位置与控制台结果,再逐个改变条件。事件和异步实验保留触发顺序,避免在生产页面执行带有未知副作用的调试代码。

3. 用对照区分原因

下表列出需要主动改变的条件。预期行为来自机制分析,复现时还需记录运行环境和原始输出,不能将预期当作已经测得的结果。

改变的条件 需要验证的行为
多个回调共享同一个 i 延后执行时可能都读最终值
每次传入独立参数 回调可保留各自对应编号
闭包长期保留大对象 可能延长关联数据生命周期

对照 1:多个回调共享同一个 i

延后执行时可能都读最终值。观察时记录绑定身份而非函数数量。把这个条件与基准情形分开,有助于判断变化来自哪一层;若得到相反结果,应先核对前提,再修改实现。

对照 2:每次传入独立参数

回调可保留各自对应编号。观察时记录各次函数调用的词法环境。把这个条件与基准情形分开,有助于判断变化来自哪一层;若得到相反结果,应先核对前提,再修改实现。

对照 3:闭包长期保留大对象

可能延长关联数据生命周期。观察时记录仍可达的环境和引用。把这个条件与基准情形分开,有助于判断变化来自哪一层;若得到相反结果,应先核对前提,再修改实现。

4. 适用条件与取舍

闭包是正常机制,不应一概视为内存泄漏。是否造成无用保留,要看回调生命周期和被引用对象是否仍有业务用途。

一次正常运行只覆盖了这组输入。继续扩展前,应把上面的异常对照保留下来,尤其关注“闭包长期保留大对象”这一分支。后续方案若改变了图中任意一处依赖,原来的判断就要重新验证,不能仅凭界面相似或返回值相同沿用结论。

同月延伸

参考资料

  1. ECMAScript 5.1 规范
  2. HTML5 浏览器处理模型