JavaScript之闭包

一、闭包

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

请看以下代码：我们在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对象是在运行时基于函数的执行环境绑定的：

• 在全局函数中，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"

三、模仿块级作用域

我们一定遇到过这个问题：

用setTimeOut输出1-10，一秒一个

最简单的方法当然是：

for (let i = 0; i < 10; i++) {
  setTimeout(function() {
    alert(i);
  }, 1000*i);
}

那我偏要用闭包呢：

for (var i = 0; i < 10; i++) {
  (function(i) {
    setTimeout(function() {
      alert(i);
    }, 1000*i)
  })(i)
}

每次循环中，立即执行匿名函数，并传入一个参数i。由于函数参数是按值传递的，所以就会把变量i的当前值复制给参数i，从而输出预期的i值。
而这个就是我们手动模仿出来的块级作用域（私有作用域）：

  (function() {
    // 块级作用域
  })()

将函数声明包含在一对圆括号中，代表它是一个函数表达式。紧随其后的圆括号会立即调用这个函数。因为JavaScript将function关键字当作一个函数声明的开始，函数声明后面不能跟圆括号，而函数表达式可以跟圆括号。

---

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

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