JavaScript之闭包

jiezi

6 年前

闭包是指有权访问另一个函数作用域中的变量的函数。
创建闭包的常用方式是，在一个函数内部创建另一个函数。

请看以下代码：我们在 createComparisonFunction 函数里创建了一个闭包

function createComparisonFunction(propertyName) {return function(obj1, obj2) {var val1 = obj1[propertyName];
    var val2 = obj2[propertyName];
    if (val1 < val2) {    // 若返回负数，则第一个参数位于第二个参数之前
      return -1;
    } else if (val1 > val2) {    // 若返回正数，则第一个参数位于第二个参数之后
      return 1;
    } else {return 0;}
  };
}
// 创建函数
var compareNames = createComparisonFunction("name");
// 调用函数
var result = compareNames({name: "Nicholas"}, {name: "Greg"});

当某个函数第一次被调用时，会创建一个执行环境（execution context）和相应的作用域链，并把作用域链赋值给一个特殊的内部属性（[[Scope]]）。然后，使用 this、arguments 和其他命名参数 的值来初始化函数的活动对象（activation object）。但在作用域链中，外部函数的活动对象始终位于第二位，外部函数的外部函数的活动对象处于第三位，……直至作为作用域链终点的全局执行环境。

讲这么多，其实就是下面这幅图：

普通函数执行完毕后，局部活动对象就会被销毁。
而闭包的妙处在于，当 createComparisonFunction() 函数在执行完毕后：

它的 活动对象不会被销毁 ，因为 匿名函数的作用域链 仍然在引用 createComparisonFunction() 函数的活动对象；
它的作用域链会被销毁。

当匿名函数都被销毁之后，createComparisonFunction()函数的活动对象才会被销毁。所以，记得要解除对匿名函数的引用，以释放内存。

// 解除对匿名函数的引用（以便释放内存）compareNames = null;

对了，createComparisonFunction()函数还顺便是个比较函数，可用于sort。

var data = [{name: "Zah", age:20}, {name:"Amy", age:30}];
data.sort(createComparisonFunction("name"));
//data: 
//0: Object {name: "Amy", age: 30}
//1: Object {name: "Zah", age: 20}
data.sort(createComparisonFunction("age"));
//data: 
//0: Object {name: "Zah", age: 20}
//1: Object {name: "Amy", age: 30}

this对象是在运行时基于函数的执行环境绑定的：

在全局函数中，this等于window
当函数作为某个对象的方法调用时，this等于 那个对象
匿名函数的执行环境具有全局性，this通常等于window

请看以下代码：

var name = "The Window";
var obj = {
  name: "My Obj",
  getNameFunc: function() {return function() {return this.name;};
  }
};
alert(obj.getNameFunc()()); //"The Window"（非严格模式下）

为啥不是 ”My Obj”？说好的闭包能访问到外部作用域的变量值呢？
对，这话是没错的。但是，return 的这个匿名函数，没有被修改过 this，它的 this 对象依然指向 window。当沿着作用域链搜索this 值的时候，先搜索到了 自己的活动对象的 this 值 ，便停止搜索，自然而然this 等于 window 了。
讲人话就是：先吃自己碗里的 this。
那我就是想吃别人碗里的 this 怎么办？（傲娇.jpg）

var name = "The Window";
var obj = {
  name: "My Obj",
  getNameFunc: function() {
    var that = this;    // 加一个变量 that 引用 obj
    return function() {return that.name;};
  }
};
alert(obj.getNameFunc()()); //"My Obj"

未完待续~ 若有不足，请多指教，不胜感激！

以上代码借鉴于《Javascript 高级程序设计》

JavaScript之闭包

一、闭包

二、闭包中的 this