JavaScript closures

776 views

Published on

介绍JavaScript中闭包的概念

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
776
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

JavaScript closures

  1. 1. JavaScript Closure陈浩
  2. 2. Agenda从头说起两个问题如何而来
  3. 3. 定义闭包是可以包含自由变量(未绑定到特定对象)的代码块;这些变量不是在这个代码块内或者任何全局上下文中定义的,而是在定义代码块的环境中定义。
  4. 4. Example 1function f1(){var n=999;function f2(){console.log(n);}return f2;}f1()(); // 999
  5. 5. Example 2 (I)function f1(){var n=999;nAdd=function(){ n+=1}function f2(){
console.log(n);
 }return f2;}var result=f1();result(); // 999nAdd();result(); // 1000影响Garbage Collection!
  6. 6. 两个问题
  7. 7. Question 1var name = "The Window";var object = {name : "My Object",getNameFunc : function(){return function(){return this.name;};}};console.log(object.getNameFunc()());
  8. 8. Question 2var name = "The Window";var object = {name : "My Object",getNameFunc : function(){return function(){return name;};}};console.log(object.getNameFunc()());
  9. 9. Question 1
  10. 10. Scope Chain作用域链:Scope Chain.查找变量或函数的过程:Identifier Resolution.
  11. 11. this到底是谁?this并不指向创建它的对象,而是指向执行它的对象。object.getNameFunc()();var tempFunc = object.getNameFunc();tempFunc();window.object.getNameFunc()();
  12. 12. So, this is window!
  13. 13. Double Confirmvar name = "The Window";var object = {name : "My Object",getNameFunc : function(){return function(){return this.name;};}};window.onload = object.getNameFunc;
  14. 14. Solution ?
  15. 15. Solution 1var 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. 16. Solution 2var name = "The Window";var object = {name : "My Object",getNameFunc : function(){var that = this;return function(){return that.name;};}};console.log(object.getNameFunc()());
  17. 17. Question 2
  18. 18. 权威定义<<JavaScript高级程序设计>> 7.2, 3rd Edition:当某个函数第一次被调用时,会创建一个执行环境(execution context,环境比上下文更直白)及相应的作用域链(scope chain),并把作用域(scope)赋值给一个特殊的内部属性([[Scope]])。然后,使用this、arguments和其它命名参数的值来初始化函数的活动对象(activationobject)。但在作用域链中,外部函数(outer)的活动对象(activationobject)处于第二位,外部函数的外部函数的活动对象处于第三位,……直至作为作用域链终点的全局执行环境。
  19. 19. 看图
  20. 20. 准确的解释与外部函数声明对应的函数对象会在全局执行环境的变量实例化过程中被创建。因此,外部函数对象的[[scope]] 属性中会包含一个只有全局对象的“单项目(one item)”作用域链。
  21. 21. 有图有真相
  22. 22. Double Confirmvar name = "The Window";var object = {name : "My Object",getNameFunc : function(){var name= “Inner name”;return function(){return name;};}};console.log(object.getNameFunc()());
  23. 23. JS Core求证 ……ByteCodeGenerator & JIT ???
  24. 24. Reference1. PPK 谈 JavaScript 的 this 关键字http://www.cnblogs.com/georgewing/archive/2009/09/29/1576641.html2. 学习Javascript闭包(Closure)http://www.ruanyifeng.com/blog/2009/08/learning_javascript_closures.html3. 闭包的秘密http://www.gracecode.com/archives/2385/4. JavaScript Closures Explainedhttp://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. 25. Q & A

×