JavaScript中的变量提升

产生变量提升的原因

在 ES6 之前，JavaScript 没有块级作用域(一对花括号{}即为一个块级作用域)，大致分为全局作用域和函数作用域。变量提升即将变量声明提升到它所在作用域的开始的部分。 在 JavaScript 代码运行之前其实是有一个编译阶段的。编译之后才是从上到下，一行一行解释执行。变量提升就发生在编译阶段，它把变量和函数的声明提升至作用域的顶端。（编译阶段的工作之一就是将变量与其作用域进行关联）。我先分开介绍变量提升和函数提升到后面再放到一起比较。 如果想更深入的了解产生变量提升的原因

注意

1. 同一个变量只会声明一次，其它的会被覆盖掉。
2. 变量提升/函数提升是提升到当前作用域的顶部，如果遇到特殊的if(){}/try-cache作用域，同时也会把也会提升到特殊作用域的外部。
3. 函数提升的优先级是高于变量提升的优先级，并且函数声明和函数定义的部分一起被提升。

变量提升

我们直接从代码从基础的开始

console.log(a); // undefined
var a = 2;
复制代码

相信这个大家知道，上面代码其实就是

var a;
console.log(a); // undefined
a = 2;
复制代码

他会提前声明 a,但是不会给 a 赋值。 但是如下代码会怎么执行呢？

console.log(a); // Uncaught ReferenceError: a is not defined
a = 2;
复制代码

如果没有通过 var 声明值类型的就不会存在变量提升，而是会报错。

函数提升

声明函数有两种方式: 一种是函数表达式，另一种是函数声明。

函数表达式

  console.log(aa) // undefined
  var aa = function () {};

  /** 代码分解 ***/
  var aa;
  console.log(aa);
  aa = function () {};
复制代码

函数表达式和变量的提升效果基本上是一致的，它会输出undefined。

函数声明

它和函数表达式是有点不一样的，在没有{}作用域时它们表现是一致的。表现一致的例子

console.log(a); // function a () {}
function a() { };

/** 代码分解 ***/
function a() { };
console.log(a);
复制代码

那如果变量提升和函数提升同时存在，谁先谁后呢? 我们根据上面的注意事项1和3可以得出结果，根据实例来分析一下。 请看下面的例子：

  console.log(aa); // function aa () {}
  var aa = 'aaaa';
  function aa () {};
  console.log(aa); // aaaa

  /** 代码分解 ***/
  var aa; // 只会声明一次的变量
  function aa () {}; // 变量别覆盖为 aa 字面量函数
  console.log(aa); // function aa () {} 输出字面量函数
  aa = 'aaaa'; // aa 重新被覆盖为 'aaaa'
  console.log(aa); // aaaa 输出后的覆盖值
复制代码

其实我们可以通过chrome浏览器调试效果大致如下图所示：

到这里就大致知道变量提升、函数提升它们的大致过程和它们之间的优先级。下面我们来说一下它们和块级作用域和函数作用域的关系。

作用域

在ES6出现之后作用域变得很复杂，有太多种了，这里只说和本篇文章相关的几种作用域。我们只看全局作用域、词法作用域、块级作用域、函数作用域这四种作用域。 全局作用域基本上没什么好说的，上面的样例基本上都是全局作用域，这里就不做多的赘述。

词法作用域/函数作用域

词法作用域：函数在定义它们的作用域里运行，而不是在执行它们的作用域里运行。 我们直接通过一个例子来分析一下：

在有作用域时，我们来看一下函数声明的表现，还是通过一个实例来分析一下，代码如下：

  console.log(aa); // 如果直接输入 会报错 VM1778:1 Uncaught ReferenceError: a is not defined
复制代码

下面修改代码来分析在函数作用域中函数声明的特殊表现。

  console.log(aa); // undefined
  var aa = 'aaaa';
  console.log(aa); // aaaa
  function test () {
    console.log(aa); // undefined
    var aa = 'bbbb';
    console.log(aa);  // bbbb
  }
  test();

  /** 代码分解 ***/
  var aa;
  console.log(aa); // undefined
  aa = 'aaaa';
  console.log(aa); // aaaa
  function test () {
    var aa;
    console.log(aa); // undefined
    aa = 'bbbb';
    console.log(aa);  // bbbb
  }
  test();
复制代码

全局声明了一个名字叫做aa的变量，它被提升全局域的顶部声明，而在test函数中我们又声明了一个变量aa,这个变量在当前函数作用的顶部声明。在函数的执行的阶段，变量的读取都是就近原则，先从当先的活动对象或作用域查找，如果没有才会从全局对象或全局作用域查找。

稍微加大一点难度，修改代码如下：

  console.log(aa); // undefined
  var aa = 'aaaa';
  console.log(aa); // aaaa
  function test () {
    console.log(aa); // aaaa
    aa = 'bbbb';
    console.log(aa);  // bbbb
  }
  test();

  /** 代码分解 ***/
  var aa;
  console.log(aa); // undefined
  aa = 'aaaa';
  console.log(aa); // aaaa
  function test () {
    console.log(aa); // aaaa
    aa = 'bbbb';
    console.log(aa);  // bbbb
  }
  test();
复制代码

我们把test函数内部的var aa = 'bbbb'修改为aa = bbbb，这样就不存在变量提升只是一个简单变量覆盖赋值。

块级作用域

在ES6中新增了块级作用域，我们可以通过let/const来创建块级作用域，只能在当前块中访问通过let/const声明的变量。 我们简单的了解一下let和块级作用域，请看下方的代码：

  if (true) {
    // console.log(aa); // VM439541:1 Uncaught SyntaxError: Identifier 'aa' has already been declared
    let aa = 'aaa';
  }
  console.log(aa); // VM439096:4 Uncaught ReferenceError: aa is not defined
复制代码

在if条件语句内部通过let aa = 'aaa'中的let关键字创建了一个块级作用域，所以我们在外面不能访问aa变量。

  console.log(aa); // VM440010:1 Uncaught ReferenceError: aa is not defined
  let aa = 'aaa';
复制代码

let声明的变量同时存在DTZ(暂时性死区)，在let声明变量之前使用这个变量，会触发DTZ(暂时性死区)报错。

  let aa = 'aaa';
  let aa = 'aaa';
  // Uncaught SyntaxError: Identifier 'aa' has already been declared
复制代码

let不能多次声明同一个变量，不然会报错。

if判断/try-cache

if(){}/try-cache(){}它们算一个作用域吗？我们通过下面的例子一步一步的分析它们，我们以if为分析样例请看代码：

  console.log(aa) // undefined
  if (true) {
    var aa = 10;
  }
  console.log(aa); // 10

  /**代码分析**/
  var a;
  console.log(aa); // undefined
  if (true) {
    aa = 10;
  }
  console.log(aa); // 10
复制代码

在变量提升时if是不存在作用域的，它的作用域就是全局作用域。那如果是函数提升呢？if会存在作用域吗？ 通过下面这个实例我们大概会了解函数提升和if的关系：

  console.log(aa); // undefined
  if (true) {
    console.log(aa); // function aa () {}
    function aa () {};
    console.log(aa); //function aa () {}
  }

  /**代码分析**/
  var aa;
  console.log(aa); // undefined
  if (true) {
    function aa () {};
    console.log(aa); // function aa () {}
    console.log(aa); //function aa () {}
  }
复制代码

我们通过这个可以看到当前执行的结果和上面所描述的函数提升表现并不一致，它只是提升了aa的声明，赋值只是发生在if内部的，这也是函数提升在if中特异的表现。再来一个更特异的if和函数提升。

  var aa = 'aaaa';
  if (true) { // **** 执行序号 5
    console.log(aa); // **** 执行序号 6
    aa = 1; // **** 执行序号 7
    function aa () {} // **** 执行序号 8
    console.log(aa);
  }
  console.log(aa);
  /**代码分析 执行顺序**/
  var aa;
  aa = 'aaaa';
  if (true) {
    function aa () {}
    console.log(aa); // function aa () {}
    aa = 1;
    // function aa () {} 再执行一遍
    console.log(aa); // 1
  }
  console.log(aa); // 1 ?这个确定对？
复制代码

我们主要观察if内部的aa = 1; function aa () {}的顺序，在当前代码中第二个console.log(aa)会输出一个1，如果我们把aa = 1; function aa () {}改为function aa () {}; aa = 1; 它外部的console.log(aa)就会变化，看代码：

  var aa = 'aaaa';
  if (true) { // **** 执行序号 1
    console.log(aa); // function aa () {} **** 执行序号 2
    function aa () {} // **** 执行序号 3
    aa = 1； // **** 执行序号 4
    console.log(aa); // 1
  }
  console.log(aa); // function aa () {}

  /**代码分析 执行顺序**/
  var aa;
  aa = 'aaaa';
  if (true) {
    function aa () {}
    console.log(aa); // function aa () {}
    // function aa () {} 再执行一遍
    aa = 1;
    console.log(aa); // 1
  }
  console.log(aa); // function aa () {} ?这个确定对？
复制代码

如果是按上面分析的代码执行顺序是相同的，但是为什么结果不太相同，这种资料不太好找，我们直接上代码去chrome中调试一下代码就一清二楚了，大致调试过程如下：

function aa () {}; aa = 1;执行过程

1. 执行序号1时： 进入if内部执行，在scope中会多出来一个block，也就是在作用域链中会多出来一个block，这个作用域中有aa = function aa () {}。如下图所示：

   这个时候block是function aa() {}而全局的window.aa现在还是aaaa

2. 执行序号2时： 执行console.log(aa),这个只是一个输出语法并不会改变变量的值,执行效果没有变。

3. 执行序号3时: 执行function aa() {}, 我们可以看到block和全局作用域的aa变量都改变为function aa () {}，如下图所示：

4. 执行序号4时: 它会执行的代码aa = 1，这个时候根据作用域链的规则，就近获取和修改变量。所以block内的aa = 1,而全局变量window.aa = function aa () {} 如下图所示：

   aa = 1; function aa () {};执行过程

5. 执行序号5时： 进入if内部执行，在scope中会多出来一个block，也就是在作用域链中会多出来一个block，这个作用域中有aa = function aa () {}。如下图所示：

   这个时候block是function aa() {}而全局的window.aa现在还是aaaa

6. 执行序号6时： 执行console.log(aa),这个只是一个输出语法并不会改变变量的值,执行效果没有变。

7. 执行序号7时: 执行aa = 1, 我们可以看到block作用域的变量aa被赋值为了1，而全局作用域中的变量aa还是aaaa。如下图所示：

8. 执行序号8时: 它会执行的代码function aa() {}，当前代码执行完成时，我们会发现全局作用域中的变量aa也被赋值为1. 如下图所示：

   aa = 1;执行过程 当没有function aa () {};函数声明时，我们会发现不会产生一个临时的block作用域，也不会存在奇特的现象。

综合上面三个实例中我们可以得出以下的结论：

• 在if内部包含了函数声明会在内部产生一个block作用域，在不包含时不会产生block作用域。
• 在当前if外部存在和函数声明相同的变量名称时，当执行到函数声明时同时会更新外部函数作用域or全局作用域中变量的值，只更新当前执行的这一次。

我们再来一个例子来证明我们得到的结论，例子如下：

  function test () {
    // debugger
    var aa = 'aaaa';
    if (true) {
      console.log(aa); // 个 ƒ aa () {}
      aa = 1;
      function aa () {}
      console.log(aa); // 第二个 1
    }
    console.log(aa); // 第三个 1
  }
  test()
  console.log(aa) // 第四个 VM5607:13 Uncaught ReferenceError: aa is not defined
复制代码

• 个console.log(aa)会输出ƒ aa () {}，因为函数声明的提升和赋值都会放到if的内部。同时会产生一个block作用域。
• 第二个console.log(aa)会输出if内部中的aa = 1，因为a = 1会把if产生的block作用域中的变量aa修改为了1。
• 第三个console.log(aa)会输出test函数作用域中的aa = 1，因为在执行function aa () {}是都会更新外部变量aa的值为1，也就是test函数作用域中的aa = 1;
• 第四个console.log(aa)会输出全局作用域中的aa，因为从来没有声明过全局变量aa所以会报错，is not defined。

来两道题

来两道题加深一下印象。

道题

var a = function() {
  console.log(1);
};
var a = function() {
  console.log(2);
};
var a;
console.log(a);
a = 1;
console.log(a);
a = 2;
console.log(a);
console.log(typeof a);
复制代码

如果只能答出来就没有必要看了。

如果变量提升遇到函数提升，那个优先级更高呢，看下面的代码。

console.log(a); // function a () {console.log(1);}
var a = 1;
function a() {
  console.log(1);
}
console.log(a); // 1
复制代码

看上面的代码知道函数提升是高于变量提升的，因为在 javascript 中函数是一等公民，并且不会被变量声明覆盖，但是会被变量赋值覆盖。其实代码如下

var a = function() {
  console.log(1);
};
var a;
console.log(a); // function a () {console.log(1);}
a = 1;
console.log(a); // 1
复制代码

我们再来一个稍微复杂一点的，代码如下：

console.log(a); // function a () {console.log(2);}
var a = 1;
function a() {
  console.log(1);
}
console.log(a); // 1
var a = 2;
function a() {
  console.log(2);
}
console.log(a); // 2
console.log(typeof a); // number
复制代码

在多次函数提升的会后一个覆盖前一个，然后才是变量提升，其实代码如下：

var a = function() {
  console.log(1);
};
var a = function() {
  console.log(2);
};
var a;
console.log(a); // function a () {console.log(2);}
a = 1;
console.log(a); // 1
a = 2;
console.log(a); // 2
console.log(typeof a); // number
复制代码

第二道题

第二道题会比道题难一点点，代码如下：

  console.log(aa);
  var aa = 'aaa';
  if (true) {
    console.log(aa);
    aa = 1;
    function aa () {}
    aa = 2;
    console.log(aa);
  }
  console.log(aa);
复制代码

如果上面的内容看懂了，大概这个题就会感觉很简单，大致过程如下：

• 个console.log(aa)会输出全局作用域中的aa值为undefined，因为var aa = 'aaa'会产生变量提升，会把var aa;放到全局作用域中的顶端，所以会输出undefined。
• 第二个console.log(aa)会输出if内部中的aa = ƒ aa () {}，if内部执行产生block作用域，并且block作用域内部的ƒ aa () {}被提升到顶部，所以会输出ƒ aa () {}。
• 第三个console.log(aa)会输出block作用域中的aa = 2，因为在执行function aa () {}是都会更新外部变量aa的值为1，也就是全局作用域中的aa = 1;
• 第四个console.log(aa)会输出全局作用域中的aa，因为在上一步中我们知道了全局作用域中的aa = 1，所以会输出1。

  undefined
  ƒ aa () {}
  2
  1
复制代码

到此结束JavaScript中的变量提升，如果发现本篇文章没有涉及的变量提升的知识点和错误的地方，请大家多多指正、探讨。