浅析Javascript闭包的特性

开发 前端
本文将对Javascript闭包的特性进行分析,并举例进行说明。闭包,是指语法域位于某个特定的区域,具有持续参照(读写)位于该区域内自身范围之外的执行域上的非持久型变量值能力的段落。

Javascript闭包的定义非常晦涩——闭包,是指语法域位于某个特定的区域,具有持续参照(读写)位于该区域内自身范围之外的执行域上的非持久型变量值能力的段落。这些外部执行域的非持久型变量神奇地保留它们在闭包最初定义(或创建)时的值(深连结)。

简单来说,Javascript闭包就是在另一个作用域中保存了一份它从上一级函数或作用域取得的变量(键值对),而这些键值对是不会随上一级函数的执行完成而销毁。周爱民说得更清楚,闭包就是“属性表”,闭包就是一个数据块,闭包就是一个存放着“Name=Value”的对照表。就这么简单。但是,必须强调,闭包是运行期概念,一个函数实例。

Javascript闭包的实现,通常是在函数内部再定义函数,让该内部函数使用上一级函数的变量或全局变量。

ECMAScript认为使用全局变量是一个简单的Javascript闭包实例。

  1. var sMessage = "Hello World";   
  2. function sayHelloWorld(){   
  3. alert(sMessage);   
  4. };   
  5. sayHelloWorld(); 

但它完成没有体现Javascript闭包的特性……

现在比较让人认同的Javascript闭包实现有如下三种

  1. with(obj){   
  2. //这里是对象闭包   
  3. }(function(){      
  4. //函数闭包   
  5. })()try{   
  6. //...   
  7. catch(e) {   
  8. //catch闭包 但IE里不行   

附上今天在无忧看到的问题:

要求:

让这三个节点的Onclick事件都能正确的弹出相应的参数。

  1. <ul>    
  2. <li id="a1">aa</li>    
  3. <li id="a2">aa</li>   
  4. <li id="a3">aa</li>   
  5. </ul>   
  6. <script type="text/javascript">   
  7. <ul>   
  8. <li id="a1">aa</li>   
  9. <li id="a2">aa</li>   
  10. <li id="a3">aa</li>   
  11. </ul>   
  12. <script type="text/javascript">   
  13. for(var i=1; i < 4; i++){   
  14. var id = document.getElementById("a" + i);   
  15. id.onclick = function(){   
  16. alert(i);//现在都是返回4      
  17. }   
  18. }   
  19. </script> 

客服果果的解答:

  1. for(var i=1; i < 4; i++){      
  2. var id = document.getElementById("a" + i);     
  3. /*     
  4. 这里生成了一个匿名函数并赋值给对象 id_i;     
  5. */     
  6. id.onclick = function(){          
  7. /*          
  8. 这个i来源于局部变量,无法以window.i或者obj.i的形式在后期引用,          
  9. 只好以指针或者变量地址方式保存在这个匿名函数中,          
  10. 这就是传说的闭包,所以所有这个过程中生成的事件句柄都使用引用          
  11. 的方式来持久这个变量,也就是这些匿名函数共用一个变量i;          
  12. */         
  13. alert(i);      
  14. };   
  15. }; 

局部变全局

  1. for(var i=1; i < 4; i++){   
  2. var id = document.getElementById("a" + i);     
  3. id.i=i;//这个i有了根     
  4. id.onclick=function(){          
  5. alert(this.i)      
  6. };   
  7. };1.for(var i=1; i < 4; i++){     
  8. var id = document.getElementById("a" + i);    
  9. window[id.id]=i;//这个i有了根    
  10. id.onclick=function(){         
  11. alert(window[this.id]);     
  12. };   

产生一对一的更多Javascript闭包

  1. for(var i=1; i < 4; i++){    
  2. var id = document.getElementById("a" + i);    
  3. id.onclick = new function(){        
  4. var i2=i;//这个i是闭包的闭包       
  5. return function(){           
  6. alert(i2);       
  7. }     
  8. };   

【编辑推荐】

  1. JavaScript类和继承:prototype属性
  2. JavaScript类和继承:this属性
  3. ExtJS Grid Tooltip的3+1种实现方式总结
  4. JavaScript异步调用框架的链式实现
  5. JavaScript异步调用框架的jQuery风格链式调用
责任编辑:彭凡 来源: cnblogs
相关推荐

2011-03-02 12:33:00

JavaScript

2021-02-21 16:21:19

JavaScript闭包前端

2016-09-14 09:20:05

JavaScript闭包Web

2011-05-25 14:48:33

Javascript闭包

2020-10-14 15:15:28

JavaScript(

2016-09-18 20:53:16

JavaScript闭包前端

2010-06-23 10:24:42

Javascript闭

2012-11-29 10:09:23

Javascript闭包

2017-09-14 13:55:57

JavaScript

2011-05-12 18:26:08

Javascript作用域

2017-05-22 16:08:30

前端开发javascript闭包

2021-01-13 11:25:12

JavaScript闭包函数

2009-03-17 15:36:29

JavaScript循环事件

2021-12-06 07:15:48

Javascript作用域闭包

2009-10-26 09:41:26

PHP5.3闭包特性

2024-01-22 09:51:32

Swift闭包表达式尾随闭包

2010-06-17 10:22:47

PHP

2011-05-30 14:41:09

Javascript闭

2020-02-12 16:58:15

JavaScript前端技术

2023-10-26 07:47:35

JavaScript代码变量
点赞
收藏

51CTO技术栈公众号