JS作用域(3) - 函数作用域、块作用域、作用域闭包

作用域产生的场景：函数作用域、块作用域

作用域产生的结果：作用域闭包

Part 1 函数作用域

定义：属于这个函数的全部变量都可以在整个函数的范围内使用及复用（在嵌套的作用域中也可以使用）

形式：

形式一：包装函数

声明方式：（function....) 其中的函数会被当作函数表达式，而不是函数声明来处理

var a = 2;

(function foo() {
    
    var a = 3;
    console.log(a);

})()

console.log(a); //2

形式二：匿名函数表达式

声明方式： function()..没有名称标识符

setTimeout(function() {

    console.log('aaa');

}, 1000);

形式三：具名函数表达式

与形式二相反

setTimeout(function timeoutHandler() {

    console.log('aaa');

}, 1000);

形式四：立即执行函数表达式(IIFE)

日常用法：匿名表达式

普通使用方法：函数被包含在一对（）括号内部，因此成为了一个表达式，通过在末尾加上另外一个（）可以立即执行这个函数

(function foo() { ... }) ()

第一个()将函数变成表达式
第二个()执行了这个函数

进阶使用方法：把它们当作函数调用并传递参数进去、

var a = 2;

(function IIFE(global) {

    var a = 3;
    console.log(a); //3
    console.log(global.a); //2

})(window)

应用场景：

场景一：解决undefined标识符的默认值被错误覆盖导致的异常

undefined = true;

(function IIFE(undefined) {
    var a;
    
    if(a === undefined) {
        console.log('undefined')
    }
})();

场景二：倒置代码的运行顺序

将需要运行的函数放在第二位，在IIFE执行之后当作参数传递进去

var a = 2;

(function IIFE(def) {

    def(window);

})(function def(global) {

    var a = 3;
    console.log(a);//3
    console.log(global.a);//2

})

使用场景：

场景一：隐藏内部实现

把变量和函数包裹在一个函数的作用域中，然后用这个作用域来“隐藏”它们

最小授权/最小暴露原则：在软件设计中，应该最小限度地暴露必要内容，而将其他内容都"隐藏”起来

function doSomething(a){
    function doSomethingElse(a){
        return a - 1;
    }
    var b;
    b = a + doSomethingElse(a*2);
    console.log(b*3);
}

doSomething(2); //15

b和doSomethingElse()都无法从外部被访问，而只能被doSomething()所控制,在设计上将具体内容私有化了

场景二：规避冲突之全局命名空间

第三方库通常会在全局作用域中声明一个名字足够独特的变量（类型：对象），这个对象被用作库的命名空间。所有需要暴露给外界的功能都会成为这个对象的属性。

场景三：规避冲突之模块管理

通过依赖管理器的机制将库的标识符显式地导入到另外一个特定的作用域中，强制所有标识符都不能注入到共享作用域中，而是保持私有、无冲突的作用域中，可以避免意外冲突

• 现代的模块机制

        模块有两个主要特征：

        1、为创建内部作用域而调用了一个包装函数

        2、包装函数的返回值必须至少包括一个对内部函数的引用，这样就会创建涵盖整个包装

                换上内部作用域的闭包

• 未来的模块机制

Part 2 块作用域

定义：一个用来对之前的最小授权原则进行扩展的工具，将代码从在函数中隐藏信息扩展为在块中隐藏信息

形式：

形式一：with

用with从对象中创建出的作用域仅在with声明中而非外部作用域中有效

形式二：try/catch

ES3规范中规定try/catch的catch分句会创建一个块作用域，其中声明的变量（e/error）仅在catch内部有效

形式三：let

作用域：let关键字可以将变量绑定到所在的任意作用域中（通常是{ ... }内部）

深入来说，let为其声明的变量隐式地劫持了所在的块作用域

特殊性：使用let进行的声明不会在块作用域中进行提升，声明的代码被运行之前，声明并不"存在“

{
    console.log(bar); //ReferenceError
    let bar = 2;
}

使用场景：

场景一：垃圾收集

内部实现原理：块级作用域可以在变量或函数不再需要使用时，让引擎知道不需要继续保存，就可以对内存中占用空间的数据结构进行垃圾回收

场景二：let循环

for循环头部的let不仅将i绑定到了for循环的块中，事实上它将其重新绑定到了循环的每一个迭代中，确保使用上一个循环迭代结束时的值重新进行赋值，形成了闭包的块级作用域

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

形式四：const

可以用来创建块作用域变量，其值是固定的常量

Part 3 作用域闭包

产生：基于词法作用域书写代码时所产生的自然结果

实质：

1、当函数可以记住并访问所在的词法作用域时，就产生了闭包

2、函数可以在自己定义的词法作用域以外的地方执行/被调用

3、闭包使得函数依然持有对该作用域的引用，可以继续访问定义时的词法作用域

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

例子1：

function foo() {
    var a = 2;

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

    return bar;
}

var baz = foo();
baz();//2

bar()的词法作用域能够访问foo()的内部作用域
将bar()本身当作一个值类型进行传递

foo()执行之后，返回值为内部函数bar(),并将其赋值给变量baz,并调用baz()
通过不同的标识符引用调用了内部的函数bar()

例子2：

function foo() {

    var  a = 2;

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

    bar(baz)
}

function bar(fn) {
    fn();//闭包
}

foo()


把内部函数baz传递给bar,当调用这个内部函数时(现在叫作 fn),
它涵盖的foo()内部作用域的闭包就可以观察到了，它可以访问a

例子3：

var fn;

function foo() {
    var a = 2;

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

    fn = baz;//将baz分配给全局变量
}

function bar() {
    fn();//闭包
}

foo();

bar();//2

使用场景：

场景一：setTimeout(...)

场景二：jQuery

场景三：定时器、事件监听器、Ajax请求、跨窗口通信、WebWorkers、异步/同步（使用回调函数的场合，实际上就是在使用闭包）