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

（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）环境：变量的管理

当程序运行到变量所在的作用域时，变量被创建。这时它们需要一个存储的空间。而JavaScript中提供存储空间的数据结构就被称为环境。它将变量名与变量的值做映射。其结构与JavaScript对象非常类似。有时候在你离开作用域时，环境依然存在。因此，它们是被存储在堆中，而非栈。

变量有两种传递的方式，如果有必要，有两种维度。

1. 动态维度：调用函数

每当一个函数被调用，它就需要给它的参数和变量准备新的存储空间。当调用结束之后，空间通常会被释放。例子中，它进行了多次的自递归调用，并且每一次，它都为n创建新的存储空间。

function fac ( n ) {
    if ( n <= 1 ) {
        return 1;
    } else {
        return n * fac( n - 1 );
    }
}

2. 词法维度：与外部作用域进行关联

无论一个函数被调用了多少次，它总要访问它自己（最新）的本地变量和外部作用域的变量。

例如下面这个doNTimes函数，它内部有一个辅助函数doNTimesRec，当doNTimesRec多次调用自己的时候，每一次调用都会创建一个新的环境。然而，doNTimesRec在这多次调用中却一直与doNTimes的环境保持着联系（类似于所有的函数都共享了同一个全局环境）。在第一行中，doNTimesRec就需要通过这个联系来访问action。

function doNTimes( n , action ) {
    function doNTimesRec ( x ) {
        if ( x >= 1 ) {
            action();
            doNTimesRec(x-1);
        }
    }
    doNTimesRec(n);
}

对于这两个维度，做一下总结。

1. 动态维度：执行上下文的栈

函数每调用一次，就会创建一个新的环境将（变量和参数的）标识符和变量做映射。对于递归的情况，执行上下文，即环境的引用是在栈中进行管理的。这里的栈对应了调用栈。

2. 词法维度：环境链

为了支持这一维度，JavaScript会通过内部属性[[Scope]]来记录函数的作用域。在函数调用时，JavaScript会为这个函数所在的新作用域创建一个环境。这个环境有一个外层域（outer），它通过[[Scope]]创建并指向了外部作用域的环境。因此，在JavaScript中，一直存在一个环境链，它以当前环境为起点，连接了一层的外部的环境。每一个环境链最终会在全局环境（它是所有函数初始化调用的作用域）终结。而全局环境的外部环境指向了null。

为了识别环境中的标识，整个环境链会从当前环境开始被遍历。

接下来是关于闭包的有关知识，我需要再查阅相关内容，这点书中说的不够全面，留个坑吧就...下一章是《对象与继承》，这章有很多内容，需要我仔细的推敲和研读一番啊。

posted @ 2016-10-17 18:05 Hushaby丶阅读(330) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

Amber丶

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

公告