JavaScript闭包的作用是什么,怎么应用
Admin 2022-06-15 群英技术资讯 743 次浏览
这篇文章将为大家详细讲解有关“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进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。
猜你喜欢
这篇文章给大家分享的是有关vue 动态创建组件的内容,下文给大家介绍了vue 动态创建组件并挂载到body的两种方式,有具体代码供大家参考,需要的朋友可以了解一下。
在做web开发时,我们会经常遇到表单验证的需求。对新手来说,掌握表单验证对于理解字符串处理以及正则表达式都有很大的帮助。这篇文章就主要介绍,原生介绍实现表单验证功能。
这篇文章给大家分享的是vue实现卡片翻转的效果的内容,也就是点击一张卡片或者牌面,能实现背面的翻转,小编觉得挺有趣的,因此分享给大家做个参考,接下来一起跟随小编看看吧。
vue+elementUI配置表格的列显示与隐藏,供大家参考,具体内容如下描述:表格的列过多时,可以根据需要控制列的显示与隐藏,目前是采用Vue+elementUI(适配Vue3的Element Plus)实现的,具体效果与代码如下:效果图:完整代码:template div id=app el-table :
这篇文章我们来了解用jQuery如何获取ul下li的个数,下文示例对新手学习jQuery有一定的参考价值,有这方面学习需要的朋友接下来就跟随小编来一起学习一下吧!
成为群英会员,开启智能安全云计算之旅
立即注册Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所有
增值电信经营许可证 : B1.B2-20140078 粤ICP备09006778号 域名注册商资质 粤 D3.1-20240008