作用域(二)-闭包

提升(var)

我们都认为JavaScript代码执行的时候是由上到下一行一行执行的。但实际上这并不完全正确,有一种特殊情况会导致这个假设是错误的。


a = 2;
var a;
console.log( a );

可能许多人会认为是undefined,因为var a;声明是在a =2 之后,就认为了变量重新赋值undefined。但是,输出的结果是2。


console.log(a)
var a = 2;

上面这段代码你可能会认为会报错,但是结果是输出undefined。

那就让我们探索下是怎么回事吧

如果你像搞明白首先得去看一下之前作用域(一)篇章中我们所提到的编译原理 https://www.jianshu.com/p/7685863ca21f

引擎在执行之前会找到所有的声明。当你看到 var a = 2;的时候,JavaScript实际上会将他看成两个声明:var a;和 a =2;第一部分是编译,第二部分是执行。

所以,我们的var 声明的变量都会被提升,意思就是都会把这些变量先赋值成undefined,之后才去执行 a = 2;的赋值操作。

a = 2;
var a;
console.log(a)

所以这段代码 JavaScript 引擎的执行循序应该是 :

var a; //a = undefined;
a = 2;
console.log(a);

函数优先

变量声明和函数声明都会被提升。 需要注意的是,var 声明的变量才会提升,let const声明的不会

var foo;

function foo() {

}

console.log(foo)

由于函数优先的原则,上面的代码我们声明的函数权重最高,所以打印的foo是函数

垃圾回收

js的垃圾回收机制是为了防止内存泄漏。内存泄漏的含义就是当已经不需要某块内存时这块内存还存在着,垃圾回收机制就是间歇的不定期的寻找到不再使用的量,并释放掉它们所指向的内存。

什么时候会有垃圾?

在作用域中当整个作用域中的代码执行完后,作用域中的变量和方法都会没用,此时就是被当做垃圾了。比如局部作用域,一个函数执行完,里面的变量就可以被销毁,其占用内存被释放。

变量的声明周期

当一个变量的生命周期结束之后它所指向的内存就应该被释放。JS有两种变量,全局变量和在函数中产生的局部变量。局部变量的生命周期在函数执行过后就结束了,此时便可将它引用的内存释放(即垃圾回收),但全局变量生命周期会持续到浏览器关闭页面。

看代码:


// windows 浏览器环境

var a = 1;

function foo() {
    var b = 2;
}

foo();

上面的代码中,a变量会一直维持到浏览器关闭为止,但是foo中的b变量会在foo()执行完毕之后回收。

由于我们的a变量在之后的种种操作中还有可能会被用到,所以这个变量垃圾回收机制不会对它进行回收,但是b变量仅仅存在于foo()的作用域中,当函数执行完毕了之后我们从外部是访问不到b变量的,所以垃圾回收机制会对b变量进行回收操作。

标记清除

一个变量-->进入环境(被标记,有此标记为不能被清除)-->执行-->离开环境(被标记,这个标记告诉机制能被清除)-->回收机制一段周期后,变量被清除。

闭包

我对闭包的理解:变量没有被垃圾回收机制回收。

当函数可以记住并访问所在的词法作用域时,就产生了闭包,即使函数是在当前词法作用域之外执行。

下面这段代码大多数人认为是闭包


function fn1(){
    var a = 2;
    function fn2(){
        console.log(a)
    }

    fn2();
}

fn1();

这确切来说 是作用域嵌套,而不属于闭包。

看下面的代码:


function fn1(){
    var a = 1;
    function fn2(){
        console.log(a)
    }

    return fn2;
}

var fn3 = fn1();

fn3() // 1;

上面的代码清晰的给我们展示了闭包,函数fn2的词法作用域能够访问fn1的内部作用域。然后我们将fn2()本身当作一个值类型进行传递。在执行fn1()之后,返回值fn2被赋值给fn3。实际上我们只是通过不同的标识符调用了内部的函数fn2。

fn2显然可以被正常执行,但是它在自己定义的词法作用域之外的地方执行。

在fn1执行了之后,垃圾回收机制通常会准备对fn1内部的作用域进行垃圾回收,看上去fn1不会再被使用,所以回收机制会考虑对他的回收,但是闭包会阻止这一回收,由于fn2还在使用着这个作用域。所以我们再执行fn3的时候还能够访问到它的词法作用域。

无论通过何种手段将内部函数传递到所在的词法作用域以外,它都会持有对原始定义作用域的引用,无论在何处执行这个函数都会使用闭包。


function fn1(){
    var a = 2;
    function fn2(){
        console.log(a)
    }
    fn3(fn2);
}

function fn3(fn){
    fn(); // 此处形成闭包
}

函数fn2执行的时候所处的环境不是它定义的词法作用域环境。

代码中处处存在闭包的身影


function wait(message) {
    setTimeout(function timer() {
        console.log(message);
    }, 1000);
}
wait("Hello, closure!");

上面的例子中,将一个wait作用域下的 timer 函数 传递给 setTimeout 函数,当执行wait 1000毫秒之后,它的内部作用域不会消失,timer 函数保有wait函数作用域的闭包。

假设setTimeout 的内部结构如下定义


function setTimeout(fn ,time){
    time 时间后 执行 : fn();
}

所以当我们将 timer 函数传入setTimeout 函数之后, 调用timer函数 时候其实已经不在它之前定义的作用域环境中了。

我们再来看看vue源码中,153行到172行


    /**
     * Create a cached version of a pure function.
     */
    function cached(fn) {
        var cache = Object.create(null);
        return (function cachedFn(str) {
            var hit = cache[str];
            return hit || (cache[str] = fn(str))
        })
    }

    /**
     * Camelize a hyphen-delimited string.
     */
    var camelizeRE = /-(\w)/g;
    var camelize = cached(function (str) {
        return str.replace(camelizeRE, function (_, c) { return c ? c.toUpperCase() : ''; })
    });

从命名上看,我们知道作者肯定是用来缓存东西。将上面代码进行简化:


function fn1(fn){
    var a = 2;
    function fn2(){
        fn(a);
    }
    return fn2;
}

function fn4(a){
    console.log(a);
}

var fn3 = fn1(fn4);

fn3();

函数fn2执行的时候不处于自己定义的词法作用域内,所以形成了闭包。

大多数人会把IIFE模式认为是闭包 其实不是:


var a = 2;

(function(){
    console.log(a);
}())

这段代码也许会有人认为这是闭包,其实并不属于,因为函数并没有在它本身的词法作用域之外去执行,可能看上去像是形成了闭包,但这也许像是作用域封装的一种形式。

回顾

回顾一下之前所将的面试题中。


for (var i = 0; i < 5; i++) {
    setTimeout(() => {
        console.log(i)
    }, 200);
}

我们通过IIFE来创建一个作用域试一下


for (var i = 0; i < 5; i++) {
    (function () {
        var j = i;
        setTimeout(() => {
            console.log(j)
        }, 200);
    }())
}

现在它可以正常的打印了。由于setTImeout执行的函数时不是自身所定义的词法作用域,所以会形成闭包,j 变量没有被回收。

如果你还是不太容易理解上述代码,你可以转化一下思路:


for(var i = 1;i < 5; i++) {
    function fn1(){
        var j = i;
        fn2(function(){
            console.log(j)
        }, 200)
    }
    fn1();
}

function fn2(fn, time) {
    time 时间后执行 fn();
}

块作用域

es6中提出了块作用域的概念,我没每次使用IIFE都会创建一个新的作用域,可以理解为这就是块作用域,es6中的 let 声明可以用来劫持块作用域,所以上例的面试题中,我们可以这么写


for (let i = 0; i < 5; i++) {
    setTimeout(() => {
        console.log(i)
    }, 200);
}

注:本文是对《你不知道的JavaScript》这本书的一些学习总结和自身看法

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

推荐阅读更多精彩内容