一、闭包
闭包是指有权访问另一个函数作用域中的变量的函数。
创建闭包的常用方式是,在一个函数内部创建另一个函数。
请看以下代码:我们在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"
未完待续~若有不足,请多指教,不胜感激!
以上代码借鉴于《Javascript高级程序设计》