关于JavaScript闭包的个人思考与应用
2015-08-27 11:32
591 查看
一、闭包的概念
先说一下百度百科的解释——“闭包是可以包含自由(未绑定到特定对象)变量的代码块;这些变量不是在这个代码块内或者任何全局上下文中定义的,而是在定义代码块的环境中定义(局部变量)。“闭包” 一词来源于以下两者的结合:要执行的代码块(由于自由变量被包含在代码块中,这些自由变量以及它们引用的对象没有被释放)和为自由变量提供绑定的计算环境(作用域)。以上的闭包解释其实已经不局限于JavaScript了,其实很多语言都支持闭包这个概念。下面我来通俗的说一下我对闭包的理解——闭包就是可以用于访问其他函数内部变量并且将其“包养”起来的函数。下面通过代码来讲解下作用域进而引出闭包的使用。
二、作用域与闭包
先看下面两个例子代码一:
var name = "The Window"; var object = { name : "My Object", getNameFunc : function(){ return function(){ return this.name; }; } }; alert(object.getNameFunc()());
代码二:
var name = "The Window"; var object = { name : "My Object", getNameFunc : function(){ var that = this; return function(){ return that.name; }; } }; alert(object.getNameFunc()());
代码一 执行弹出来的是“The Window”,代码二执行弹出来的时“My Object”。
结果解释:代码二中的getNameFunc方法比代码一中多定义了一个that变量并且将它指向this,当它执行到object.getNameFunc()()得到了内部嵌套函数返回的that.name,此时that这个变量在嵌套函数中并没有定义,于是它就会到定义这个嵌套函数的作用域(getNameFunc函数内的作用域)中找that,由于嵌套函数中使用了外部getNameFunc函数中定义的that,所以在执行完object.getNameFunc()这个方法后,that变量保存依然在内存中,这便是闭包的神奇之处,由于that=this,而此时this指向的是调getNameFunc方法的对象即object,所以that.name="My
Object"。
而在在代码一中在执行完object.getNameFunc()()得到了内部嵌套函数返回的this.name,此时由于this在嵌套函数中,this并不指向调用getNameFunc方法的object,而是指向全局变量Window,this.name=Window,name
于是便得到了“The Window” 。
总结:要理解闭包得先理解作用域的概念,当函数内部引用了了自由变量(函数体内没有定义的变量),函数便会到定义自己的作用域中找这个变量,而这个变量在这个函数执行之前会一直保存在内存中(尽管定义它的方法执行完)等待调用,我们可以将调用该自由变量的函数看成闭包,闭包“包养”了这个自由变量。
三、闭包的使用
首先看一段代码,for循环给元素绑定事件:现有如下html结构
<ul> <li>click me</li> <li>click me</li> <li>click me</li> <li>click me</li> </ul>
执行如下JavaScript代码
var elements=document.getElementsByTagName('li'); var length=elements.length; for(var i=0;i<length;i++){ elements[i].onclick=function(){ alert(i); } }结果分别依次点击4个li标签弹出的均为“4”,而不是”0“,”1“,”2“,”3“这是为什么呢?
因为绑定的事件方法是异步执行的,当他们还没有执行的时候,for循环就完毕了,此时i=4,而每个事件函数中的alert(i),均指向全局变量i,所以弹出的都是“4”。
下面我们用闭包“包养”自由变量 这一特性,让它依次弹出”0“,”1“,”2“,”3“,将JavaScript按如下写:
var elements=document.getElementsByTagName('li'); var length=elements.length; for(var i=0;i<length;i++){ elements[i].onclick=(function(a){ return function(){ alert(a); } })(i); } //用此代码可以依次弹出 0,1,2,3(闭包可以“包养”外部函数变量
这里我们使用了一个自执行的匿名函数来将原来的事件函数返回, 把for循环中每一次的i的值传入该匿名函数,它内部返回的事件函数便成了一个闭包,
可以包养每一次传入的i值,将它保存在内存中,于是就达到了目的。
以上只是个人的一些思考,可能表述有误,欢迎指正!
相关文章推荐
- JQuery1——基础($对象,选择器,对象转换)
- Android学习笔记(二九):嵌入浏览器
- Android java 与 javascript互访(相互调用)的方法例子
- 深入理解PHP之匿名函数
- JavaScript演示排序算法
- javascript实现10进制转为N进制数
- 2019年开发人员应该学习的8个JavaScript框架
- HTML中的script标签研究
- 对一个分号引发的错误研究
- 异步流程控制:7 行代码学会 co 模块
- JavaScript拆分字符串时产生空字符的原因
- IE8开发人员工具教程(二)
- 在flex中执行一个javascript方法的简单方式
- Flex结合JavaScript读取本地路径的方法
- Ruby中使用Block、Proc、lambda实现闭包
- PowerShell中执行Javascript的方法示例
- javascript asp教程第六课-- response方法
- javascript asp教程More About Recordsets
- javascript asp教程第十二课---session对象