闭包是javascript语言的一个难点,也是它的特点,不少高级应用都要依靠闭包来实现。我的的理解是:函数中嵌套函数。javascript
闭包是指有权访问另外一个函数做用域中的变量的函数。建立闭包的常见方式,就是在一个函数内部建立另外一个函数。html
闭包的缺点是常驻内存,会增大内存的使用量,使用不当会形成内存泄漏。java
应用闭包主要是为了:设计私有变量和方法。node
通常来说,函数执行完毕后,局部活动对象就会被销毁,内存中仅保存全局做用域,可是闭包的状况有所不一样!浏览器
做用域链:当代码在执行过程当中,会建立变量对象的一个做用域链。做用域链的用途,是保证对执行环境有权访问的全部变量和函数的有序访问。
请看下面的一段代码:闭包
//全局环境中有一个变量color和一个函数changeColor() var color = "blue"; //changeColor()的局部环境中有一个anotherColor变量和swapColors()函数 function changeColor() { var anotherColor = "red"; //swapColors()环境中只有一个tempColor function swapColors() { var tempColor = anotherColor; anotherColor = color; color = tempColor; } swapColors(); } changeColor();
全局环境只能访问到变量color
changeColor()局部环境也能够访问color
swapColors()能够访问其余两个环境的全部变量,可是那两个变量都无权访问tempColor模块化
总结:内部环境能够经过做用域链访问全部的外部环境,但外部环境不能访问内部环境中的任何变量和函数。每一个环境均可以向上搜索做用域链,但任何环境都不能向下搜索做用域链而进入另外一个执行环境。函数
垃圾回收原理学习
(1)javascript中若是一个对象再也不被引用,那么这个对象就会被回收。
(2)若是两个对象互相引用,而再也不被第3者引用,那么这两个互相引用的对象也会被回收。this
嵌套函数的闭包
var f = function () { var a = 9999; function f1() { alert(a); } f1(); }; f();
函数嵌套时候,在f执行完成以后,变量a还要被f1这个内部嵌套的函数继续使用,所以a不会被释放。js解析器发现函数中嵌套了函数时,就会把函数中的变量和子函数的变量一块儿保存,构成了一个“闭包”。这些变量不会被内存回收器回收,只有当内部嵌套的函数不在执行后,才会被回收。
闭包有三个特性:
1.函数嵌套函数
2.函数内部能够引用外部的参数和变量
3.参数和变量不会被垃圾回收机制回收
使用闭包的好处:
1.但愿一个变量长期驻扎内存
2.避免全局变量污染
3.私有成员变量的存在
属性
var person = function () { var name = "kimi"; this.getName = function () { return name; }; }; var p = new person(); alert(p.getName());
name属性经过getName方法获取到。
在循环中直接找到对应元素的索引
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" charset="UTF-8"> window.onload = function () { var aLi = document.getElementsByTagName('li'); for (var i = 0; i < aLi.length; i++) { aLi[i].onclick = function () { //当点击时for循环已经结束 alert(i); }; } } </script> </head> <body> <ul> <li>a</li> <li>b</li> <li>c</li> <li>d</li> </ul> </body> </html>
执行以上代码发现点击任何一个返回的都是4,这是由于赋值的时候,传的i是对内存地址的引用,循环结束,i指向的就是4.
使用闭包改写上面的代码
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>闭包</title> <script type="text/javascript" charset="UTF-8"> window.onload = function () { var aLi = document.getElementsByTagName('li'); for (var i = 0; i < aLi.length; i++) { (function (i) { aLi[i].onclick = function () { alert(i); }; })(i); } }; </script> </head> <body> <ul> <li>a</li> <li>b</li> <li>c</li> <li>d</li> </ul> </body> </html>
每一次循环的时候,都把当前的i经过当即执行函数赋值。
全局变量的累加
<script type="text/javascript" charset="UTF-8"> var i = 1; function text() { i++; alert(i); } text();//2 text();//3 </script>
局部变量的累加
<script type="text/javascript" charset="UTF-8"> function text() { var i = 1; i++; alert(i); } text();//2 text();//2 </script>
上述代码没有实现累加,改写代码以下:
<script type="text/javascript" charset="UTF-8"> function text() { var i = 1; return function () {//函数嵌套 i++; alert(i); } } var a = text();//外部函数赋给a a();//2 a();//3 </script>
<script type="text/javascript" charset="UTF-8"> var g = (function () { var i = 1; return function () { i++; alert(i); } })(); g();//2 调用一次g函数,其实调用的是里面内部函数的返回值 g();//3 </script>
在闭包中使用this对象可能致使一些问题
<script type="text/javascript" charset="UTF-8"> var name = "The Window"; var object = { name: "My Object", getNameFunc: function () { return function () { return this.name; }; } }; alert(object.getNameFunc()());//The Window </script>
代码先建立了一个全局变量name,又建立了一个包含name属性的对象。这个对象还包含一个getNameFunc()方法,返回一个匿名函数,匿名函数又返回一个this.name。调用object.getNameFunc()()返回一个字符串。内部函数搜索的时候只搜索到活动对象。
<script type="text/javascript" charset="UTF-8"> var name = "The Window"; var object = { name: "My Object", getNameFunc: function () { var that = this; return function () { return that.name; }; } }; alert(object.getNameFunc()());//My Object </script>
在定义匿名函数前,把this对象赋值给that变量,闭包也能够访问这个变量。即便函数返回,仍然引用着object
学习了闭包也不知道到底哪里用到,到底有什么用。回答:(其实你写的每个js函数都是闭包,一个js函数的顶层做用域就是window对象,js的执行环境自己就是一个scope(浏览器的window/node的global),咱们一般称之为全局做用域。每一个函数,不论多深,均可以认为是全局scope的子做用域,能够理解为闭包。)
本篇文章是本身学习过程当中的总结,若有错误欢迎指正。