JavaScript中的作用域链好像是没那么复杂

目的

• 首先, 网上有很多关于这个知识点的文章, 可是我还是写了这篇, 原因有二:
  • 1. 网上很多文章中有误, 挨个回复又太麻烦, 而且不一定有人看回复
    2. 貌似也没有说的太全面.
• 所以, 本着希望各位不要陷入误区的目的, 来写这篇文章, 但是小弟也是接触js不久, 如果有错误的地方还希望各位指正. 感激不尽!
• 此文章基本都是借鉴于<JavaScript 高级程序设计第三版>, 少量借鉴网上文章

开始啦~

我们先来弄清楚几个概念: (ps: 这里概念性东西很多, 但是我还是你建议反复看几遍...)

• 执行环境(execution context) : 执行环境定义了变量或函数有权访问的其他数据, 决定了它们各自的行为.
• 变量对象(variable object) : 每个执行环境都有一个与之关联的变量对象 , 环境中定义的所有变量和函数都保存在这个对象中. (这个对象你访问不到, 解析器会在后台使用它)
• 函数的执行环境: 每个函数都有自己的 执行环境, 当执行流进入一个函数时, 函数的环境就会被推入一个环境栈中, 而在函数执行之后, 栈将其弹出, 把控制权返回给之前的执行环境.

作用域链 - 看起来重点来咯

• 当代码在一个环境中执行时, 会创建变量对象的一个 作用域链(scope chain)
• 用途: 是保证对 执行环境 有权访问的所有变量 和 函数 的有序访问. 作用域链的前端, 始终都是当前执行的代码所在环境的变量对象.
• 如果这个环境是 函数, 则将其 活动对象(activation object) 作为变量对象.
  • 注意: 我仔细查了关于活动对象的资料, 大家可以把这玩意和变量对象划等号, 在此之前, 我看过很多帖子都是以 活动对象 举例子, 但是<JavaScript 高级程序设计第三版>中都是用的变量对象.
• 作用域链中的下一个对象来自包含(外部)环境, 而再下一个变量对象则来自下一个包含环境. 以此类推, 一直延续到全局执行环境; (这里的包含环境就是指的上一层执行环境)
• 全局环境的变量对象始终都是作用域链中的最后一个对象.

只看上面那堆概念性是很容易睡着的. 上代码:

• 先看懂这点代码再去看图

var color = 'yellow';
function changeColor() {
    var anotherColor = 'red';
    function swapColor() {
        var tempColor = anotherColor;
        anotherColor = color;
        color = tempColor;
    }
    swapColor();
}
changeColor(color);
console.log("color--- ", color); // red

• 图解:

// window 的变量对象包含了 color, changeColor
// changeColor() 的变量对象里面有anotherColor和swapColor()
// ...
window 的变量对象
   |
   ----color
   |
   ----changeColor()    此函数的变量对象包含 anotherColor 和 swapColor()
        |
        ----anotherColor
        |
        ----swapColor() 此函数的变量对象包含 tempColor
           |
           ----tempColor

至此, 基本的作用域链知识其实就说完了, 但是我是被困在了 延长作用域链 上:

• 虽然执行环境的类型总共只有两种: 全局和局部(函数), 但是还有其它办法来延长作用域链.
• 因为有些语句可以在作用域链的前端临时增加一个变量对象, 该变量对象会在代码执行后被移除.
• 在两种情况下会发生这种现象, 具体来说, 就是当执行流进入下列任何一个语句时, 作用域链就会得到加长:
  1. try-catch 语句的 catch 块: 对 catch 语句来说, 会创建一个新的变量对象, 其中包含的是被抛出的错误对象的声明.
  2. with 语句 : 对 with 语句来说, 会将指定的对象添加到作用域链中.

关于 try-catch 貌似没什么好说的, 在这里主要讲 with 的细节(不知道 with 的赶紧去翻书!):

• 先来看段代码 ~ <JavaScript 高级程序设计第三版> 源代码:
• 大家注意, url 这个变量是在 with 内部定义的, 但是怎么还是被 return 呢?

function buildUrl() {
    var qs = "?debug=true";
    with(location) {
        var url = href + qs;
    }
    return url;
}

• 这段代码是没有任何问题的, 有关 with 的用法, 书上也没多说. 我开始以为到了 with 语句的时候会再创建一层执行环境, 但是如果是这样, 我们在外部(这里是 buildUrl()) 是无法访问到它的, 也就是在上面的例子中是没办法 return 的, 不然解析器就会赏你一个大 ERROR
• 再看看书上原话:

在此, with 语句接收的是location对象, 因此其变量对象中就包含了location对象的所有属性和方法, 而这个变量对象被添加到了作用域链的前端.

• 好了, 水落石出! 我觉得书里应该把这里画出来的, 但是它没有, 所以, 让我来吧:

| window |            |                          |   |   |
|--------+------------+--------------------------+---+---|
|        | buildUrl() |                          |   |   |
|--------+------------+--------------------------+---+---|
|        |            | qs                       |   |   |
|--------+------------+--------------------------+---+---|
|        |            | href(belong to location) |   |   |
|--------+------------+--------------------------+---+---|
|        |            | url (belong to buildUrl) |   |   |
|--------+------------+--------------------------+---+---|
|        |            | ....(belong to location) |   |   |

• 各位看好了, belong to location . 我在此的理解即是:

  • buildUrl() 的变量对象里面本来是只有 qs , 但是执行到了 with 语句的时候, 会把 location 这个对象的所有方法和属性都添加到了 buildUrl() 的变量对象里面, 所以 url 这个变量其实是在 buildUrl() 的对象变量里面的, location 对象的属性和方法也是在 buildUrl() 里面的(在 with 语句内是这样).

• 可能上面说的还不是很清楚, 再来段代码附张图好了:

var obj = { name: 'Nicholas' };
function printName() {
    with(obj) {
        var str = "The name is " + name;
    }
    console.log(str);
}
printName(); // The name is Nicholas

• 图解, 我相信大家看完这些后, 对作用域链基本也没啥问题了

|        | variable object | variable object      |   |   |
|--------+-----------------+----------------------+---+---|
| window |                 |                      |   |   |
|--------+-----------------+----------------------+---+---|
|        | obj             |                      |   |   |
|--------+-----------------+----------------------+---+---|
|        | printName       | name (belong to obj) |   |   |
|--------+-----------------+----------------------+---+---|
|        |                 | str (belong to obj)  |   |   |
|--------+-----------------+----------------------+---+---|

额外知识点: 这里纠正 with 的一些问题, 很简单的~ 建议自己敲敲代码去验证

• 1. 如果我们在函数内部使用了 with, 那么 with 语句内使用的变量会默认先去 with 语句内包含的对象上去寻找, 如果找不到才会去从当前执行环境中寻找

var obj = { name: 'Nicholas' };
var name = 'Mark';

function printName() {
    with(obj) {
        // 这里的 name 是从 obj 找到的, 而不是全局变量
        var str = "The name is " + name;
    }
    console.log(str);
}
printName(); // The name is Nicholas
//------------------------------------------------------------------------------
var obj = {};
var name = 'Mark';

function printName() {
    with(obj) {
        // 这里的 name 是从 全局变量 找到的, 因为 obj 没有这个属性
        var str = "The name is " + name;
    }
    console.log(str);
}
printName();  // The name is Mark
//------------------------------------------------------------------------------

• 2 . with 的危险之处

var obj = { name: 'Nicholas' };
var name = 'Mark';

function printName() {
    with(obj) {
        // with的危险之处, 大概就是指的这里, 我们在内部可以修改外面obj属性的值.
        name = 'Jhon';
        var str = "The name is " + name;
    }
    console.log(str);
}
console.log("Global name is ", name); // Global name is Mark
printName(); // The name is Jhon
console.log("obj.name----- ", obj.name); // obj.name-----  Jhon

结束语

• 至此, 差不多就都说完了, 希望各位敲一敲来验证结果, 如果文章哪里有不对的地方, 还请指出来, 我会尽快修改, 免得误导其他人..