搜索
首页web前端js教程详解Javascript中的闭包

这篇文章详解Javascript中的闭包

一、闭包!?

  闭包(closure)是Javascript语言的一个难点,对于初学者来说不容易理解,那我们先来看看闭包的含义。

  百度百科与“官方”解释:所谓“闭包”,指的是一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分。

  维基百科:在编程语言中,闭包(也称为词法闭包或函数闭包)是用于在具有第一类函数的语言中实现词法范围名称绑定的技术。

  然而我们看到这些官方的解释并不能很清楚的了解闭包到底是什么鬼东西,只会一头问号,“你在说什么?”。

  其实闭包简单来讲就是能够读取函数内部定义的局部变量的函数,而在Javascript中只有函数内部的子函数才能读取局部变量,所以我们也可以把闭包理解成定义在函数内部的函数。

二、函数的变量

  想要理解闭包,我们就先要了解在函数中的变量,这些变量有自己的作用域。什么是作用域?呐,通常来说,一段程序代码中所用到的名字并不总是有效/可用的,而限定这个名字的可用性的代码范围就是这个名字的作用域。

  变量的作用域有两种,一个是全局,一个是局部,也就是我们所说的全局变量和局部变量。  


var a=50;function fun1(){
    alert(a);
}
fun();


  上面这段代码中,a在函数外面定义,所以在函数内部调用变量a自然可以读取它的值。这里的a我们就叫它全局变量。


function fun2(){
    var a=50;
}
alert(a);


  而在这段代码中,我们把a定义在函数内部,那么在函数外部调用a的时候,它会报错,告诉你“a  is not defined”,我们找不到a啊?我们定义过a吗?当然定义过啊!只不过它是局部变量而已。

三、如何找到“藏”在函数里的变量

  在我们敲键盘码代码的时候,总会有一些原因,需要我们得到函数内部的局部变量,那么“藏”在函数里的局部变量我们就需要用一种方法把他提取出来。

  那就是在函数内部,我们再定义一个函数。


function fun3(){
    var a=50;
    function fun4(){
        return a;
    }
    return fun4();
}
//console.log(a); 报错
console.log(fun3());


  在上面这段代码里,我们在fun3里面定义了一个变量a,这样我们在函数fun3外调用a同样会报错找不到它,而对于函数fun3内部的函数fun4来说,a是可以调用的,因外a在函数fun4的外部,反过来fun4内如果定义了一个变量那么fun3是不可调用的。

  这里就又涉及到另一个概念,就是链式作用域,也就是我们说的作用域链。作用域链就是相同的变量名会产生作用域链,访问该变量名称的时候,会首先找本层作用域是否含有该变量,如果没有就去父层作用域去找,最终找到全局变量为止,如果全局变量也找不到该变量,那么就会报错。

  那么如果想在函数fun3外面调用变量a,就要在函数fun3内部再定义一个函数fun4,我们让它返回一下他可以调用的变量a,那么函数fun4的结果就是变量a,那么我们再返回函数fun4,那么我们执行函数fun3,得到的结果就是变量a的值。

  简单来讲,就是只要把fun4作为返回值,我们就可以在fun3外部读取它的内部变量了。

四、调用局部变量(使用闭包)要注意什么?

  1.闭包会使函数里面的变量被保存在内存中,对于内存的消耗非常大,所以不能滥用闭包,否则网页的性能会降低。

  2.不要随便改变父函数内部变量的值。


  最后总结一下,闭包就是能够读取其他函数内部变量的函数,能够让我们在父级函数外调用父级函数内的变量,有代码的情况下理解起来其实不难,重要的是在变化莫测的代码中,闭包具体的应用还是需要我们真正的理解它才可以熟练应用。

 

 


以上是详解Javascript中的闭包的详细内容。更多信息请关注PHP中文网其他相关文章!

声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
JavaScript的角色:使网络交互和动态JavaScript的角色:使网络交互和动态Apr 24, 2025 am 12:12 AM

JavaScript是现代网站的核心,因为它增强了网页的交互性和动态性。1)它允许在不刷新页面的情况下改变内容,2)通过DOMAPI操作网页,3)支持复杂的交互效果如动画和拖放,4)优化性能和最佳实践提高用户体验。

C和JavaScript:连接解释C和JavaScript:连接解释Apr 23, 2025 am 12:07 AM

C 和JavaScript通过WebAssembly实现互操作性。1)C 代码编译成WebAssembly模块,引入到JavaScript环境中,增强计算能力。2)在游戏开发中,C 处理物理引擎和图形渲染,JavaScript负责游戏逻辑和用户界面。

从网站到应用程序:JavaScript的不同应用从网站到应用程序:JavaScript的不同应用Apr 22, 2025 am 12:02 AM

JavaScript在网站、移动应用、桌面应用和服务器端编程中均有广泛应用。1)在网站开发中,JavaScript与HTML、CSS一起操作DOM,实现动态效果,并支持如jQuery、React等框架。2)通过ReactNative和Ionic,JavaScript用于开发跨平台移动应用。3)Electron框架使JavaScript能构建桌面应用。4)Node.js让JavaScript在服务器端运行,支持高并发请求。

Python vs. JavaScript:比较用例和应用程序Python vs. JavaScript:比较用例和应用程序Apr 21, 2025 am 12:01 AM

Python更适合数据科学和自动化,JavaScript更适合前端和全栈开发。1.Python在数据科学和机器学习中表现出色,使用NumPy、Pandas等库进行数据处理和建模。2.Python在自动化和脚本编写方面简洁高效。3.JavaScript在前端开发中不可或缺,用于构建动态网页和单页面应用。4.JavaScript通过Node.js在后端开发中发挥作用,支持全栈开发。

C/C在JavaScript口译员和编译器中的作用C/C在JavaScript口译员和编译器中的作用Apr 20, 2025 am 12:01 AM

C和C 在JavaScript引擎中扮演了至关重要的角色,主要用于实现解释器和JIT编译器。 1)C 用于解析JavaScript源码并生成抽象语法树。 2)C 负责生成和执行字节码。 3)C 实现JIT编译器,在运行时优化和编译热点代码,显着提高JavaScript的执行效率。

JavaScript在行动中:现实世界中的示例和项目JavaScript在行动中:现实世界中的示例和项目Apr 19, 2025 am 12:13 AM

JavaScript在现实世界中的应用包括前端和后端开发。1)通过构建TODO列表应用展示前端应用,涉及DOM操作和事件处理。2)通过Node.js和Express构建RESTfulAPI展示后端应用。

JavaScript和Web:核心功能和用例JavaScript和Web:核心功能和用例Apr 18, 2025 am 12:19 AM

JavaScript在Web开发中的主要用途包括客户端交互、表单验证和异步通信。1)通过DOM操作实现动态内容更新和用户交互;2)在用户提交数据前进行客户端验证,提高用户体验;3)通过AJAX技术实现与服务器的无刷新通信。

了解JavaScript引擎:实施详细信息了解JavaScript引擎:实施详细信息Apr 17, 2025 am 12:05 AM

理解JavaScript引擎内部工作原理对开发者重要,因为它能帮助编写更高效的代码并理解性能瓶颈和优化策略。1)引擎的工作流程包括解析、编译和执行三个阶段;2)执行过程中,引擎会进行动态优化,如内联缓存和隐藏类;3)最佳实践包括避免全局变量、优化循环、使用const和let,以及避免过度使用闭包。

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热工具

SublimeText3 英文版

SublimeText3 英文版

推荐:为Win版本,支持代码提示!

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

mPDF

mPDF

mPDF是一个PHP库,可以从UTF-8编码的HTML生成PDF文件。原作者Ian Back编写mPDF以从他的网站上“即时”输出PDF文件,并处理不同的语言。与原始脚本如HTML2FPDF相比,它的速度较慢,并且在使用Unicode字体时生成的文件较大,但支持CSS样式等,并进行了大量增强。支持几乎所有语言,包括RTL(阿拉伯语和希伯来语)和CJK(中日韩)。支持嵌套的块级元素(如P、DIV),

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境