闭包

最新推荐文章于 2024-10-11 17:39:47 发布

diaoshan7811

最新推荐文章于 2024-10-11 17:39:47 发布

阅读量112

点赞数

文章标签： javascript xhtml 数据结构与算法 ViewUI

原文链接：http://www.cnblogs.com/alicewang999/p/4598302.html

版权

好的解释

function a() { 
var i = 0; 
function b() { alert(++i); } 
return b;
}
var c = a();
c();

这样在执行完var c=a()后，变量c实际上是指向了函数b，再执行c()后就会弹出一个窗口显示i的值(第一次为1)。这段代码其实就创建了一个闭包，为什么？因为函数a外的变量c引用了函数a内的函数b，就是说：

　　当函数a的内部函数b被函数a外的一个变量引用的时候，就创建了一个闭包。

　　让我们说的更透彻一些。所谓“闭包”，就是在构造函数体内定义另外的函数作为目标对象的方法函数，而这个对象的方法函数反过来引用外层函数体中的临时变量。这使得只要目标对象在生存期内始终能保持其方法，就能间接保持原构造函数体当时用到的临时变量值。尽管最开始的构造函数调用已经结束，临时变量的名称也都消失了，但在目标对象的方法内却始终能引用到该变量的值，而且该值只能通这种方法来访问。即使再次调用相同的构造函数，但只会生成新对象和方法，新的临时变量只是对应新的值，和上次那次调用的是各自独立的。

参考

http://segmentfault.com/a/1190000000652891

http://www.cnblogs.com/star-studio/archive/2011/06/22/2086493.html

http://www.cnblogs.com/ljchow/archive/2010/07/06/1768749.html

什么是闭包

闭包是指有权访问另一个函数作用域中的变量的函数，创建闭包的最常见的方式就是在一个函数内创建另一个函数，通过另一个函数访问这个函数的局部变量。

使用闭包有一个优点，也是它的缺点，就是可以把局部变量驻留在内存中，可以避免使用全局变量。全局变量在每个模块都可调用，这势必将是灾难性的。（所以推荐使用私有的，封装的局部变量。）

一般函数执行完毕后，局部活动对象就被销毁，内存中仅仅保存全局作用域。但闭包的情况不同！

闭包是函数的局部变量的集合，只是这些局部变量在函数返回后还会继续存在，还可以继续访问。当在一个函数内定义另外一个函数就会产生闭包。

闭包是指在 JavaScript 中，内部函数总是可以访问其所在的外部函数中声明的参数和变量，即使在其外部函数被返回（寿命终结）了之后。

作为局部变量都可以被函数内的代码访问，这和静态语言是没有差别的。闭包的差别在于局部变量可以在函数执行后仍然被函数外的代码访问。这就意味着函数必须返回一个指向闭包的引用，或者将这个引用赋值给外部变量，才能保证闭包中的局部变量被外部代码访问。

闭包的好处

1.希望一个变量长期驻扎在内存中

2.避免全局变量的污染

3.私有成员的存在

执行环境

每调用一个函数，系统都会为该函数创建一个封闭的局部的运行环境，也就是该函数的执行环境。函数总是在自己的执行环境中执行，如读写局部变量、函数参数、运行内部逻辑。创建执行环境的过程包含了创建函数的作用域，函数也是在自己的作用域下执行的。从另一个角度说，每个函数执行环境都有一个作用域链，子函数的作用域链包括它的父函数的作用域链。关于作用域、作用域链请看下面。

作用域，作用域链，双向链表，活动对象

双向链表描述复杂对象的上下层级关系. 作用域链与活动对象分别是双向链表中的某个节点。

全局环境下的函数A内嵌套了一个函数B，则该函数B的作用域链就是：函数B的作用域—>函数A的作用域—>全局window的作用域。当函数 B调用时，寻找某标识符，会按函数B的作用域—>函数A的作用域—>全局window的作用域去寻找，实际上是按函数B的调用对象—> 函数A的调用对象—>全局对象这个顺序去寻找的。也就是说当函数调用时，函数的作用域链实际上是调用对象链。

Javascript的垃圾回收机制GC

（1）、在javascript中，如果一个对象不再被引用，那么这个对象就会被GC回收；
（2）、如果两个对象互相引用，而不再被第3者所引用，那么这两个互相引用的对象也会被回收。

GC在回收内存时，首先判断当前对象是否被其他对象引用。在确定没有其他对象引用便释放该对象内存区域。

此时cc函数中的 a1,b1都是局部变量,但仍然会弹出文字窗口.说明b1并没有被GC回收.因此javascript中局部变量不是所有时候都被GC回收的.

以函数cc为例变量层级关系为:
window<=>cc<=>a1<=>rr
<=>b1<=>rr
(原文有详细解释)在执行cc()方法时，内存中变量的引用关系如上图,文字解释如下:
window的活动对象包括cc,假设window是顶级对象(因为运行中不会被回收)
cc的活动对象包括a1和b1,其作用域链是window
a1的活动对象包括rr,其作用域链是cc
b1的活动对象包括rr,其作用域链是cc
执行cc()时，cc的执行环境会创建一个活动对象和一个作用域链.其局部变量a1,b1都会挂在cc的活动对象中.当cc()执行完毕后，执行环境会尝试回收活动对象占用的内存.但因局部变量b1 通过return b1,为其增加了一条作用域链:window<=>b1<=>rr,所以GC停止对b1回收.

为什么需要闭包

在动态执行环境中，数据实时地发生变化，为了保持这些非持久型变量的值，我们用闭包这种载体来存储这些动态数据。这就是闭包的作用。也就说遇到需要存储动态变化的数据或将被回收的数据时，我们可以通过外面再包裹一层函数形成闭包来解决。

　　闭包就是嵌套在函数里面的内部函数，并且该内部函数可以访问外部函数中声明的所有局部变量、参数和其他内部函数。当然，闭包会导致很多外部函数的调用对象不能释放，滥用闭包会使得内存泄露，所以在频繁生成闭包的情景下我们要估计下他带来的副作用。

闭包特点

闭包中局部变量是引用，并不是拷贝。

闭包应用场景

一、全局变量的累加

var a = 1;

function abc(){

a++;

alert(a);

}

abc(); //2

abc(); //3

</script>

二、局部变量

function abc(){

var a = 1;

a++;

alert(a);

}

abc(); //2

</script>

那么怎么才能做到变量a既是局部变量又可以累加呢？

三、局部变量的累加

function outer(){

var x=10;

return function(){ //函数嵌套函数

x++;

alert(x);

}

var y = outer(); //外部函数赋给变量y;

y(); //y函数调用一次，结果为11，相当于outer()()；

y(); //y函数调用第二次，结果为12，实现了累加

</script>

函数声明与函数表达式

在js中我们可以通过关键字function来声明一个函数：

function abc(){

alert(123);

}

abc();

</script>

我们也可以通过一个"()"来将这个声明变成一个表达式：

(function (){

alert(123);

})(); //然后通过()直接调用前面的表达式即可，因此函数可以不必写名字；

</script>

四、模块化代码，减少全局变量的污染

var abc = (function(){ //abc为外部匿名函数的返回值

var a = 1;

return function(){

a++;

alert(a);

}

})();

abc(); //2 ；调用一次abc函数，其实是调用里面内部函数的返回值

abc(); //3

</script>

五、私有成员的存在

var aaa = (function(){

var a = 1;

function bbb(){

a++;

alert(a);

}

function ccc(){

a++;

alert(a);

}

return {

b:bbb, //json结构

c:ccc

}

})();

aaa.b(); //2

aaa.c() //3

</script>

六.使用匿名函数实现累加

//使用匿名函数实现局部变量驻留内存中，从而实现累加

function box(){

var age = 100;

return function(){ //匿名函数

age++;

return age;

};

}

var b = box();

alert(b());

alert(b()); //即alert(box()())；

alert(b());

alert(b); // function () {

// age++;

// return age;

// }

b = null； //解除引用，等待垃圾回收

</script>

过度使用闭包会导致性能的下降。函数里放匿名函数，则产生了闭包

七、在循环中直接找到对应元素的索引

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

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>

</ul>

</body>

</html>

八、使用闭包改写上面代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

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>

</ul>

</body>

</html>

九.内存泄露问题

由于IE的js对象和DOM对象使用不同的垃圾收集方法，因此闭包在IE中会导致内存泄露问题，也就是无法销毁驻留在内存中的元素

function closure(){

var oDiv = document.getElementById('oDiv');//oDiv用完之后一直驻留在内存中

oDiv.onclick = function () {

alert('oDiv.innerHTML');//这里用oDiv导致内存泄露

};

}

closure();

//最后应将oDiv解除引用来避免内存泄露

function closure(){

var oDiv = document.getElementById('oDiv');

var test = oDiv.innerHTML;

oDiv.onclick = function () {

alert(test);

};

oDiv = null;

}

十.思考题

如果你能理解下面代码的运行结果，应该就算理解闭包的运行机制了。

var name = "trigkit4";

　　var segmentFault = {

　　　　name : "My SF",

　　　　getNameFunc : function(){

　　　　　　return function(){

　　　　　　　　return this.name;

　　　　　};

　　　　}

};

alert(segmentFault.getNameFunc()()); //弹出trigkit4

</script>

转载于:https://www.cnblogs.com/alicewang999/p/4598302.html

diaoshan7811

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫