【JS】作用域与作用域链

1. 词法(静态)作用域

首先，要先明确一点，JS属于【静态】作用域，即定义的时候决定变量是啥。
与之相对的是【动态】作用域，比如bash脚本和perl的一些模式。

var value = 1;
function foo(){
    console.log(value);
}
function bar(){
    var value = 2;
    foo()
}
bar();//结果是1，说明JS是静态的作用域

2. 全局作用域

全局作用域下的内容，任何地方都能获取到

• 直接写在window或Global上面的对象和函数

  var globalVal = 'global value';

  function globalFn () {};

  window.length;//在当前窗口中frames的数量（包括IFRAMES）

• 非函数内的变量或函数提升

  • 变量提升

    if(false){
         var temp = 'blockVal';
    }
    console.log(temp);//undefined，说明能拿到，只不过是提升后的undefined

  • 函数提升

    if(false){
         function blockFn() {console.log('block function');}
    }
    console.log('函数为:', blockFn);//函数为: undefined
    console.log('函数类型为:', typeof blockFn);//函数类型为: undefined

    等同于：

    var blockFn;
    if(false){
        blockFn = function blockFn() {console.log('block function');}
    }

3. 函数作用域

函数作用域下的对象，只能在当前函数内部才能获取到的（闭包除外）。

var outerVal = 'outer';
function testFn (){
    var innerVal = 'inner';
}
console.log(innerVal);//innerVal is not defined

4. 块级作用域

ES6 let/const的特性，这里不谈。

5. 上下文属性

• 变量对象VO，激活初始化（使用arguments）后变成AO

• 作用域链（Scope Chain），解构类似数组，有以下部分组成

  • 当前作用域的AO
  • 引擎的[[scope]]，存储了当前祖辈的作用域，以类数组方式存储
• this

6. 闭包

【广义】上所有的函数都是闭包，因为所有的函数都会包含Global作用域

【狭义】上一般有以下几种定义方式：

• 有权访问另一个函数作用域内变量的函数
• 执行和定义不在一个作用域的函数

从实践的角度：

• 即使创建他的上下文已经销毁（一般函数执行完后，函数的上下文会被销毁），它依然存在（比如，内部函数从父函数中返回）
• 在代码中引用了自由变量(即：使用变量X，但是X不是在当前函数中定义的)

function testFn() {
    var testVal = 'I am an innerVal';
   return function () {
       return testVal;
   }
}
var closureFn = testFn();
console.log(closureFn());//I am an innerVal
closureFn = null;//让GC回收，释放内存

上述代码中的closureFn方法能一直拿到testFn中的变量testVal，
原因是即使testFn()执行完，其上下文被销毁了，但是内部匿名函数的作用域链上保留了testFn的AO，
引擎发现有对testFn内部变量的引用，所以不会回收testFn，只有将closureFn置为null，GC才会自动释放其内存。