<JavaScript深入>作用域和作用域链

作用域

函数作用域

JS中只有两种作用域，一种是全局作用域，另外一种是函数作用域

var scope="global";  
function t(){  
    console.log(scope); // undefined
    var scope="local"  
    console.log(scope);  // local
}  
t();

JavaScript没有块级作用域

for(var a = 1;a<10;a++){
    console.log(a); // 1 .... 10
}
console.log(a);  // 10

if(true){
    var b = 1;
    console.log(b); // 1
}

console.log(b); // 1

如果在函数中，不使用 var / let 创建变量，变量为全局变量

function f(){
    a = 1;
    console.log(a);  // 1
}
f();
console.log(a);  // 1

作用域链

当查找变量的时候，会先从当前上下文的变量对象中查找，如果没有找到，就会从父级(词法层面上的父级)执行上下文的变量对象中查找，一直找到全局上下文的变量对象，也就是全局对象。这样由多个执行上下文的变量对象构成的链表就叫做作用域链。

函数创建

在JavaScript中，函数也是对象，实际上，JavaScript里一切都是对象。函数对象和其它对象一样，拥有可以通过代码访问的属性和一系列仅供JavaScript引擎访问的内部属性。其中一个内部属性是[[Scope]]，由ECMA-262标准第三版定义，该内部属性包含了函数被创建的作用域中对象的集合，这个集合被称为函数的作用域链，它决定了哪些数据能被函数访问。

函数的作用域在函数定义的时候就决定了。这是因为函数有一个内部属性 [[scope]]，当函数创建的时候，就会保存所有父变量对象到其中，你可以理解 [[scope]] 就是所有父变量对象的层级链，但是注意：[[scope]] 并不代表完整的作用域链！

function foo() {
    function bar() {
        ...
    }
}
// 函数创建时
foo.[[scope]] = [
  globalContext.VO
];

bar.[[scope]] = [
    fooContext.AO,
    globalContext.VO
];

函数激活

当函数激活时，进入函数上下文，创建 VO/AO 后，就会将活动对象添加到作用链的前端。

这时候执行上下文的作用域链，我们命名为 Scope：

Scope = [AO].concat([[Scope]]);

至此，作用域链创建完毕。

思考

var scope = "global scope";
function checkScope(){
    var scope2 = 'local scope';
    return scope2;
}

checkScope();

执行过程如下：
1.checkscope 函数被创建，保存作用域链到 内部属性[[scope]]

checkScope.[[scope]] = [
    globalscope.VO
];

2.执行 checkscope 函数，创建 checkscope 函数执行上下文，checkscope 函数执行上下文被压入执行上下文栈

ECStack = [
    checkScopeContext,
    globalContext
];

3.checkscope 函数并不立刻执行，开始做准备工作，第一步：复制函数[[scope]]属性创建作用域链

checkScopeContext = {
    Scope: checkScope.[[scope]],
}

4.用 arguments 创建活动对象，随后初始化活动对象，加入形参、函数声明、变量声明

checkScopeContext = {
    AO: {
        arguments: {
            length: 0
        },
        scope2: undefined
    }
}

5.将活动对象压入 checkScope 作用域顶端

checkScopeContext = {
    AO: {
        arguments: {
            length: 0
        },
        scope2: undefined
    },
    Scope: [AO, [[Scope]]]
}

6.准备工作做完，开始执行函数，随着函数的执行，修改 AO 的属性值

checkscopeContext = {
    AO: {
        arguments: {
            length: 0
        },
        scope2: 'local scope'
    },
    Scope: [AO, [[Scope]]]
}

7.查找到 scope2 的值，返回后函数执行完毕，函数上下文从执行上下文栈中弹出

ECStack = [
    globalContext
];

---

ES6 块级作用域

function f() { console.log('I am outside!'); }

(function () {
  if (false) {
    // 重复声明一次函数f
    function f() { console.log('I am inside!'); }
  }
  console.log(f); // undefined
  f();  // f is not a function
  console.log(this.f) ; // function f() { console.log('I am outside!'); }
  this.f(); // I am outside!  
  // 这里的 this 指向的是 window
}());

这个地方会扯到 执行上下文
在JS进行执行的时候， 函数(function)会被提前加载到缓存区，但是并没有把函数赋值给 f
在 (function(){ // 新的作用域 })() 中，新建了一个 function f ，而实际执行的时候，function f() { console.log('I am inside!'); }并没有被执行。所以 f 是一个未复制的变量。

function f() { console.log('I am outside!'); }

(function () {
  if (true) {
    // 重复声明一次函数f
    function f() { console.log('I am inside!'); }
  }
  console.log(f); // function f() { console.log('I am inside!'); }
  f();  // I am inside!
  console.log(this.f) ; // function f() { console.log('I am outside!'); }
  this.f(); // I am outside!  
}());

如果在纯 ES6 的环境中运行，理论上会得到 I am outside!。因为块级作用域内声明的函数类似于let，对作用域之外没有影响。

ES6 在附录 B里面规定，浏览器的实现可以不遵守上面的规定，有自己的行为方式。

• 允许在块级作用域内声明函数。
• 函数声明类似于var，即会提升到全局作用域或函数作用域的头部。
• 同时，函数声明还会提升到所在的块级作用域的头部。

注意，上面三条规则只对 ES6 的浏览器实现有效，其他环境的实现不用遵守，还是将块级作用域的函数声明当作let处理。

根据这三条规则，在浏览器的 ES6 环境中，块级作用域内声明的函数，行为类似于var声明的变量

// 函数声明语句
{
  let a = 'secret';
  function f() {
    return a;
  }
}
f(); // secreta

// 函数表达式
{
  let a = 'secret';
  let f = function () {
    return a;
  };
}
f(); // f is not a function