js闭包陷阱问题
JavaScript是一种非常强大的函数式编程语言,可以动态创建函数对象。
由于JavaScript还支持闭包(Closure),因此,函数可以引用其作用域外的变量,非常强大。
来看看在JavaScript中使用闭包的陷阱:
var tasks = [];
for (var i=0; i<3; i++) {
tasks.push(function() {
console.log('>>> ' + i);
});
}
console.log('end for.');
for (var j=0; j<tasks.length; j++) {
tasks[j]();
}
如果在循环中创建函数,并引用循环变量,原意是打印出0,1,2,但结果却是一样的:
end for.
>>> 3
>>> 3
>>> 3
这个问题的原因在于,函数创建时并未执行,所以先打印end for.
,然后才执行函数。
由于函数引用了循环变量i
,在函数执行时,由于i
的值已经变成了3
,所以,打印出的结果不对。
如果我们用一个变量n
来复制一份i
传入呢?
var tasks = [];
for (var i=0; i<3; i++) {
var n = i;
tasks.push(function() {
console.log('>>> ' + n);
});
}
console.log('end for.');
for (var j=0; j<tasks.length; j++) {
tasks[j]();
}
结果还是不对:
end for.
>>> 2
>>> 2
>>> 2
注意到i
会比n
多加一次,所以n
的最终值是2
。
这个问题的原因是JavaScript虽然有局部变量,但局部变量只有函数作用域,而没有其他语言通常有的块作用域(循环内部,if内部),所以,无论在函数内部的哪个地方定义变量,变量作用域都是整个函数。
把上述代码的变量提取到函数开头,其实是这样的:
var tasks, i, n, j;
tasks = [];
for (i=0; i<3; i++) {
n = i;
tasks.push(function() {
console.log('>>> ' + n);
});
}
console.log('end for.');
for (j=0; j<tasks.length; j++) {
tasks[j]();
}
完全等价。
根据道爷的说法,JavaScript缺少块作用域是语言设计的一个缺陷。所以,上面的代码有问题,就是因为n
的作用域是整个函数,而不是循环。
创建闭包的一条原则就是:
不要引用循环变量!
这条原则对有没有块作用域的函数式编程语言都适用。
如果一定要在闭包中引用循环变量怎么办???
方法是再创建一个函数,将循环变量作为函数参数传入:
var tasks = [];
for (var i=0; i<3; i++) {
var fn = function(n) {
tasks.push(function() {
console.log('>>> ' + n);
});
};
fn(i);
}
这段代码是正确的,是因为循环内部,fn()
函数立即被执行,因此,闭包拿到的参数n
就是当前循环变量的值的副本。
最后,简化语法,直接用匿名函数的立即执行模式(function() { ... })()
改写如下:
var tasks = [];
for (var i=0; i<3; i++) {
(function(n) {
tasks.push(function() {
console.log('>>> ' + n);
});
})(i);
}
来自:http://www.liaoxuefeng.com/article/001398146224424978bbe1df8594901b2d477d1619cd7ca000
js闭包陷阱问题的更多相关文章
- js闭包的作用
js闭包的用途详解 js闭包可以用在许多地方.它的最大用处有两个,一个是前面提到的可以读取函数内部的变量,另一个就是让这些变量的值始终保持在内存中.具体怎么理解呢,各位看官请仔细看好下文 我们来看 ...
- js闭包的作用域以及闭包案列的介绍:
转载▼ 标签: it js闭包的作用域以及闭包案列的介绍: 首先我们根据前面的介绍来分析js闭包有什么作用,他会给我们编程带来什么好处? 闭包是为了更方便我们在处理js函数的时候会遇到以下的几 ...
- 大部分人都会做错的经典JS闭包面试题
由工作中演变而来的面试题 这是一个我工作当中的遇到的一个问题,似乎很有趣,就当做了一道题去面试,发现几乎没人能全部答对并说出原因,遂拿出来聊一聊吧. 先看题目代码: function fun(n,o) ...
- Js闭包常见三种用法
Js闭包特性源于内部函数可以将外部函数的活动对象保存在自己的作用域链上,所以使内部函数的可以将外部函数的活动对象占为己有,可以在外部函数销毁时依然存有外部函数内的活动对象内容,这样做的好处是可 ...
- js闭包之初步理解( JavaScript closure)
闭包一直是js中一个比较难于理解的东西,而平时用途又非常多,因此不得不对闭包进行必要的理解,现在来说说我对js闭包的理解. 要理解闭包,肯定是要先了解js的一个重要特性, 回想一下,那就是函数作用域, ...
- (原创)JS闭包看代码理解
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="C ...
- js闭包理解
js闭包的作用是使函数外可以访问函数内部的变量,是通过 在函数内部 定义 访问函数内变量 的函数实现的,内部的一个函数产生一个闭包 function a() { var i=0; return fun ...
- js闭包理解实例小结
Js闭包 闭包前要了解的知识 1. 函数作用域 (1).Js语言特殊之处在于函数内部可以直接读取全局变量 <script type="text/javascript"> ...
- Js闭包的用途
本来想总结一点JavaScript中的闭包的一些用法,在查资料的时候发现了一篇很好的文章,就转过来收藏了,下面附上传送门: js闭包的用途 ---------sunlylorn 我们来看看闭包的用途. ...
随机推荐
- js判断手机的类型
var ua = navigator.userAgent;if(ua.match(/iPhone|iPod/i) != null){console.log("iphone代码"); ...
- css 实现评分效果
css实现评分效果,其实是css sprites (css精灵)的延伸应用,效果的实现主要是由 background-position 属性移动图片位置.之前看到有前辈写过关于这方面的内容,在理解上 ...
- Android 四大组件之Activity生命周期
写这篇博文之前,已经对android有一定的了解和认识.这篇博文主要讲述android的Activity的生命周期,这是android开发者必须掌握的知识.android的Activity组件拥有7个 ...
- android开发网络连接工具类(一)
网络连接工具类整理: package com.gzcivil.utils; import java.io.IOException; import java.util.ArrayList; import ...
- HTML——JAVASCRIPT——关灯效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- SQL Server 已提交读快照 测试
1. 打开数据库 已提交读快照 选项 2. 数据库 已提交读快照 模式下的测试 a) 测试表 Test b) 开启事务1,更新数据C2 = '200'(未提交) BEGIN TRAN ' WHERE ...
- JSON 解析第三方框架
常见的 JSON 解析第三方框架 JSONKit(最快) SBJson TouchJSON 以上三个框架的性能依次降低! 介绍 JSONKit 第三方框架的目的 JSON 的解析并不是表面上那么简单 ...
- c# 另存为excel
去网上找了一下 看了一个比较简单的新建excel然后另存为. 要引用Microsoft.Office.Interop.Excel命名空间,如果没有的话 ,百度比我懂. 直接付代码: Microsof ...
- zmud中文版_汉化补丁_汉化文件ZMUD破解
ZMUD721中文版 http://pan.baidu.com/s/1mixwIoC
- chrome提供的功能
chrome://chrome-urls/ List of Chrome URLs chrome://accessibility chrome://appcache-internals chrome: ...