JavaScript闭包的作用是什么,怎么应用
Admin 2022-06-15 群英技术资讯 817 次浏览
这篇文章将为大家详细讲解有关“JavaScript闭包的作用是什么,怎么应用”的知识,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。闭包是纯函数式编程语言的传统特性之一。通过将闭包视为核心语言构件的组成部分,JavaScript语言展示了其与函数式编程语言的紧密联系。由于能够简化复杂的操作,闭包在主流JavaScript库以及高水平产品代码中日益流行起来。
在介绍闭包之前,我们先理解JavaScript的变量作用域。变量的作用域分为两种:全局变量和局部变量。
var n = 999; //全局变量
function f1() {
a = 100; //在这里a也是全局变量
alert(n);
}
console.log(a); //100
在这里,函数内外部可以直接取到变量的值――全局变量
//局部变量
function f2() {
var b = 22;
}
console.log(b); //报错
在这里,函数外部无法直接取到函数内部定义的值――局部变量
讲到这里,当我们想要从外部取到局部变量的值,这时候该怎么办呢?
请接着往下看:
接下来我们看一个例子:
var outer = 'Outer'; // 全局变量
var copy;
function outerFn(){ // 全局函数
var inner = 'Inner'; // 该变量只有函数作用域,无法从外部访问
function innerFn(){ // outerFn()中的innerFn()
// 全局上下文和外围上下文都可以在这里使用,
// 因此可以访问到outer和inner
console.log(outer);
console.log(inner);
}
copy=innerFn; // 保存innerFn()的引用
// 因为copy是在全局上下文中声明的,所以在外部可以使用
}
outerFn();
copy(); // 不能直接调用innerFn(),但是可以通过在全局作用域中声明的变量来调用
来分析一下上面的例子。在innerFn()中可以访问变量outer,因为它处于全局上下文中。
在执行完outerFn()之后,执行了innerFn(),这是通过将该函数的引用复制到一个全局变量
copy中来实现的。在利用变量copy调用函数innerFn()执行时,此刻已经不在outerFn()的作
用域中了。因此下面的代码不是应该失败吗?
console.log(inner);
变量inner的值应该是undefined吧?可是,上面代码片段的输出却是:
“Outer”
“Inner”
这就是JavaScript的链式作用域结构,子对象会一级一级的向上寻找所有父对象的变量。所以父对象的所有变量对子对象都是可见的,反之则不成立。
这样我们就可以获取到函数内部的局部变量了。
上面代码块中的copy()函数就是闭包。在我的理解,闭包就是能够读取到函数内部变量的函数。
而在JavaScript中,可以通过函数内部的子函数获取到局部变量,因此可以把闭包理解为定义在函数内部的函数。
可以把它理解为一个将函数内部和外部连接起来的桥梁。
在我看来,闭包的作用主要体现在两个方面:
这个作用在上个代码块已经表现得很清楚。
总所周知,局部变量只有当使用的时候才会在内存中开辟出暂时的存储空间,在函数运行结束后会自动释放空间。而闭包的出现可以使得局部变量可以像全局变量一样一致存储在内存中。
function c1() {
var z = 9999;
nAdd = function() {
z += 1;
}
function c2() {
console.log(z);
}
return c2;
}
var result = c1();
result(); //9999
nAdd();
result(); //10000
在上述代码中,先执行一次c1(),此时z=9999;再执行一次nAdd(),使z+1;在执行一次c1()输出此时z的值,z=10000。说明z的值一直存储在内存中,并没有在第一次调用c1()后背自动消除。
此时就要注意,闭包的使用会消耗很大的内存,不要滥用闭包。在退出函数之前,将不使用的局部变量全部删除。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:mmqy2019@163.com进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。
猜你喜欢
在javascript中,可以使用toString()方法来将整数转为16进制,该方法可以解析指定数值,并返回指定进制的字符串表示形式,具体转换语法为“指定数字对象.toString(16);”。 本教程操作环境
JS有哪些好用的小技巧呢?下文有实例供大家参考,对大家了解操作过程或相关知识有一定的帮助,而且实用性强,希望这篇文章能帮助大家,下面我们一起来了解看看吧。
本文介绍的是关于React中this指向的内容,对于React中this指向问题下文有详细的介绍及解决方法供大家参考,需要的朋友可以了解看看,对大家学习React中this指向的内容有一定的参考价值。接下来我们就一起了解一下吧。
本文主要介绍了React项目如何使用Element的方法步骤,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
在vue开发中,难免遇到各种表单校验,下面这篇文章主要给大家介绍了关于vue表单验证rules及validator验证器使用的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
成为群英会员,开启智能安全云计算之旅
立即注册关注或联系群英网络
7x24小时售前:400-678-4567
7x24小时售后:0668-2555666
24小时QQ客服
群英微信公众号
CNNIC域名投诉举报处理平台
服务电话:010-58813000
服务邮箱:service@cnnic.cn
投诉与建议:0668-2555555
Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所有
增值电信经营许可证 : B1.B2-20140078 粤ICP备09006778号 域名注册商资质 粤 D3.1-20240008