作用域从何而来

var b = 'outerB';

function foo() {
  var b = 'foo';
  bar();
}

function bar() {
  console.log(b)
}

foo() // outerB

对输出的结果有没有疑惑呢？下面分析为什么是这个结果

// 模拟伪代码，加深印象

// 创建的时候，会插入一个全局对象Global Object(简写：GO)
foo.[[scope]] = {
    GO: {
        ...,
        b: undefined,
        foo: function () {...},
        bar: function () {...}
    }
}

// 创建bar函数
bar.[[scope]] = {
    GO: {
        ...,
        b: undefined,
        foo: function () {...},
        bar: function () {...}
    }
}

函数调用的时候，会生成一个执行环境（也叫上下文环境），然后复制函数的[[Scope]]属性中的对象构建起执行环境的作用域链。同时还有一个活动对象创建并被推入执行环境作用域链的前端。

// 伪代码如下：
1. 复制foo函数的[[Scope]]属性
foo.执行环境 = {
    GO: {
        ...,
        b: outerB,
        foo: function () {...},
        bar: function () {...}
    }
}

2. 给foo函数创建一个活动对象（AO），并且推入执行环境作用域的前端
foo.执行环境 = {
    AO: {
        this: window,
        arguments: [],
        ...,// 如果函数有参数的话，这里是一些参数的值
        b: foo
    },
    GO: {
        ...,
        b: outerB,
        foo: function () {...},
        bar: function () {...}
    }
}

// bar调用，同样
1. 复制bar函数的[[Scope]]属性
bar.执行环境 = {
    GO: {
        ...,
        b: outerB,
        foo: function () {...},
        bar: function () {...}
    }
}

2. 给bar函数创建一个活动对象（AO），并且推入执行环境作用域的前端
bar.执行环境 = {
    AO: {
        this: window,
        arguments: [],
        ...// 如果函数有参数的话，这里是一些参数的值
    },
    GO: {
        ...,
        b: outerB,
        foo: function () {...},
        bar: function () {...}
    }
}

调用完成后foo和bar的执行环境都会被销毁，但是注意的是，函数的[[Scope]]属性始终会保留到函数中，函数再次调用的时候，同样会以这种方式再次创建执行环境

再继续看下面这段代码,结果和你想的结果是一样的吗？

var b = 'outerB'
function foo() {
  var b = 'foo';
  function bar() {
    console.log(b)
  }
  bar()
}


foo(); // foo

可以仿照之前的例子，一步一步的解析出作用域链

// 模拟伪代码，加深印象

// 创建foo函数,会插入一个全局对象Global Object(简写：GO)
foo.[[scope]] = {
    GO: {
        ...,
        b: undefined,
        foo: function () {...}
    }
}

// 创建bar函数
bar.[[scope]] = {
    AO: { // foo函数的活动对象，在创建的时候就会被插入到这个对象中
        ...,
        b: undefined,
        bar: function () {...}
    },
    GO: {
        ...,
        b: undefined,
        foo: function () {...}
    }
}

// 伪代码如下：
1. 复制foo函数的[[Scope]]属性
foo.执行环境 = {
    GO: {
        ...,
        b: outerB,
        foo: function () {...},
        bar: function () {...}
    }
}

2. 给foo函数创建一个活动对象（AO），并且推入执行环境作用域的前端
foo.执行环境 = {
    AO: {
        this: window,
        arguments: [],
        ...,// 如果函数有参数的话，这里是一些参数的值
        b: foo
    },
    GO: {
        ...,
        b: outerB,
        foo: function () {...},
        bar: function () {...}
    }
}

// bar调用，同样

1. 复制bar函数的[[Scope]]属性
bar.执行环境 = {
    AO: { // foo函数的活动对象，在创建的时候就会被插入到这个对象中
        ...,
        b: foo,
        bar: function () {...}
    },
    GO: {
        ...,
        b: outerB,
        foo: function () {...}
    }
}

2. 给bar函数创建一个活动对象（AO），并且推入执行环境作用域的前端
bar.执行环境 = {
    AO(bar): {
        this: window,
        arguments: [],
        ...// 如果函数有参数的话，这里是一些参数的值
    },
    AO(foo): {
        ...,
        b: foo,
        bar: function () {...}
    },
    GO: {
        ...,
        b: outerB,
        foo: function () {...}
    }
}