循环中创建多个回调,最后触发时却都看到同一个编号,原因在于共享了同一变量绑定。
本文使用ECMAScript 5.1 与浏览器 DOM,代码可放入独立演示页。JavaScript(脚本语言)的作用域、函数调用与事件调度,需要与浏览器提供的接口区分。本文主体使用当时已经可用的语法,不把语言版本和宿主环境混为一谈。
1. 从现象推到机制
闭包保留对词法环境的访问,不是创建时给所有变量拍一张值快照。使用 var 的循环通常共享同一个函数级变量,回调执行时读取的是当时的最终值。额外函数调用可以为每次迭代创建独立参数绑定。
图中的四个节点分别表示循环变量、回调创建、独立作用域、延后执行。顺着实线检查输入如何变成输出,再沿虚线核对反馈条件。图示表达的是本文讨论的关系,不是实测曲线或现场截图。
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. 适用条件与取舍
闭包是正常机制,不应一概视为内存泄漏。是否造成无用保留,要看回调生命周期和被引用对象是否仍有业务用途。
一次正常运行只覆盖了这组输入。继续扩展前,应把上面的异常对照保留下来,尤其关注“闭包长期保留大对象”这一分支。后续方案若改变了图中任意一处依赖,原来的判断就要重新验证,不能仅凭界面相似或返回值相同沿用结论。