JavaScript--深入浅出之闭包
2018-01-19 15:45
253 查看
本文很多理论基础以及概念来自于《你不知道的JavaScript》,感谢KYLE SIMPSON先生。首先要说明,闭包是和作用域息息相关的。
function foo(){
var a = 2;
function bar(){console.log(a)}
return bar;
}
var baz = foo();
baz(); //2这段代码,函数bar()被当做一个值类型进行传递,这个时候就产生了闭包。这里呢,bar()声明的位置来看,他拥有访问foo()内部作用域的闭包。也就是bar()对该作用域的引用。强调一下概念,(访问自身作用域【函数或块作用域】)的函数被传递,就会产生闭包在这些函数中的应用。
通俗点说,这个函数能够读取到其他函数的内部变量,并且在这个函数的词法作用域之外被执行了。
下面概念清晰了,让我们来接触一道经典的闭包面试题:
for (var i = 0; i < 5; ++i) {
setTimeout(function () {
console.log(i + ' ');
}, 100);
}屁话不多说,执行结果五个六。背景知识:setTimeout注册的函数需要等待线程空闲才能执行,也就是for循环执行之后。
所以即使是setTimeout(..,0)输出结果也不会变。现在的问题就是,当函数执行的时候,访问的都是同一个i,所以我们要将函数自己圈起来一个闭包。
for (var i = 0; i < 5; ++i) {
(function () {
setTimeout(function () {
console.log(i + ' ');
}, 100);
}());
}
for (let i = 0; i < 5; ++i) {
setTimeout(function () {
console.log(i + ' ');
}, 100);
}
let在for循环中,每次循环都会声明一次,for循环了5次,在每个函数作用域中都存在一个自己的i.
function foo(){
var a = 2;
function bar(){console.log(a)}
return bar;
}
var baz = foo();
baz(); //2这段代码,函数bar()被当做一个值类型进行传递,这个时候就产生了闭包。这里呢,bar()声明的位置来看,他拥有访问foo()内部作用域的闭包。也就是bar()对该作用域的引用。强调一下概念,(访问自身作用域【函数或块作用域】)的函数被传递,就会产生闭包在这些函数中的应用。
通俗点说,这个函数能够读取到其他函数的内部变量,并且在这个函数的词法作用域之外被执行了。
下面概念清晰了,让我们来接触一道经典的闭包面试题:
for (var i = 0; i < 5; ++i) {
setTimeout(function () {
console.log(i + ' ');
}, 100);
}屁话不多说,执行结果五个六。背景知识:setTimeout注册的函数需要等待线程空闲才能执行,也就是for循环执行之后。
所以即使是setTimeout(..,0)输出结果也不会变。现在的问题就是,当函数执行的时候,访问的都是同一个i,所以我们要将函数自己圈起来一个闭包。
for (var i = 0; i < 5; ++i) {
(function () {
setTimeout(function () {
console.log(i + ' ');
}, 100);
}());
}
这样,通过这个IIFE函数确实包起来一个作用域,但是这个作用域却没有什么内容,那我们给他加点内容进去。
for (var i = 0; i < 5; ++i) { (function (i) { setTimeout(function () { console.log(i + ' '); }, 100); }(i)); }加了个i,这样内存中就会有五个i,分别存在于函数的作用域中。es6语法推出了块作用域,还可以通过将var 改成let来操作。
for (let i = 0; i < 5; ++i) {
setTimeout(function () {
console.log(i + ' ');
}, 100);
}
let在for循环中,每次循环都会声明一次,for循环了5次,在每个函数作用域中都存在一个自己的i.
相关文章推荐
- 深入浅出JavaScript之闭包(Closure)
- 深入浅出理解JavaScript的闭包
- JavaScript 闭包深入浅出
- 【转】深入浅出JavaScript之闭包(Closure)
- javascript深入浅出——闭包
- 深入浅出JavaScript之闭包(Closure)
- 深入浅出理解JavaScript的闭包概念
- 深入浅出理解JavaScript的闭包概念
- 深入浅出理解JavaScript的闭包概念
- 深入浅出理解JavaScript的闭包概念
- 深入浅出JavaScript之闭包(Closure)
- JavaScript深入浅出————OOP(闭包,作用域)(八)
- 深入浅出javascript闭包的用途和几种写法
- JavaScript 闭包深入浅出
- JavaScript-闭包深入浅出
- JavaScript深入浅出————函数和作用域(闭包,作用域)(七)
- 深入浅出javascript闭包的用途和几种写法
- 《Web 前端面试指南》1、JavaScript 闭包深入浅出
- 深入浅出JavaScript闭包
- javascript---闭包