前端开发闭包理解,JavaScript-闭包

时间: 2017-10-26阅读: 1204标签: 闭包

官方对闭包的解释是:一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分。
  
闭包(Closure)概念 

在A函数中定义了一个B函数,在B函数中使用了A函数中的变量,就会产生闭包,其中B就是一个闭包。 
也可以说,定义在一个函数内部的这个函数就是闭包。 
理解闭包需要的几个相关概念 


1.变量的作用域 


在ES5中变量有两个作用域: 
全局作用域(global) 
局部作用域(local) 

在ES6中补充了一个新的作用域-块级作用域(block) 

当定义变量的地方没有被 function 包括则是全局变量,否则就是局部变量。 

在函数的内部会优先使用局部变量(即使全局变量和局部变量同名亦是如此),在函数调用的过程,会给局部变量创建一个函数栈区(区别于全局栈),来保存这些局部变量。正常情况下在函数调用结束后,函数栈会被垃圾回收机制处理。 


2.执行上下文 

代码的运行会产生执行上下文,如果代码不运行就没有。 
全局代码产生全局上下文 
函数代码产生函数上下文 
函数嵌套调用形成执行上下文栈 
执行上下文中保存了执行代码所需要的各类的数据 
执行上下文是一个对象,在代码运行过程中产生,代码运行完成后就消失. 
执行上下文的组成 
自己的执行上下文 
父级函数的执行上下文 


全局上下文 
一旦<script></script>标签中代码运行起来,就会产生一个执行上下文,这个执行上下文就是全局执行上下文.全局上下文只有一个 全局执行环境是window对象,所有变量和函数都作为window对象的属性和方法创建的 所有的代码都在全局执行上下文中执行 

函数执行上下文 
每次调用函数都会产生一个执行上下文,函数调用完成后,会把执行上下文释放掉。 按照函数的调用顺序,这些上下文以栈的形式存储(先进后出).栈底是全局上下文。 

3.词法作用域-静态作用域 


js代码的书写顺序,就决定了变量的作用域。换言之,在函数内部去访问一个变量,应该去定义这个函数(写这个函数的位置)的相关作用域中去找,而不是调用这个函数的那个作用域中去找。 

举个栗子就比较好懂些,如下图 


4.函数的嵌套定义 


在JS中,在函数体中可以再次定义另一个函数;并且可以多层函数嵌套使用。 


5.作用域链 


在JS中有两条链,分别是作用域链和原型链,这里要着重说到作用域链。 
在函数的内部,要确定一个变量的值,会从当前的作用域出发,沿着作用域链向上找,如果找到全局作用域中还是没有找到,那么就会报引用类型错误。 

再次理解闭包 


从闭包的定义可以抓住两个关键点: 函数嵌套定义 、引用变量 

通过前面的几个相关知识点,可以发现在JS中,函数内部可以通过作用域链机制轻松得到父级函数内的变量乃至全局变量,而反过来则是行不通的,即函数外部是无法读取函数内局部变量的。 那么如果有的场景必须要得到函数内部的局部变量时,需要变通方法那么就产生了闭包。 可以在本质上去理解闭包,闭包就是将函数内部和函数外部连接起来的一座桥梁,可以使局部变量被外部函数访问到,也就是说变相的延长了函数中局部变量的寿命。 上段代码 

function f(){ 
var a = 1; 
function f1(){ 
console.log(a); 
} 
return f1; 
} 
var r = f(); 
r();

这段代码执行后,结果输出为1。也就是说当函数f调用结束后,它的局部变量a并没有被回收掉。可以说这就是闭包的本质,它使得函数调用结束后,被闭包引用的变量没有被回收机制干掉而顺利存活了下来,还可以被外部访问和使用。 


闭包的作用 


根据前面的理解,可以归纳闭包的作用有: 
读取函数内部的变量 
延长这些变量的生命周期 

使用闭包的栗子来一个 - 节流函数 ,可以让一个函数变得"懒",调用一次之后需要隔一段时间才能再次调用,即降低函数的可被调用的频率。话不多说上代码 



上面的代码中,f1就是被节流函数变懒了的test。 代码运行中,f函数中t1这个局部变量被f函数内部定义的t函数引用后,当f函数调用执行完毕后,t1这个变量并没有随之被回收,而是一直可以被访问。这就是闭包的体现。 


闭包的弊端 


闭包会使函数内的变量一直被保存在内存中, 这是极耗内存的方式。不可以滥用闭包,会对网页的性能有很大的影响。在IE中可能会导致内存泄露。 
闭包在函数外部可以访问并改变函数内部变量的值,这是好事也是坏事。 如果把父级函数作为对象使用,而把闭包作为它的公用方法,而又把其内部变量作为它的私有属性,这时就一定要注意了,不要轻易改变父级函数内部变量的值。 


站长推荐

1.阿里云: 本站目前使用的是阿里云主机,安全/可靠/稳定。点击领取2000元代金券、了解最新阿里云产品的各种优惠活动点击进入

2.腾讯云: 提供云服务器、云数据库、云存储、视频与CDN、域名等服务。腾讯云各类产品的最新活动,优惠券领取点击进入

3.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/16

闭包原理及题型

函数被调用之后,会创建一个执行环境及作用域链.函数被执行完之后就会被释放掉,闭包函数执行之后会保留当前活动变量在内部函数作用域链中,所以内部函数可以访问外部变量.

闭包实现:异步变同步

在不使用ES6的前提下如何将一个多个异步请求按顺序执行呢?要求使用JavaScript代码按顺序依次请求这5张图片,一次只能请求一张,可以结合 闭包+回调+递归 组合来解决

Js中闭包的概念、原理、作用及应用

闭包:有权访问另一个函数作用域中的变量的函数,一般情况就是在一个函数中包含另一个函数。从官方定义我们知道闭包是一个函数,只不过这个函数有[超能力],可以访问到另一个函数的作用域。为什么说这个叫做[超能力]呢?

Js闭包有什么用?

相信很少有人能直接看懂这句话,因为他描述的太学术。我想用如何在Javascript中创建一个闭包来告诉你什么是闭包,因为跳过闭包的创建过程直接理解闭包的定义是非常困难的。

JS 原生闭包模块化开发总结

闭包模块的第一种写法;闭包模式的第二种写法;闭包模式的自动实例化对象的写法;闭包类的方法注入模式写法;

Js闭包的实现原理和作用

闭包的概念:指有权访问另一个函数作用域中的变量的函数,一般情况就是在一个函数中包含另一个函数。闭包的作用:访问函数内部变量、保持函数在环境中一直存在,不会被垃圾回收机制处理

Js中的闭包与高级函数

在JavaScript中,函数是一等公民。JavaScript是一门面向对象的编程语言,但是同时也有很多函数式编程的特性,如Lambda表达式,闭包,高阶函数等,函数式编程时一种编程范式。

使用 JS 及 React Hook 时需要注意过时闭包的坑

闭包是一个函数,它从定义变量的地方(或其词法范围)捕获变量。闭包是每个 JS 开发人员都应该知道的一个重要概念。当闭包捕获过时的变量时,就会出现过时闭包的问题

如何才能通俗易懂的解释js里面的‘闭包’?

即变量都存在在指定的作用域中,如果在当前作用中找不到想要的变量,则通过作用域链向在父作用域中继续查找,直到找到第一个同名的变量为止(或找不到,抛出 ReferenceError 错误)。这是 js 中作用域链的概念

搞懂JS闭包

闭包(Closure)是JS比较难懂的一个东西,或者说别人说的难以理解, 本文将以简洁的语言+面试题来深入浅出地介绍一下。在将闭包之前,需要先讲一下作用域。JS中有全局作用域和局部作用域两种。

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!

文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全运营推广