作用域 | 闭包 | 模块 | 词法作用域 | 动态作用域

以下内容为《你不知道的JavaScript上卷》第一部分第五章-作用域闭包及附录的阅读笔记

一.作用域闭包

1.是什么闭包?当函数可以记住并访问所在词法作用域时,就形成了闭包,即使函数是在当前词法作用域之外执行的。
function foo(){
    var a = 2;
    function bar(){
        console.log(a);//2
    }
    bar();
}
foo();
  • 从严格意义上来说,上面的代码片段并不是真正的闭包,更为准确的解释应该是:函数bar()a的引用方法是词法作用域中的查找规则,这些规则只是闭包的一部分,虽然是非常重要的一部分。
2.真正的闭包:
function foo(){
    var a = 2;
    function bar(){
        console.log(a);//2
    }
    return bar;
}
var baz = foo();
baz();

通过这个例子剖析上述闭包的定义:

①记住
  • 函数bar()的词法作用域可以访问foo()的内部作用域,我们将bar所引用的函数对象本身当做返回值。一旦执行foo()函数,则会返回bar()函数。
②访问
  • 通过不同的标识符引用调用了内部函数bar()
  • 在这个例子中,函数bar()在自己定义的词法作用域之外的地方执行。

More:

④闭包的”神奇”之处在于:阻止引擎的垃圾回收机制释放foo()函数的内部作用域。
⑤那么到底谁还在使用这个内部作用域呢?
  • 原来是bar()函数本身在使用。由于bar()函数所声明的位置原因,导致它拥有涵盖foo()内部作用域的闭包,使得该作用域能够一直存活,以供bar()函数在之后的任何时间进行引用。
⑥无论使用何种方式对函数类型的值进行传递,当函数在别处被调用时都可以观察到闭包现象。
function foo(){
    var a = 2;
    function baz(){
        console.log(a);
    }
    bar(baz);
}
function bar(fn){
    fn();//闭包
}
foo();


var fn;
function foo(){
    var a = 2;
    function baz(){
        console.log(a);
    }
    fn = baz;
}
function bar(){
    fn();//闭包
}
foo();
bar();//2

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

3.循环和闭包

for(var i = 1;i <= 5;i++){
    setTimeout(function timer(){
        console.log(i);
    },i*1000);
}
  • 对于以上代码片段,预期为分别输出数字1~5,每秒一次,每次一个。

  • 但是,实际情况是以每秒一次的频率输出五次6。

②首先,解决一个问题:6从哪来?

  • for循环中的终止条件是i不再<=5,条件首次成立时i的值是6。因此,输出显示的是循环结束时i的最终值。

③为什么会输出五次6?

  • 延迟函数的回调会在循环结束时才执行。

④代码中存在着什么缺陷,导致了它的行为和语义所暗示的不一样呢?

  • 我们试图假设,循环中的每次迭代在运行时都会给自己”捕获”一个i的副本。但是,根据作用域的工作原理,实际情况是循环中的五个函数是在各自迭代中分别定义的,但是它们都被封存在一个共享的全局作用域中,因此实际上只有一个i,也就是函数共享一个i的引用。

⑤试试IIFE(Immediately Invoked Function Expression)立即执行函数表达式:

for(var i = 1;i <= 5;i++){
    (function(){
        setTimeout(function timer(){
            console.log(i);
        },i*1000);
    })();
}
>>>
6
6
6
6
6

好像不管用啊!

  • 虽然每个延迟函数都会将IIFE在每次迭代中创建的作用域封存起来,但是封存空的作用域,没有什么实际用处。

⑥它需要有自己的变量,用来在每次迭代中存储i的值:

for(var i = 1;i <= 5;i++){
    (function(){
        var j = i;
        setTimeout(function timer(){
            console.log(j);
        },i*1000);
    })();
}
>>>
1
2
3
4
5
//优化一下
for(var i = 1;i <= 5;i++){
    (function(j){
        setTimeout(function timer(){
            console.log(j);
        },i*1000);
    })(i);
}
4.重返块作用域

①在之前代码片段中使用IIFE,可以在每次迭代时都创建一个新的作用域,换句话来说,每次迭代我们都需要一个块作用域。因此可以试着使用let声明,因为它可以用来劫持块作用域,并且在这个块作用域中声明一个变量。

for(var i = 1;i <= 5;i++){
    let j = i;
    setTimeout(function timer(){
        console.log(j);
    },j*1000);
}
>>>
1
2
3
4
5

本质上:是将一个块转换成了一个可以被关闭的作用域。

②More:for循环头部的let声明还会有一个非常强大的行为:该变量在循环过程中不止被声明一次,每次迭代都会声明。随后的每个迭代都会使用上一个迭代结束时的值来初始化这个变量。
for(let i = 1;i <= 5;i++){
    setTimeout(function timer(){
        console.log(i);
    },i*1000)
}
>>>
1
2
3
4
5
5.模块

function CoolModule(){
    var something = 'cool';
    var another = [1,2,3];
    function doSomething(){
        console.log(something);
    }
    function doAnother(){
        console.log(another.join('!'));
    }
    return{
        doSomething: doSomething,
        doAnother: doAnother
    };
}
var foo = CoolModule();
foo.doSomething();
>>>cool

foo.doAnother();
>>>1!2!3
  • 这种模式在JavaScript中被称为模块。

  • CoolModule()只是一个函数,必须要通过调用它来创建一个模块实例。

  • CoolModule()返回一个用对象字面量语法表示的对象。这个对象中包含了对内部函数的引用。

  • doSomthing()doAnother()函数具有涵盖模块实例内部作用域的闭包(通过调用CoolModule()实现)。

②模块模式需具备的两个必要条件:

  • 必须有外部的封装函数(CoolModule),该函数至少要被调用一次(每次调用都会创建一个新的模块实例)。

  • 封闭函数至少返回一个内部函数,这样内部函数才能在私有作用域中形成闭包,并且能够访问或者修改私有的状态。

③若只需要单个模块实例,可对上述代码进行小小的修改(IIFE)

var foo = (function CoolModule(){
    var something = 'cool';
    var another = [1,2,3];
    function doSomething(){
        console.log(something);
    }
    function doAnother(){
        console.log(another.join('!'));
    }
    return{
        doSomething: doSomething,
        doAnother: doAnother
    };
})();
foo.doSomething();//cool
foo.doAnother();//1!2!3

④模块也是普通的函数,因此可以接收参数:

function CoolModule(id){
    function identify(){
        console.log(id);
    }
    return{
        identify: identify
    };
}
var foo1 = CoolModule('foo 1');
var foo2 = CoolModule('foo 2');
foo1.identify();
>>>foo 1

foo2.identify();
>>>foo 2

⑤模块模式另一个简单而强大的用法是命名将要作为公共API返回的对象:

var foo = (function CoolModule(id){
    function change(){
        publicAPI.identify = identify2;
    }
    function identify1(){
        console.log(id);
    }
    function identify2(){
        console.log(id.toUpperCase());
    }
    var publicAPI = {
        change: change,
        identify: identify1
    };
    return publicAPI;
})('foo module');
foo.identify();
>>>foo module

foo.change();
foo.identify();
>>>FOO MODULE

附录A:动态作用域

1.词法作用域的定义过程发生在代码的书写阶段(这里假设代码没有使用evalwith)。
2.
function foo(){
    console.log(a);//2
}
function bar(){
    var a = 3;
    foo();
}
var a = 2;
bar();

①这段代码说明JavaScript中的作用域就是词法作用域。

  • 词法作用域让foo()函数中的a通过RHS(Retrieve His Source)引用到了全局作用域中的a,因此输出2
②词法作用域只关心函数在何处声明!
③那么动态作用域是怎么一回事呢?
3.动态作用域并不关心函数和作用域是如何声明以及在何处声明的,只关心它们从何处调用的。也就是说,作用域链是基于调用栈的,而不是代码中的作用域嵌套。
//注意,以下代码仅仅是在假设动态作用域存在的情况下
function foo(){
    console.log(a);//3,(而不是2!)
}
function bar(){
    var a = 3;
    foo();
}
var a = 2;
bar();

①为什么会这样?

  • foo()函数无法找到a的变量引用时,就会顺着调用栈在调用foo()函数的地方查找a,而不是在嵌套的词法作用域中向上查找。由于foo()函数是在bar()函数中调用的,因此,引擎会检查bar()函数的作用域,并在其中找到值为3的变量a
4.词法作用域和动态作用域的区别?
  • 词法作用域是在写代码或者说定义时确定的,而动态作用域是在运行时确定的。
  • 词法作用域关注函数在何处声明,而动态作用域则关注函数从何处调用(调用栈)。
5.JavaScript只有词法作用域,那为什么还要了解动态作用域?
  • 因为JavaScript中的this机制在某种程度上与动态作用域相似。
    原文作者:姚屹晨
    原文地址: https://www.jianshu.com/p/8c40975f278f
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞