JavaScript-闭包

闭包(Closure)概念

在A函数中定义了一个B函数,在B函数中使用了A函数中的变量,就会产生闭包,其中B就是一个闭包。
也可以说,定义在一个函数内部的这个函数就是闭包。

理解闭包需要的几个相关概念

1.变量的作用域

在ES5中变量有两个作用域:

  1. 全局作用域(global)
  2. 局部作用域(local)

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

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

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

2.执行上下文

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

执行上下文的组成

  1. 自己的执行上下文
  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并没有被回收掉。可以说这就是闭包的本质,它使得函数调用结束后,被闭包引用的变量没有被回收机制干掉而顺利存活了下来,还可以被外部访问和使用。

闭包的作用

根据前面的理解,可以归纳闭包的作用有:

  1. 读取函数内部的变量
  2. 延长这些变量的生命周期

使用闭包的栗子来一个 - 节流函数

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

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

闭包的弊端

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

以上就是对JavaScript中闭包的复习👀

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,053评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,527评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,779评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,685评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,699评论 5 366
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,609评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,989评论 3 396
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,654评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,890评论 1 298
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,634评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,716评论 1 330
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,394评论 4 319
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,976评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,950评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,191评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,849评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,458评论 2 342

推荐阅读更多精彩内容

  • 闭包(closure)是Javascript语言的一个难点,也是它的特色,很多高级应用都要依靠闭包实现。 一、变量...
    zouCode阅读 1,270评论 0 13
  • javascript之闭包 闭包的概念     闭包(closure)是 JavaScript 的一种语法特性。 ...
    呦_小宋啊阅读 207评论 0 2
  • 目录 1.执行环境与作用域链 2. 立即执行函数 3. 闭包知识点 3.1 什么是闭包 3.2 使用闭包的意义与注...
    犯迷糊的小羊阅读 629评论 0 11
  • 前言 这篇文章使用有效的javascript代码向程序员们解释了闭包,大牛和功能型程序员请自行忽略。 基础篇 闭包...
    kiaizi阅读 354评论 0 7
  • 前言 总括 :这篇文章使用有效的javascript代码向程序员们解释了闭包,大牛和功能型程序员请自行忽略。 译者...
    KX九五阅读 275评论 0 1