Js闭包的原理(图解)

闭包的概念

什么是闭包(Closure)?
网上流传各种说法,在Javascript语言中,我的理解是:保存着其他函数内部变量的函数,就是闭包。
挺绕的,但不虚,让我们一步步揭开它的神秘面纱!

前置概念

要理解闭包,我们得先搞清楚以下几个概念:

  1. 作用域(Scope)
  2. 执行环境(Execution Context)
  3. 活动对象 (Activation object)
  4. 作用域链 (Scope Chain)

作用域

JS的作用域分两种:全局作用域、局部作用域(也可称为函数作用域)

1.全局作用域:在最外层定义的变量拥有全局作用域,对于所有内部函数,都是可以访问的。例如:
var a = 'global';
function func() {
    console.log(a);
}
func(); // 结果为:global
2.局部/函数作用域:在函数内部定义的变量,一般只能在函数内部被访问。例如:
var a = 'global';
function func() {
    var b = 'local';
}
func();
console.log(b); // 报错,innerVar is not defined;

总的来说,Js作用域的一般机制就是:内部可访问外部的变量,外部无法访问内部的变量。


执行环境 & 作用域链 & 活动对象

那么这套作用域机制是如何实现的呢?答案是:通过作用域链

在Js中,每当一个函数被执行,都会产生三个对象:

  1. 当前执行环境(Execution Context):这个对象会被压入“执行环境栈”;
  2. 关联的活动对象(Activation Object):该对象存储了函数的this、传递的参数以及函数内定义的所有变量和方法;
  3. 关联的作用域链(Scope Chain):作用域链会存储在当前执行环境的内部属性([scope])中。它的第0位,始终指向当前执行环境的活动对象。

我们通过实例配图讲解,例如有如下 js 文件:

// example.js 文件
var a = 'global';
function func() {
    console.log(a);
}
func(); // 结果为:global

当浏览器运行解析 example.js 后,首先创建了全局执行环境 (Window 对象)、Window 作用域链和 Global 全局活动对象,如图:


全局执行环境是最外围的执行环境,当浏览器关闭后才释放
全局活动对象 Global 不存在arguments属性,可以把它看作一个特殊的活动对象
接着,当 func 函数执行时,遵循相同机制会创建 func 执行环境、func 作用域链、func 活动对象,如图:

接下来,当执行到 console.log(a) 时,首先会去找作用域链第0位,发现 func 活动对象没有 a 变量,随后沿着作用域链找第1位,发现指向的 Global 对象有 a,因此输出其值 “global”。
最后,当 func 函数执行完毕,其执行环境被环境栈弹出,func 执行环境对象、func 作用域链、func 活动对象全部随之销毁。


闭包实例

搞明白了作用域链,离弄清楚什么是闭包就仅一步之遥了! 我们来看看下面这个实例:

function outer() {
    var a = 'Hi Closure';
    function inner() {
        return a;
    }
    return inner;
}
var func = outer();
console.log(func()); // Hi Closure

当执行 var func = outer() 时,情况如图:


到这里需要特别注意两点:

  • outer() 返回了一个 inner 函数,在调用 outer 时,inner 函数的作用域链和活动对象都已经被初始化了
  • outer() 执行完毕后,其执行环境被环境栈弹出,作用域链被销毁。但它的活动对象并没有被销毁,而是一致保存在内存中。因为 outer 活动对象被 inner 作用域链所引用。

接下来,当执行 console.log(func()) 时, 情况如图:


到这步,一个典型的闭包形成,神奇的事情发生了。
按照一般的情况,外部是无法访问函数内部变量的,即 outer 函数内部的 a 变量,对外是不可访问的。但上例中,由于 inner 函数的作用域链保留了对 outer 函数活动对象的引用,使得我们在外部能够借助 inner 函数,访问到 a 变量!这就是闭包。

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

推荐阅读更多精彩内容