《深入理解JavaScript》—— 变量：作用域环境和闭包

Posted 2020-08-15 Amber丶

（1） 静态性和动态性

你可以从两个角度来看一个程序：

1. 静态性（或词法性）

function f() {
    function g() {
        
    }
}

我们可以肯定函数g被函数f所包围在内部。

描述性的词法就像是静态声明，因为它们都涉及了程序的词法（单词、源码）。

2. 动态性

function g() {
    
}
function f() {
    g();
}

它表示一个程序子运行期间所变现出来的特性。当我们调用f(),他会调用g()。在执行期间，g被f调用代表了一种动态的关系。

（2） 背景知识： 变量的作用域

为了后面的学习，首先知道一下几个概念：

1. 变量的作用域。变量的作用域是指变量在何处可以被访问到。

function foo() {
    var x;
}

这里的x的直接作用域就是函数foo()。

2. 词法作用域

javascript中的变量都是有词法作用域的，因此一个程序的静态结构决定了一个变量的作用域（这个作用域并不会被函数从哪里调用所影响）。

3. 嵌套作用域

如果在一个变量的直接作用域中嵌套有多个作用域，那么这个变量在所有的这些作用域中都可以访问到。

function foo ( arg ) {
    function bar() {
        console.log( ‘arg : ‘ + arg );
    }
    bar();
}
console.log( foo(‘hello‘) );  // arg : hello

我们说嵌套，foo()是外部的作用域，而bar()是内部的作用域。

4. 覆盖

如果在一个作用域中声明了一个与外层作用域同名的变量，那么在这个内部作用域以及其内部的所有作用域中将会访问不到外面的变量。而内部的变量的变化并不影响外部的变量，当离开内部作用域，外部变量就又可以被访问了。

var x = ‘global‘;
function () {
    var x = ‘local‘;
    console.log(x);  // local
}
console.log(x);  // global

在这个函数中，全局变量x被本地的x所覆盖。

（3） 变量以函数为作用域

大多数主流语言都是块级作用域，但在JavaScript中，它的变量是函数级作用域的：只有函数可以产生新的作用域；代码块在作用域中是不起作用的。

（4） 变量声明的提前

JavaScript会提前所有的变量声明，它会把所有的声明移到直接作用域的最前面。很明显当我们试图在变量声明前来访问它会发生什么：

function f() {
    console.log(bar);  // undefined
    var bar = 1;
    console.log(bar);  // 1
}

因为实际上，在JavaScript中是这样执行f()的：

function f() {
    var bar;
    console.log(bar);  // undefined
    bar = 1;
    console.log(bar);  // 1
}

注：函数的声明也会提前，但是与变量截然不同，函数声明会被整体提前，而不仅仅是变量创建的那部分。

最好的方式是将所需要用到的变量声明放到函数的最开始，以避免因变量提前产生的误导。

（5） 通过IIFE引入新的作用域

这是JavaScript中最常见的一种模式。Ben Alman将它命名为“立即执行的函数表达式”。一般来说，它看起来是这样的：

( function () {
    
} ) ();

关于IIFE，我们有一些需要注意：

1. 它是立即执行的。函数结束的括号后面的括号是用来立即调用函数的。函数会立即执行。

2. 它必须是一个表达式。如果是一个语句，以function关键词开头，解析器会认为它是一个函数定义。但是一个函数声明并不会立即执行。因此，我们在语句开始前加了一个左括号告诉解析器function关键词是处于一个函数表达式的开头。在括号中，只存在表达式。

3. 别忘了后面的分号。

（6） IIFE变体

1. 前缀运算符

你可以用前缀运算符来强制执行一个表达式。例如逻辑非：

! function () {

}();

当然也可以用void。

使用前缀运算符的好处是忘了分号并不会造成任何问题。

2. 预内置表达式上下文

要注意的是，为IIFE强制执行表达式上下文并不是必须的，如果已经在一个表达式的上下文里，那么你可以不用括号或者前缀运算符。例如：

var File = function () {
    var UNTITLED = ‘Untitled‘;
    function Flie (name) {
        this.name = name || UNTITLED;
    }
    return Flie;
}();

3. 传参的IIFE

你可以使用参数的方式在IIFE的内部定义变量：

var x = 23;
(function (twice) {
    console.log(twice);  // 46
})(x*2);

（7） IIFE的应用

IIFE可以使你获取函数中的私有数据。你不必定义全局变量也可以严密地将函数本身的逻辑包装在一起。这样可以避免对全局命名空间的污染：

var setValue = function () {
    var preValue;
    return function ( value ) {
        if ( value !== preValue ) {
            console.log ( ‘value was changed‘ );
            preValue = value;
        }
    }
};

（8） 全局变量

包含整个程序的作用域叫做全局变量或程序的作用域。

注：最好避免创建全局变量。

（9） 全局对象