javascript中的闭包-创新互联
这篇文章将为大家详细讲解有关javascript中的闭包,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
浦北网站制作公司哪家好,找创新互联公司!从网页设计、网站建设、微信开发、APP开发、自适应网站建设等网站项目制作,到程序开发,运营维护。创新互联公司从2013年创立到现在10年的时间,我们拥有了丰富的建站经验和运维经验,来保证我们的工作的顺利进行。专注于网站建设就选创新互联公司。闭包并不是 JavaScript 特有的,大部分高级语言都具有这一能力。
什么是闭包?
A closure is the combination of a function bundled together (enclosed) with references to its surrounding state (the lexical environment).
这段是 MDN 上对闭包的定义,理解为:一个函数及其周围封闭词法环境中的引用构成闭包。可能这句话还是不好理解,看看示例:
function createAction() { var message = "封闭环境内的变量"; return function() { console.log(message); } } const showMessage = createAction(); showMessage(); // output: 封闭环境内的变量
这个示例是一个典型的闭包,有这么几点需要注意:
showMessage
是createAction
执行后从中返回出来的一个函数。createAction
内部是一个封闭的词法环境,message
作为该封装环境内的变量,在外面是绝不可能直接访问。showMessage
在createAction
外部执行,但执行时却访问到其内部定义的局部变量message
(成功输出)。这是因为showMessage
引用的函数(createAction
内部的匿名函数),在定义时,绑定了其所处词法环境(createAction
内部)中的引用(message
等)。- 绑定了内部语法环境的匿名函数被
return
带到了createAction
封闭环境之外使用,这才能形成闭包。如果是在createAction
内部调用,不算是闭包。
好了,我相信 1, 2, 4 都好理解,但是要理解最重要的第 3 点可能有点困难 —— 困难之处在于,这不是程序员能决定的,而是由语言特性决定的。所以不要认为是“你”创建了闭包,因为闭包是语言特性,你只是利用了这一特性。
如果语言不支持闭包,类似上面的代码,在执行 showMessage
时,就会找不到 message
变量。我特别想去找一个例子,但是很不幸,我所知道的高级语言,只要能在函数/方法内定义函数的,似乎都支持闭包。
把局部定义的函数“带”出去
前面我们提到了可以通过 return
把局部定义的函数带出去,除此之外有没有别的办法?
函数在这里已经成为“货”,和其他货(变量)没有区别。只要有办法把变量带出去,那就有办法把函数带出去。比如,使用一个“容器”对象:
function encase(aCase) { const dog = "狗狗"; const cat = "猫猫"; aCase.show = function () { console.log(dog, cat); }; } const myCase = {}; encase(myCase); myCase.show(); // output: 猫猫 狗狗
是不是受到了启发,有没有联想到什么?
模块和闭包
对了,就是 exports 和 module.exports。在 CJS (CommonJS) 定义的模块中,就可以通过 exports.something
逐一带货,也可以通过 module.exports = ...
打包带货,但不管怎么样,exports
就是带货的那一个,只是它有可能是原来安排的 exports
也可能是被换成了自己人的 exports
。
ESM (ECMAScript Module) 中使用了 import
和 export
语法,也只不过是换种方法带货出去而已,和 return
带货差不多,区别只在于 return
只能带一个(除非打包),export
可以带一堆。
还要补充的是,不管是 CJS 还是 ESM,模块都是一个封装环境,其中定义的东西只要不带出去,外面是访问不到的。这和网页脚本默认的全局环境不同,要注意区别。
如果用代码来表示,大概是定义模块的时候以为是这样:
const var1 = "我是一个顶层变量吧"; function maybeATopFunction() { }
结果在运行环境中,它其实是这样的(注意:仅示意):
// module factory function createModule_18abk2(exports, module) { const var1 = "我是一个顶层变量吧"; function maybeATopFunction() { } } // ... 遥远的生产线上,有这样的示意代码 const module = { exports: {} }; const m18abk2 = createModule_18abk2(module) ?? module; // 想明白 createModule_18abk2 为什么会有一个随机后缀没?
还是那个函数吗?
扯远了,拉回来。思考一个问题:理论上来说,函数是一个静态代码块,那么多次调用外层函数返回出来的闭包函数,是同一个吗?
试试:
function create() { function closure() { } return closure; } const a = create(); const b = create(); console.log(a === b); // false
如果觉得意外,那把 closure()
换种方式定义看会不会好理解一点:
function create() { closure = function() { } return closure; }
如果还不能理解,再看这个:
function create() { const a = function () { }; const b = function () { }; console.log(a === b); // false }
闭包是由一个函数以及其定义时所在封闭环境内的各种资源(引用)构成,拿到的每一个闭包都是独一无二的,因为构成闭包的环境资源不同(不同的局部环境,定义了不同的局部变量,传入了不同的参数等)。
关于javascript中的闭包就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。
另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
当前题目:javascript中的闭包-创新互联
URL链接:http://pwwzsj.com/article/decgjg.html