介绍JavaScript中闭包的概念

1. JavaScript Closure
陈浩

2. Agenda
从头说起
两个问题
如何而来

3. 定义
闭包是可以包含自由变量（未绑定到特定对象）的代
码块；这些变量不是在这个代码块内或者任何全局上
下文中定义的，而是在定义代码块的环境中定义。

4. Example 1
function f1(){
var n=999;
function f2(){
console.log(n);
}
return f2;
}
f1()(); // 999

5. Example 2 (I)
function f1(){
var n=999;
nAdd=function(){ n+=1}
function f2(){
console.log(n); }
return f2;
}
var result=f1();
result(); // 999
nAdd();
result(); // 1000
影响Garbage Collection!

6. 两个问题

7. Question 1
var name = "The Window";
var object = {
name : "My Object",
getNameFunc : function(){
return function(){
return this.name;
};
}
};
console.log(object.getNameFunc()());

8. Question 2
var name = "The Window";
var object = {
name : "My Object",
getNameFunc : function(){
return function(){
return name;
};
}
};
console.log(object.getNameFunc()());

9. Question 1

10. Scope Chain
作用域链:Scope Chain.
查找变量或函数的过程:
Identifier Resolution.

11. this到底是谁?
this并不指向创建它的对象，而是指向执行它的对象。
object.getNameFunc()();
var tempFunc = object.getNameFunc();
tempFunc();
window.object.getNameFunc()();

12. So, this is window!

13. Double Confirm
var name = "The Window";
var object = {
name : "My Object",
getNameFunc : function(){
return function(){
return this.name;
};
}
};
window.onload = object.getNameFunc;

14. Solution ?

15. Solution 1
var name = "The Window";
var object = {
name : "My Object",
getNameFunc : function(){
return (function(){
return this.name;
}).call(this);
}
};
console.log(object.getNameFunc());
console.log( object.getNameFunc().call(object) );

16. Solution 2
var name = "The Window";
var object = {
name : "My Object",
getNameFunc : function(){
var that = this;
return function(){
return that.name;
};
}
};
console.log(object.getNameFunc()());

17. Question 2

18. 权威定义
<<JavaScript高级程序设计>> 7.2, 3rd Edition：
当某个函数第一次被调用时，会创建一个执行环境(execution context,
环境比上下文更直白)及相应的作用域链(scope chain)，并把作用域
(scope)赋值给一个特殊的内部属性([[Scope]])。然后，使用this、
arguments和其它命名参数的值来初始化函数的活动对象(activation
object)。但在作用域链中，外部函数(outer)的活动对象(activation
object)处于第二位，外部函数的外部函数的活动对象处于第三位，……
直至作为作用域链终点的全局执行环境。

19. 看图

20. 准确的解释
与外部函数声明对应的函数对象会在全局执行环境的
变量实例化过程中被创建。因此，外部函数对象的
[[scope]] 属性中会包含一个只有全局对象的“单项目
(one item)”作用域链。

21. 有图有真相

22. Double Confirm
var name = "The Window";
var object = {
name : "My Object",
getNameFunc : function(){
var name= “Inner name”;
return function(){
return name;
};
}
};
console.log(object.getNameFunc()());

23. JS Core求证 ……
ByteCodeGenerator & JIT ???

24. Reference
1. PPK 谈 JavaScript 的 this 关键字
http://www.cnblogs.com/georgewing/archive/2009/09/29/1576641.html
2. 学习Javascript闭包（Closure）
http://www.ruanyifeng.com/blog/2009/08/learning_javascript_closures.html
3. 闭包的秘密
http://www.gracecode.com/archives/2385/
4. JavaScript Closures Explained
http://lostechies.com/derekgreer/2012/02/17/javascript-closures-explained/
5. 理解JavaScript闭包
http://www.cn-cuckoo.com/main/wp-
content/uploads/2007/08/JavaScriptClosures.html

25. Q & A