浅谈JavaScript中的闭包

废话

闭包,这个词甚至让很多人看到都觉得头疼,有的人说这东西非常好用,有人说不懂是啥东西...

引用一段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!