javascript笔记-----------js闭包
来源:互联网 发布:mac 连接云服务器 编辑:程序博客网 时间:2024/06/05 21:51
一、概念
官方的回答:所谓“闭包”,指的是一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分。
额,看不懂。
<script type="text/javascript"> function funDemo() { var count = 100; function printNum() { console.log(count);//引用外层函数变量 } return printNum();//引用内部函数 } funDemo(); //日志: 100 </script>
如上如上所述,在JavaScript中,函数是对象,对象是属性的集合,而属性的值又可以是对象,则在函数内定义函数成为理所当然,如果在函数funDemo内部声明函数printNum,然后在函数外部调用printNum,这个过程即产生了一个闭包。
二、变量的作用域
<script type="text/javascript"> var MainIndex = 10; //全局变量 function funDemo() { console.log(mainIndex); } funDemo(); //日志: 10 </script>
在函数内部可以直接读取全局变量MainIndex,但在外部无法读取函数内部定义的局部变量。
<script type="text/javascript"> function funDemo() { var n = 20; console.log(mainIndex); } console.log(n); //error: “n”未定义 </script>
在声明变量时需要注意,如果不使用var关键字将视为定义全局变量,如下:
<script type="text/javascript"> function funDemo() { n = 20; } funDemo(); console.log(n); //日志: 20 </script>
三、如何从外部读取函数内局部变量
在正常情况下这样是不可以的,所以我们需要通过一些变通来达到我们的目的。
<script type="text/javascript"> function funDemo() { var n = 20; function printNum() { var n1 = 10; console.log(n); } } </script>
函数printNum包含在funDemo函数中,这时funDemo中的所有变量相对于printNum来说都是“全局的”,所以在printNum中可以正常读取局部变量n。
反之,在funDemo函数中读取printNum的局部变量n1则会报错,这就是JavaScript中的“链式作用域”结构。因为这种结构子对象可以一级一级向上找
父对象的的变量,所以说父对象的所有变量对子对象来说都是可以正常读取的,但父对象读取子对象的变量则会报错。
这样来说,我们是不是就可以通过将上边的代码改造一下,将子对象printNum作为父对象funDemo的返回值就可以读取funDemo中的局部变量呢?
<script type="text/javascript"> function funDemo() { var n = 20; function printNum() { console.log(n); } return printNum; } var test = funDemo(); test(); //日志: 20 </script>
通过这些代码我们对“闭包”有了粗浅的理解,闭包就是将函数内部和函数外部连接起来的一座桥梁。
对于理解“链式作用域”,有如下代码
<script type="text/javascript"> var name = "The Window"; var object = { name: "My Object", getNameFunc: function () { return function () { return this.name; }; } }; console.log(object.getNameFunc()()); //The Window </script>
这段代码很好的解释了“链式作用域”结构,将它理解后也就可以算是理解闭包的运行机制了。
四、闭包的用途
闭包可以用在许多方面,最大的用处有两个,一个就是上面提到的读取函数内部的变量,另外一个就是将这些变量始终保持在内存中。
如何理解呢,请看如下代码:
<script type="text/javascript"> function funDemo() { var n = 20; addNum = function(){ n++; } function printNum(){ console.log(n); } return printNum; } var test = funDemo(); test(); //日志: 20 addNum(); test();//日志: 21 </script>
在这段代码中,test实际上就是闭包printNum函数。它一共运行了两次,第一次的值是20,第二次的值是21。这证明了,函数funDemo中的局部变量n一直保存在内存中,并没有在funDemo调用后被自动清除。为什么会这样呢?原因就在于funDemo是printNum的父函数,而printNum被赋给了一个全局变量,这导致printNum始终在内存中,而printNum的存在依赖于funDemo,因此funDemo也始终在内存中,不会在调用结束后,被垃圾回收机制“GC”回收。
这段代码中另一个值得注意的地方,就是“addNum = function(){n++;}”这一行,首先在addNum前面没有使用var关键字,因此 addNum是一个全局变量,而不是局部变量。其次,addNum的值是一个匿名函数,而这个匿名函数本身也是一个闭包,所以nAdd相当于是一个setter,可以在函数外部对函数内部的局部变量进行操作。
五、使用闭包的注意点
1)由于闭包会使得函数中的变量都被保存在内存中,内存消耗很大,所以不能滥用闭包,否则会造成网页的性能问题,在IE中可能导致内存泄露。解决方法是,在退出函数之前,将不使用的局部变量全部删除。2)闭包会在父函数外部,改变父函数内部变量的值。所以,如果你把父函数当作对象(object)使用,把闭包当作它的公用方法(Public Method),把内部变量当作它的私有属性(private value),这时一定要小心,不要随便改变父函数内部变量的值。
- javascript笔记-----------js闭包
- JavaScript - js闭包
- prototype.js-JavaScript包开发笔记
- JS闭包笔记
- Js笔记:闭包
- javascript理解js闭包
- JavaScript闭包---笔记摘抄
- JavaScript 闭包学习笔记
- JavaScript笔记4--闭包
- JavaScript闭包学习笔记
- JS闭包学习笔记
- js学习笔记-闭包
- js闭包等笔记
- JavaScript高级程序设计(第2版) 学习笔记:(二)js函数作用域与闭包
- JS学习笔记:JavaScript匿名函数与闭包(closure)
- javascript深入理解js闭包
- javascript深入理解js闭包
- javascript深入理解js闭包
- 为什么以太网最小帧长为64字节
- C++学习总结——类和对象、构造函数和拷贝构造函数
- 程序员为什么要加班
- Skynet协同模型
- 关于c语言链表的操作
- javascript笔记-----------js闭包
- googiehost免费空间申请
- 中国特色程序员的「钱途」
- 补码加、减运算规则【转载】
- 关于JS与OC交互的简单总结
- linux解压缩命令
- C/C++内存划分
- 金妍儿唯美退役表演
- UIViewControl生命周期