详解JavaScript的闭包
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了详解JavaScript的闭包，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含4985字，纯文字阅读大概需要8分钟。
内容图文
什么是闭包：
有权访问另一个函数作用域的变量的函数
简单的说，Javascript允许使用内部函数---即函数定义和函数表达式位于另一个函数的函数体内。而且，这些内部函数可以访问它们所在的外部函数中声明的所有局部变量、参数和声明的其他内部函数。当其中一个这样的内部函数在包含它们的外部函数之外被调用时，就会形成闭包。
- 闭包是嵌套的内部函数
- 闭包存在于嵌套的内部函数中
闭包的主要作用：
1.可以读取函数内部的变量
2.让这些变量的值始终保持在内存中，变量或参数不会被垃圾回收机制回收GC
产生闭包的条件：
- 函数嵌套
- 内部函数引用了外部函数的数据（变量/函数）
闭包的优点：
- 变量长期驻扎在内存中
- 避免全局变量的污染
闭包的缺点：
- 常驻内存 会增大内存的使用量
- 使用不当会造成内存泄露
- 闭包会在父函数外部，改变父函数内部变量的值
闭包使用详解：
当想要的得到f1函数的局部变量时，正常情况下，这是办不到的，只有通过变通方法才能实现。那就是在函数的内部，再定义一个函数
function f1() {
var n = 999;
function f2() {
console.log(n); // 999
}
}
上面代码中，函数f2就在函数f1内部，这时f1内部的所有局部变量，对f2都是可见的。但是反过来就不行，f2内部的局部变量，对f1就是不可见的。这就是 JavaScript 语言特有的”链式作用域”结构（chain scope），子对象会一级一级地向上寻找所有父对象的变量。所以，父对象的所有变量，对子对象都是可见的，反之则不成立。既然f2可以读取f1的局部变量，那么只要把f2作为返回值，我们不就可以在f1外部读取它的内部变量了吗！
function f1() {
var n = 999;
function f2() {
console.log(n);
}
return f2;
}
var result = f1();
result(); // 999
上面代码中，函数f1的返回值就是函数f2，由于f2可以读取f1的内部变量，所以就可以在外部获得f1的内部变量了。闭包就是函数f2，即能够读取其他函数内部变量的函数。由于在 JavaScript 语言中，只有函数内部的子函数才能读取内部变量，因此可以把闭包简单理解成“定义在一个函数内部的函数”。在本质上，闭包就是将函数内部和函数外部连接起来的一座桥梁。
闭包的最大用处有两个，一个是可以读取函数内部的变量，另一个就是让这些变量始终保持在内存中
请看下面的例子，闭包使得内部变量记住上一次调用时的运算结果。
function zxxs(zxx) {
return function () {
return zxx++;
};
}
var inc = zxxs(5);
inc() // 5
inc() // 6
inc() // 7
上面代码中，zxx是函数zxxs的内部变量。通过闭包，zxx的状态被保留了，每一次调用都是在上一次调用的基础上进行计算。从中可以看到，闭包inc使得函数zxxs的内部环境，一直存在。所以，闭包可以看作是函数内部作用域的一个接口。为什么会这样呢？原因就在于inc始终在内存中，而inc的存在依赖于zxxs，因此也始终在内存中，不会在调用结束后，被垃圾回收机制回收。
闭包的另一个用处，是封装对象的私有属性和私有方法：
function Person (name) {
var age
function setAge (n) {
age = n
}
function getAge () {
return age
}
return {
name: name,
getAge: getAge,
setAge: setAge
}
}
var p1 = Person('zxx')
p1.setAge(18)
p1.getAge() // 18
上面代码中，函数Person的内部变量age，通过闭包getAge和setAge，变成了返回对象p1的私有变量。
注意，外层函数每次运行，都会生成一个新的闭包，而这个闭包又会保留外层函数的内部变量，所以内存消耗很大。因此不能滥用闭包，否则会造成网页的性能问题。
函数执行完后，函数内的局部变量没有释放，占用内存时间会变长，容易造成内存泄漏（内存被占用，但是没有用上）
function fn1 () {
var arr = new Array[1000]
function fn2 () {
console.log(arr.length)
}
return fn2
}
var f = fn1() // 已经产生闭包
f()
f = null // 让内部函数成为垃圾对象-->回收闭包
习题1
var name = "The Window";
var object = {
name : "My Object",
getNameFunc : function(){
return function(){
return this.name;
};
}
};
alert(object.getNameFunc()()); //The Window
object.getNameFunc() 执行完变成一个函数 this指向window
关于this的指向后续会更新新的文章详解
var name = "The Window";
var object = {
name : "My Object",
getNameFunc : function(){
var that = this
return function(){
return that.name;
};
}
};
alert(object.getNameFunc()()); // My Object
习题2
function outerFun(){
var a=0;
function innerFun() {
a++;
alert(a);
}
return innerFun;
}
var obj = outerFun();
obj(); // 结果为1
obj(); // 结果为2
var obj2 = outerFun();
obj2(); // 结果为1
obj2(); // 结果为2
一道经典的闭包面试题
function fun(n,o){
console.log(o);
return {
fun:function(m){
return fun(m,n);
}
}
}
var a = fun(0); // undefined
a.fun(1); // 0
a.fun(2); // 0
a.fun(3); // 0
var b=fun(0).fun(1).fun(2).fun(3); //undefined,0,1,2
var c=fun(0).fun(1); //undefined,0
c.fun(2); // 1
c.fun(3); // 1
详解：
转换为等价代码
return返回的对象的fun属性对应一个新建的函数对象，
这个函数对象将形成一个闭包作用域，
使其能够访问外层函数的变量n及外层函数fun,
为了不将fun函数和fun属性搞混，我们将上述代码修改如下:
function _fun_(n,o){
console.log(o);
return {
fun:function(m){
return _fun_(m,n);
}
}
}
var a = fun(0); // undefined 产生了闭包 n = 0
a.fun(1); // 0 产生了闭包，但是由于没有绑定变量，闭包马上就消失了, 始终用的是a里面的闭包
a.fun(2); // 0 产生了闭包，但是由于没有绑定变量，闭包马上就消失了, 始终用的是a里面的闭包
a.fun(3); // 0 产生了闭包，但是由于没有绑定变量，闭包马上就消失了, 始终用的是a里面的闭包
var b = fun(0).fun(1).fun(2).fun(3); // undefined,0,1,2 会不断产生新的闭包
等价代码
var b1 = b.fun(1);
var b2 = b1.fun(2);
var b3 = b2.fun(3);
var c = fun(0).fun(1); // undefined,0,
c.fun(2); // 1 当前c的闭包是 1
c.fun(3); // 1 当前c的闭包是 1
虽然c.fun(2)和c.fun(3)都产生了新的闭包，但是由于没有赋给新的变量，闭包接着就消失了
内容总结
以上是互联网集市为您收集整理的详解JavaScript的闭包全部内容，希望文章能够帮你解决详解JavaScript的闭包所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。