废话
闭包,这个词甚至让很多人看到都觉得头疼,有的人说这东西非常好用,有人说不懂是啥东西...
引用一段JavaScript权威指南上一段话:
和其他大多数现代编程语言一样,JavaScript也采用词法作用域(lexical scoping).也就是,函数的执行依赖于变量作用域,这个作用域是函数定义时决定的.而不是函数执行时决定的.为了实现这种词法作用域,JavaScript函数对象的内部状态不仅包含函数的代码逻辑,还必须引用当前的作用域链(scope chain).函数可以通过作用域链(scope chain)相互关联起来,函数内部的变量都可以保存在函数作用域内,这种特性称为"闭包”.从某种角度上来说,JavaScript中所有的函数都是闭包:他们都是对象,他们都关联到作用域链.
这段话,很多人即使读了几遍以后还是云里雾里,其实关于这段话,你只需要记住一句:
函数的执行依赖于变量作用域,这个作用域是函数定义时决定的,而不是函数执行时决定的.
那么接下我们通过代码解析,来一步一步解释何为闭包.
闭包
可能会有一些老司机会告诉你,在JavaScript中闭包就是一个嵌套函数...
用一段简单粗暴的代码来告诉你,啥是闭包:
function showClosure() {
var str = "闭包";
return function() { // 这就是一个闭包
return str;
};
}
showClosure();
我们来分析一下这段代码:上面这段代码定义了一个showClosure()函数,该函数又将一个匿名函数作为返回值返回.这里就形成了一个闭包.在最后调用showClosure()函数的时候其定义时的作用域链仍然是有用的,这并不会影响里面的闭包.而且showClosure()返回了一个匿名函数/闭包,这里有很多微妙的事情可以说:
- 闭包的值捕获
- 此时垃圾机制的运作和作用域链的关系
- 值捕获导致的内存问题
- this关键字在其中的使用
接下来我们一一分析;
值捕获
值捕获是闭包的一个非常强大的特性,闭包可以捕获到局部变量(或参数),并一直保存下来,驻留在内存中;
这个特性可以解决全局变量的污染问题(全局变量污染导致应用程序不可预测性,每个模块都可调用必将引来灾难, 所以推荐使用私有的,封装的局部变量),在很多开源框架中普遍使用;
我们再看看上面那段代码,然后根据代码来分析:
function showClosure() {
var str = "闭包";
return function() {
return str;
};
}
console.log(showClosure()());
注意,在外围函数中有一个值为”闭包”的局部变量str.按照我们常规的思维,在showClosure函数执行到最后一个”}”的时候,里面所有的值应该都会被垃圾回收机制回收掉才对,然而我们调用该函数的时候其结果仍然能够返回str的值.这就是因为里面的闭包捕获了str,导致其会驻留在内存中不被释放,所以我们后面调用的时候仍然有值;很多人很是不解,这其实跟作用域链原理有关:
JavaScript中的作用域链(scope chain)是一个列表对象,而不是像其他语言是绑定的栈(stack);每次调用JavaScript函数的时候,都会为之创建一个新的对象来保存局部变量,把这个对象添加至作用域链中;当函数返回的时候,就从作用域链中将这个绑定的变量的对象删除;如果不存在嵌套的函数,也就没有其他引用指向这个绑定对象,它就会被当做垃圾回收掉;如果定义了嵌套的函数,每一个嵌套函数又都各自对应一个作用域链,并且这个作用域链指向一个变量绑定对象.但如果这些嵌套的函数对象在外部函数中保存下来,那么它们呢也会和所指向的变量绑定对象一样当做垃圾回收掉;但是如果这个函数定义了嵌套函数,并且将它作为返回值或者被存储下来,这是就会有一个外部引用指向这个嵌套的函数.它就不会被当做垃圾回收,并且他所指向的变量绑定对象也不会被当做垃圾回收掉.
所以,其实是在调用showClosure函数的时候,str并没有被释放,因为他被作为返回值函数的返回值返回了(有点儿绕😅);
看到这里有些同学可能就会看出另一个问题,闭包会引起内存泄露,因为他会捕获一些值存储下来,导致后面不能释放,除非浏览器被关闭;
内存问题
既然值被捕获了,系统不能自动释放,那么我们就自己手动释放嘛;只需要将需要释放的对象手动置为null即可;
示例:
function showClosure() {
var aDiv = document.getElementById("aDiv");
aDiv.onclick = function() {
console.log(aDiv.innerHTML);
}
aDiv = null; // 解除引用,如果没有解除,在浏览器被关闭的时候才能被回收
}
闭包中的this
在使用闭包的时候有一个非常需要注意的东西:魔性的this!
在JavaScript中这个this非常容易用错,即使是多年的老司机也是经常翻车.
this如果在全局中调用其值为全局对象(非严格模式)或undefined(严格模式).那么大多数人会认为在闭包中使用this返回的应该是当前函数对象或者是最外层的函数对象;然而在闭包中却不是这样,在闭包中this会随着调用对象的不同所指代的对象不同,而非外层的函数对象;所以这里使用this的时候要使用一个小技巧,那就是把最外层对象的this保存下来;
看代码:
// 注意这段代码是执行在非严格模式下的
// 在严格模式下这种方式会报错,也就是说严格模式下不允许你这么写
var name = "NAME";
var person = {
name : "name",
getUserName : function() {
return function() {
return this.name;
};
}
};
console.log(person.getUserName()());
这个东西在很多面试题上经常看到,其实就是考你对闭包和作用域的理解;
执行结果如下:
NAME
看到没,这种情况下this会指向全局对象,这样this.name的值就是”NAME”;这如果想要让this.name的值为”name”有两种方法:
第一种,在调用的时候使用call函数强制传一个对象给他.
console.log(person.getUserName().call(person));
第二种,保存外层对象的this:
var name = "NAME";
var person = {
name : "name",
getUserName : function() {
var self = this; // 将this保存至一个变量中
return function() {
return self.name;
};
}
};
console.log(person.getUserName()());
所以,还是记住那句话:函数的执行依赖于变量作用域,这个作用域是函数定义时决定的,而不是函数执行时决定的.
生命不息，折腾不止...
I'm not a real coder,but i love it so much!
