让你一句话理解闭包(简单易懂)_javascript技巧

接触javascript很久了,每次理解闭包都似是而非,最近在找Web前端的工作,所以需要把基础夯实一下。

本文是参照了joy_lee的博客 闭包 在她这篇博客的基础上以批注的形式力争把我的理解阐述出来,如果有不当之处,欢迎批评指正。

《高级程序设计》上,这样说:当在函数内部定义了其他函数时候,就创建了闭包。闭包有权访问包含函数内部的所有变量。

(这句话怎么理解呢?照这句话理解的话,闭包就是一个嵌套函数嘛!嵌套函数对包含它的函数的变量当然可以访问,这是没有问题的。)

一般来说,内部函数是能够访问到上一级乃至全局的的变量的,那么就有人这样理解:通过闭包,可以实现外部访问函数局部内的变量。

(如果我们把作用域简单的分个级的话,假设全局作用域作为第一级,其中定义的函数体内部作用域作为第二级,在第二级作用域内嵌套定义的函数体内部作用域作为第三级,....等等,传统意义上,第一级不能访问第二级的变量(这种变量叫做局部变量),第二级不能访问第三级,...,而反过来是可以的,这就是作用域链。本级作用域内找不到再到上一级找,直至第一级全局。而闭包这种机制可以在第一级作用域中通过第三级作用域引用到第二级作用域中的变量,而方法就是在第二级作用域向第一级作用域返回拥有第三级作用域的函数引用。 这个引用才是关键,因为这个引用的存在,相关的第三作用域与第二作用域都成了这个引用运行的上下文,迫使垃圾回收机制GC不能回收这条链上所占用的资源。而如果没有这个引用,则跟一般函数一样,函数运行完资源就会被回收。而我的疑惑也在于此,闭包单指函数中的嵌套函数还是指被第一级引用了的嵌套函数?还是都是?还是说闭包并不是嵌套函数而是嵌套函数被第一级作用域引用时所形成的这种机制?)

function a(){ 

   var i=0; 

  function b(){ 

     alert(++i); 

    } 

   return b; 

 } 

 var c = a(); 

 c();

即,闭包的作用就是在a执行完并返回后,闭包使得Javascript的垃圾回收机制GC不会收回a所占用的资源,因为a的内部函数b的执行需要依赖a中的变量。

由于闭包的存在使得函数a返回后,a中的i始终存在,这样每次执行c(),i都是自加1后alert出i的值。

那么,如果a不返回函数b,情况就完全不同了。因为a执行完后,b没有被返回给a的外界,只是被a所引用,而此时a也只会被b引用,因此函数a和b互相引用但又不被外界打扰(被外界引用),函数a和b就会被GC回收。

实际上是就是闭包延长变量的生命周期。通常函数的作用域即变量会在函数执行结束后被销毁,但当函数返回一个闭包,只要闭包不被释放,整条作用域链都会占用内存。(闭包延长变量的生命周期,这是指被第一级引用的情况。但如果没有这个引用,闭包还能称其为闭包吗?)

说道作用域链:即 函数自己的作用域、上一层的函数的作用域....和全局作用域。访问一个变量时,自己的没有,就一层层往上找,直至全局,若还没有,就报错。

(很想吐槽一句,闭包的作用域链是弯的。)

PS: 有网友推荐了另一篇文章javascript闭包概念简单解析,是不是权威暂且不提,总算有一个明确的概念:

说了这么多,闭包到底是什么,下面做一下总结:

闭包是一个概念,它描述了函数执行完毕内存释放后,依然内存驻留的一个现象,只要把握这个核心概念,闭包就不难理解了。

以上这篇让你一句话理解闭包(简单易懂)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索js闭包的理解
javascript 闭包理解、javascript 闭包、javascript闭包详解、javascript闭包面试题、javascript闭包的作用,以便于您获取更多的相关知识。

时间: 2024-10-31 18:32:02

让你一句话理解闭包(简单易懂)_javascript技巧的相关文章

JavaScript 2048 游戏实例代码(简单易懂)_javascript技巧

废话不多说了,直接给大家贴代码了,觉得很满意直接拿去. <!DOCTYPE html PUBLIC "-//WC//DTD XHTML . Transitional//EN" "http://www.w.org/TR/xhtml/DTD/xhtml-transitional.dtd"> <html xmlns="http://www.w.org//xhtml"> <head> <meta http-equ

javascript实现的闭包简单实例_javascript技巧

本文实例讲述了javascript实现的闭包.分享给大家供大家参考.具体如下: var name = "The Window"; var obj = { name: "My Object", getNameFunc: function() { return function() { return this.name; }; } }; console.log( obj.getNameFunc()() ); var name = "The Window&quo

深入理解Javascript闭包 新手版_javascript技巧

一.什么是闭包? "官方"的解释是:所谓"闭包",指的是一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分. 相信很少有人能直接看懂这句话,因为他描述的太学术.我想用如何在Javascript中创建一个闭包来告诉你什么是闭包,因为跳过闭包的创建过程直接理解闭包的定义是非常困难的.看下面这段代码: 复制代码 代码如下: function a(){ var i=0; function b(){ alert(++i); }

JavaScript中的闭包原理分析_javascript技巧

我们来看一个定义: Closure 所谓"闭包",指的是一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分. 这说明了,JavaScript中的闭包是包含了上下文的函数,也就是说,这个函数的作用基础,是它所处的环境,这是不能超越的,跟线性代数是不是有一点似曾相识的感觉呢? 换个角度看,闭包的作用是为了实现OO.JavaScript中,没有像C++那样的public.private.protect属性标识, 建立起类比较困难."类

谈谈我对JavaScript原型和闭包系列理解(随手笔记8)_javascript技巧

在上篇文章给大家介绍了<谈谈我对JavaScript原型和闭包系列理解(随手笔记6)>, 谈谈我对JavaScript原型和闭包系列理解(随手笔记9)     可以点击了解详情. 执行上下文栈 执行全局代码时,会产生一个执行上下文环境,每次调用函数都又会产生执行上下文环境.当函数调用完成时,这个上下文环境以及其中的数据都会被消除,再重新回到全局上下文环境.处于活动状态的执行上下文环境只有一个. 压栈出栈过程----执行上下文栈: var a = 10, //1. 进入全局上下文环境 fn, b

谈谈我对JavaScript原型和闭包系列理解(随手笔记9)_javascript技巧

相关阅读:谈谈我对JavaScript原型和闭包系列理解(随手笔记6)   谈谈我对JavaScript原型和闭包系列理解(随手笔记8) 作用域 引用<JavaScript语言精粹和编程实践>上对作用域的定义: 变量作用域又叫变量的可见性.变量作用域完成对信息的隐蔽,也就是处理"割据"问题. js中是没有块级作用域的(ES6中有一个let,可以在{},if,for里面声明,同时作用域限定在块级.let声明的变量不存在变量提升!这里不谈论这个,因为我也是偶然看到.). 我们在

简单理解js的冒泡排序_javascript技巧

关于排序,其实不管是哪种语言,都有它内置的排序函数,我们要用的时候调用就行了,既然如此,我们为什么还要讲这个东西呢?我想,其实,我们讲排序更多是在于排序中包含的思想算法,因为,算法对于计算机来说相当重要,一个好的算法能够让计算机的效率达到事半功倍的效果,所以,算法是计算机语言中一门相当热门的课程,它所代表的计算机思维也是很值得我们去深入研究的. 我也知道,关于我标题中的排序,博客园中的很多作者都写过详细解释的文章,可能,笔者本人认为自己的理解更能体现出这个排序的工作原理吧,所以,笔者也就大惭不愧

JavaScript 闭包在封装函数时的简单分析_javascript技巧

wbkt2t最近发现了一个新名词:闭包.(自己落后了,要好好学习才行),baidu.google看了一下原理和实例,也明白了闭包的强大.JQuery也把闭包发扬光大了,网上一些个人开发的框架都是用了闭包了功能.知道了闭包的原理和使用发放,于是自己小小试验了一把,带着疑惑:使用闭包有什么好处?不使用会出现什么后果?写下了以下代码,也希望大家给小弟一些解答 使用闭包: 实例1 复制代码 代码如下: var $Darren; (function(){ var Obj={version:"1.0&quo

简单理解Vue条件渲染_javascript技巧

一.v-if显示单个元素 注意else只能跟在v-if或者v-show后面 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Vue条件渲染</title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-sca