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

以下内容为《你不知道的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.词法作用域的定义过程发生在代码的书写阶段（这里假设代码没有使用eval和with）。

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机制在某种程度上与动态作用域相似。