闭包是javascript语言的一个难点,也是它的特色,很多高级应用都要依靠闭包来实现。个人的理解是:函数中嵌套函数。
闭包的定义及其优缺点
闭包是指有权访问另一个函数作用域中的变量的函数。创建闭包的常见方式,就是在一个函数内部创建另一个函数。
闭包的缺点是常驻内存,会增大内存的使用量,使用不当会造成内存泄漏。
应用闭包主要是为了:设计私有变量和方法。
一般来讲,函数执行完毕后,局部活动对象就会被销毁,内存中仅保存全局作用域,但是闭包的情况有所不同!
理解闭包的前提先理解另外两个内容:作用域链、垃圾回收
作用域链:当代码在执行过程中,会创建变量对象的一个作用域链。作用域链的用途,是保证对执行环境有权访问的所有变量和函数的有序访问。
请看下面的一段代码:
//全局环境中有一个变量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者引用,那么这两个互相引用的对象也会被回收。
嵌套函数的闭包
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对象
在闭包中使用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的子作用域,可以理解为闭包。)
本篇文章是自己学习过程中的总结,如有错误欢迎指正。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。