JavaScript笔记：函数作用域和块作用域

傷城~ 2022-07-16 06:18 181阅读 0赞

## 1、函数中的作用域 ##

考虑如下的代码：

function foo(a) { 
        var b = 2;
        // 一些代码
        function bar() { 
            // ...
        }
        // 更多的代码 
        var c = 3;
    }

在这个代码片段中，foo(..) 的作用域中包含了标识符 a、b、c 和 bar。

bar(..) 拥有自己的作用域。全局作用域也有自己的作用域气泡，它只包含了一个标识符:foo。

由于标识符 a、b、c 和 bar 都附属于 foo(..) 的作用域，因此无法从 foo(..) 的外部 对它们进行访问。也就是说，这些标识符全都无法从全局作用域中进行访问，因此下面的代码会导致 ReferenceError 错误:

bar(); // 失败
    console.log( a, b, c ); // 三个全都失败

函数作用域的含义是指，属于这个函数的全部变量都可以在整个函数的范围内使用及复用(事实上在嵌套的作用域中也可以使用)。这种设计方案是非常有用的，能充分利用 JavaScript 变量可以根据需要改变值类型的“动态”特性。

但与此同时，如果不细心处理那些可以在整个作用域范围内被访问的变量，可能会带来意想不到的问题。

## 2、隐藏内部实现 ##

对函数的传统认知就是先声明一个函数，然后再向里面添加代码。但反过来想也可以带来一些启示：从所写的代码中挑选出一个任意的片段，然后用函数声明对它进行包装，实际上就是把这些代码“隐藏”起来了。

实际的结果就是在这个代码片段的周围创建了一个作用域气泡，也就是说这段代码中的任何声明(变量或函数)都将绑定在这个新创建的包装函数的作用域中，而不是先前所在的作用域中。换句话说，可以把变量和函数包裹在一个函数的作用域中，然后用这个作用域来“隐藏”它们。

为什么“隐藏”变量和函数是一个有用的技术?

有很多原因促成了这种基于作用域的隐藏方法。它们大都是从最小特权原则中引申出来的，也叫最小授权或最小暴露原则。

这个原则是指在软件设计中，应该最小限度地暴露必要内容，而将其他内容都“隐藏”起来，比如某个模块或对象的 API 设计。

这个原则可以延伸到如何选择作用域来包含变量和函数。如果所有变量和函数都在全局作用域中，当然可以在所有的内部嵌套作用域中访问到它们。但这样会破坏前面提到的最小特权原则，因为可能会暴漏过多的变量或函数，而这些变量或函数本应该是私有的，正确的代码应该是可以阻止对这些变量或函数进行访问的。

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

在这个代码片段中，变量 b 和函数 doSomethingElse(..) 应该是 doSomething(..) 内部具体实现的“私有”内容。给予外部作用域对 b 和 doSomethingElse(..) 的“访问权限”不仅没有必要，而且可能是“危险”的，因为它们可能被有意或无意地以非预期的方式使用， 从而导致超出了 doSomething(..) 的适用条件。更“合理”的设计会将这些私有的具体内容隐藏在 doSomething(..) 内部：

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、模块管理

另外一种避免冲突的办法和现代的模块机制很接近，就是从众多模块管理器中挑选一个来使用。使用这些工具，任何库都无需将标识符加入到全局作用域中，而是通过依赖管理器 的机制将库的标识符显式地导入到另外一个特定的作用域中。

显而易见，这些工具并没有能够违反词法作用域规则的“神奇”功能。它们只是利用作用域的规则强制所有标识符都不能注入到共享作用域中，而是保持在私有、无冲突的作用域中，这样可以有效规避掉所有的意外冲突。

## 3、函数作用域 ##

在任意代码片段外部添加包装函数，可以将内部的变量和函数定义“隐藏”起来，外部作用域无法访问包装函数内部的任何内容。

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

虽然这种技术可以解决一些问题，但是它并不理想，因为会导致一些额外的问题。

首先，必须声明一个具名函数 foo()，意味着 foo 这个名称本身“污染”了所在作用域(在这个例子中是全局作用域)。  
其次，必须显式地通过函数名(foo())调用这个函数才能运行其中的代码。

如果函数不需要函数名(或者至少函数名可以不污染所在作用域)，并且能够自动运行，这将会更加理想。

JavaScript 提供了能够同时解决这两个问题的方案。

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

首先，包装函数的声明以 (function… 而不仅是以 function… 开始。尽管看上去这并不是一个很显眼的细节，但实际上却是非常重要的区别。函数会被当作函数表达式而不是一个标准的函数声明来处理。

区分函数声明和表达式最简单的方法是看 function 关键字出现在声明中的位置(不仅仅是一行代码，而是整个声明中的位置)。如果 function 是声明中 的第一个词，那么就是一个函数声明，否则就是一个函数表达式。

函数声明和函数表达式之间最重要的区别是它们的名称标识符将会绑定在何处。 比较一下前面两个代码片段。第一个片段中 foo 被绑定在所在作用域中，可以直接通过 foo() 来调用它。第二个片段中 foo 被绑定在函数表达式自身的函数中而不是所在作用域中。

**匿名和具名**

对于函数表达式你最熟悉的场景可能就是回调参数了，比如:

setTimeout( function() { 
        console.log("I waited 1 second!");
    }, 1000 );

这叫作匿名函数表达式，因为 function().. 没有名称标识符。函数表达式可以是匿名的，而函数声明则不可以省略函数名——在 JavaScript 的语法中这是非法的。

匿名函数表达式书写起来简单快捷，很多库和工具也倾向鼓励使用这种风格的代码。但是它也有几个缺点需要考虑。

1. 匿名函数在栈追踪中不会显示出有意义的函数名，使得调试很困难。
    2. 如果没有函数名，当函数需要引用自身时只能使用已经过期的arguments.callee引用， 比如在递归中。另一个函数需要引用自身的例子，是在事件触发后事件监听器需要解绑自身。
    3. 匿名函数省略了对于代码可读性/可理解性很重要的函数名。一个描述性的名称可以让代码不言自明。

*行内函数表达式*非常强大且有用——匿名和具名之间的区别并不会对这点有任何影响。给函数表达式指定一个函数名可以有效解决以上问题。始终给函数表达式命名是一个最佳实践：

setTimeout( function timeoutHandler() {  // <-- 快看，有名字了! 
        console.log( "I waited 1 second!" );
    }, 1000 );

**立即执行函数表达式**

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

由于函数被包含在一对 ( ) 括号内部，因此成为了一个表达式，通过在末尾加上另外一个 ( ) 可以立即执行这个函数，比如 `(function foo(){ .. })()`。第一个 ( ) 将函数变成表达式，第二个 ( ) 执行了这个函数。

这种模式很常见，几年前社区给它规定了一个术语：IIFE，代表立即执行函数表达式 (Immediately Invoked Function Expression)。

相较于传统的 IIFE 形式，很多人都更喜欢另一个改进的形式：`(function(){ .. }())`。仔细观察其中的区别。第一种形式中函数表达式被包含在( )中，然后在后面用另一个()括号来调用。第二种形式中用来调用的()括号被移进了用来包装的( )括号中。

这两种形式在功能上是一致的。选择哪个全凭个人喜好。

IIFE 的另一个非常普遍的进阶用法是把它们当作函数调用并传递参数进去。

var a = 2;
    (function IIFE( global ) {
        var a = 3;
        console.log( a ); // 3 
        console.log( global.a ); // 2
    })( window );
    console.log( a ); // 2

我们将 window 对象的引用传递进去，但将参数命名为 global，因此在代码风格上对全局对象的引用变得比引用一个没有“全局”字样的变量更加清晰。当然可以从外部作用域传递任何你需要的东西，并将变量命名为任何你觉得合适的名字。这对于改进代码风格是非常有帮助的。

这个模式的另外一个应用场景是解决 undefined 标识符的默认值被错误覆盖导致的异常(虽然不常见)。将一个参数命名为 undefined，但是在对应的位置不传入任何值，这样就可以保证在代码块中 undefined 标识符的值真的是 undefined:

undefined = true; // 给其他代码挖了一个大坑!绝对不要这样做! 
    (function IIFE( undefined ) { 
        var a;
        if (a === undefined) {
            console.log( "Undefined is safe here!" );
        }
    })();

IIFE 还有一种变化的用途是倒置代码的运行顺序，将需要运行的函数放在第二位，在 IIFE 执行之后当作参数传递进去。

这种模式在UMD(Universal Module Definition)项目中被广泛使用。尽管这种模式略显冗长，但有些人认为它更易理解。

var a = 2;
    (function IIFE( def ) {  
        def( window );
    })(function def( global ) { 
        var a = 3;
        console.log( a ); // 3 
        console.log( global.a ); // 2
    });

## 4、块作用域 ##

尽管函数作用域是最常见的作用域单元，当然也是现行大多数 JavaScript 中最普遍的设计方法，但其他类型的作用域单元也是存在的，并且通过使用其他类型的作用域单元甚至可以实现维护起来更加优秀、简洁的代码。

*除 JavaScript 外*的很多编程语言都支持块作用域，因此其他语言的开发者对于相关的思维方式会很熟悉，但是对于主要使用 JavaScript 的开发者来说，这个概念会很陌生。

下面两段代码中的变量，都会污染全局作用域。

for (var i=0; i<10; i++) { 
        console.log( i );
    }
    
    var foo = true;
    if (foo) {
        var bar = foo * 2;
        bar = something( bar ); 
        console.log( bar );
    }

表面上看 JavaScript 并没有块作用域的相关功能。

除非你更加深入地研究。

**with**

它不仅是一个难于理解的结构，同时也是块作用域的一个例子(块作用域的一种形式)，用 with 从对象中创建出的作用域仅在 with 声明中而非外部作用域中有效。

**try/catch**

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

try {
        undefined(); // 执行一个非法操作来强制制造一个异常
    }
    catch (err) {
        console.log( err ); // 能够正常执行! 
    }
    
    console.log( err ); // ReferenceError: err not found

正如你所看到的，err 仅存在 catch 分句内部，当试图从别处引用它时会抛出错误。

**let**

ES6 引入了新的 let 关键字，提供了除 var 以外的另一种变量声明方式。

let 关键字可以将变量绑定到所在的任意作用域中(通常是 \{ .. \} 内部)。换句话说，let为其声明的变量隐式地了所在的块作用域。

var foo = true;
    if (foo) {
        let bar = foo * 2;
        console.log( bar );
    }
    console.log( bar ); // ReferenceError

但是使用 let 进行的声明不会在块作用域中进行提升。声明的代码被运行之前，声明并不“存在”。  
（提升是指声明会被视为存在于其所出现的作用域的整个范围内。）

块作用域非常有用的原因和闭包及回收内存垃圾的回收机制相关。

click 函数的点击回调并不需要 someReallyBigData 变量。理论上这意味着当 process(..) 执 行后，在内存中占用大量空间的数据结构就可以被垃圾回收了。但是，由于 click 函数形成 了一个覆盖整个作用域的闭包，JavaScript 引擎极有可能依然保存着这个结构(取决于具体实现)。

块作用域可以打消这种顾虑，可以让引擎清楚地知道没有必要继续保存 someReallyBigData 了:

let循环

一个 let 可以发挥优势的典型例子就是之前讨论的 for 循环。

for (let i=0; i<10; i++) { 
        console.log( i );
    }
    console.log( i ); // ReferenceError

**const**

除了 let 以外，ES6 还引入了 const，同样可以用来创建块作用域变量，但其值是固定的 (常量)。之后任何试图修改值的操作都会引起错误。

var foo = true;
    if (foo) {
        var a = 2;
        const b = 3; //包含在if中的块作用域常量
        a = 3; //正常!
        b = 4; //错误! 
    }
    console.log( a ); // 3
    console.log( b ); // ReferenceError!