JS作用域、变量提升和闭包

作用域

作用域可以理解为JS引擎执行代码的时候，查找变量的规则。

从确定变量访问范围的阶段的角度，可以分为2类，词法作用域和动态作用域。js是词法作用域。

从变量查找的范围的角度，可以分为3类，全局作用域、函数作用域和块级作用域。

词法作用域

词法作用域是在词法分析阶段就确定的作用域，变量的访问访问仅由声明时候的区域决定。

动态作用域则是在调用的而时候决定，它是基于调用栈的。

var a = 2;
function foo() {
    console.log( a );
}
function bar() {
    var a = 3;
    foo();
}
bar(); // 2

如果处于词法作用域，变量a首先在foo()函数中查找，没有找到。于是顺着作用域链到全局作用域中查找，于是输出2。

如果处于动态作用域，变量a首先在foo()函数中查找，没有找到。于是会顺着调用栈在调用foo()函数的地方，也就是bar()函数中查找，于是输出3。

但上述代码输出2，由此可以证明js是词法作用域。

全局作用域、函数作用域和块级作用域

全局作用域：

直接编写在script标签中的JS代码，或者一个单独的JS文件中的，都是全局作用域。

全局作用域在页面打开时创建，页面关闭时销毁。

在全局作用域中有一个全局对象window，代表一个浏览器的窗口，由浏览器创建，可以直接使用。

函数作用域：

JS函数作用域是指在函数内部声明的变量，在函数内部和函数内部声明的函数中都可以访问到。

访问规则：访问变量时，现在函数内部找，找不到则在外层函数找，直到最外层的全局作用于，这个查找的过程就是‘作用域链’。

块级作用域（es6）

使用let/const关键字创建的变量都具有块级作用域。

块级作用域的变量只有在语句块内可以访问。所谓语句块就是用{ }包起来的区域。

块级作用域有几个特性：不存在变量提升、暂时性死区、不允许重复声明。

不存在变量提升和不允许重复声明很好理解，那什么是暂时性死区呢？

答：只要块级作用域内存在let命令，它所声明的变量就绑定了这个区域，不再受外部影响。在代码块内，使用let命令声明函数之前，该变量都是不可用的，这在语法上称为“暂时性死区”。

var tmp = 123;

if (true) {
  tmp = 'abc'; // ReferenceError
  let tmp;
}

变量提升

JS在执行之前，会先进行预编译，主要做两个工作：

• 1、将全局作用域或者函数作用域内的所有函数声明提前。
• 2、将全局作用域或者函数作用域内的所有var声明的变量提前声明，并且复制undefined

这就是变量提升。

// 将全局作用域或者函数作用域内的所有函数声明提前。
function test() {
    exec();
    function exec() {
        console.log('exec');
    }
}
// 等价于
function test() {
    function exec() {
        console.log('exec');
    }
    exec();
}

// 将全局作用域或者函数作用域内的所有var声明的变量提前声明，并且复制undefined
function test1() {
    console.log(name);
    var name = 'test';
}
// 等价于
function test1() {
    var name;
    console.log(name);
    name = 'test';
}

注意：

• 函数声明可以提升，但是函数表达式不提升，具名的函数表达式的标识符也不会提升。
• 同名的函数声明，后面的覆盖前面的。
• 函数声明的提升，不受逻辑判断的控制。

// 函数表达式和具名函数表达式标识符都不会提升
test(); // TypeError test is not a function
log(); // TypeError log is not a function
var test = function log() { console.log('test') };

// 同名函数声明，后面的覆盖前面的
function test() {
  console.log(1);
}
function test() {
  console.log(2);
}
test(); // 2

// 函数声明的提升，不受逻辑判断的控制
// 注意这是在ES5环境中的规则，在ES6中会报错
function test() {
  log();
  if (false) {
    function log() {
      console.log('test');
    }
  }
}
test(); // 'test'

在块级作用域中声明函数会是什么效果呢？

ES6环境中，如果在语句块中声明函数，按照正常的规范，函数声明应该被封闭在语句块里面，但是为了兼容老代码，因此语法标准允许其他的实现：

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

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

(function () {
  if (false) {
    // 重复声明一次函数f
    function f() { console.log('I am inside!'); }
  }
  f(); // Uncaught TypeError: f is not a function
}());

// 等价于
function f() { console.log('I am outside!'); }
(function () {
  var f = undefined;
  if (false) {
    function f() { console.log('I am inside!'); }
  }
  f(); // Uncaught TypeError: f is not a function
}());

闭包

函数和函数内部能访问到的变量的总和，就是一个闭包。

如何生成闭包？函数内嵌套函数，并且函数执行完后，内部函数会被引用，这样内部函数可以访问外部函数中定义的变量，于是就生成了一个闭包。（函数嵌套 + 内部函数被引用）

闭包的作用是什么？可以让内部的函数访问到外部函数的变量，避免变量在全局作用域中存在被修改的风险。

注意事项：不用的时候解除引用，避免不必要的内存占用。

缺点：使用时候不注意的话，容易产生内存泄漏。

闭包实现一个计数器

var count = 0;
function createCounter() {
  function increase() {
      count++;
  }

  function getCount() {
      return count;
  }

  return {
      increase: increase,
      getCount: getCount
  };
}

var counter = createCounter();
counter.increase();

console.log(counter.getCount());
console.log(count);

上述实现方法，变量count放在全局，很容易被其他模块修改从而导致不可预知的问题。因此我们希望count变量不会被其他模块访问到，于是需要把count放在函数作用域中：

function createCounter() {
    var count = 0;
    function increase() {
        count++;
    }

    function getCount() {
        return count;
    }

    return {
        increase: increase,
        getCount: getCount
    };
}

var counter = createCounter();
counter.increase();

console.log(counter.getCount());
console.log(count);

这样函数createCounter中的increate和getCount两个函数可以访问到createCounter内部定义的count，这样就形成了闭包。而count只能被createCounter内部定义的函数访问到，因此不会有被随意修改的风险。

通常情况下函数中定义的变量在函数执行完成后会被销毁，例如：

function createCounter() {
    var count = 0;

    function increase() {
        count++;
    }

    function getCount() {
        return count;
    }

    return {
        increase: increase,
        getCount: getCount
    };
}

createCounter();

通常执行完createCounter()方法之后，内部的所有变量都被从内存中销毁（因为没有其他地方使用了）。但是如果生成了闭包（即有对内部嵌套函数的引用），则内部变量不会被销毁（因为还有其他地方在用，嵌套的内部函数还在使用）。

还是以上面createCounter闭包为例，由于createCounter返回的方法们被引用，因此形成闭包，所以内部变量count不会被销毁，而是会继续被increase和getCount使用。

生成闭包之后，如果我们不再需要使用counter可以执行counter = null；这样失去了对内部嵌套函数的引用，浏览器就会将方法内资源都销毁调了。因此当我们使用完闭包之后如果后续不再需要使用，最好通过取消引用来释放闭包的资源。

学习参考：https://www.yuque.com/baiyueguang-rfnbu/tr4d0i/gu0blp#WW3FR