搞懂JS变量提高

本文讲解Javascript变量提高引发的问题以及如何规避。

问题

今天看到一道有意思的面试题，考察的还真是JS的基本功，题目以下：

var name = "world";

(function(){
  if(typeof name === "undefined") {
    var name = "Jack";
      console.log("Hello " + name);
  } else {
    console.log("Hello " + name);
  }
}());

根据if条件能够得出可能的答案：

• Hello world
• Hello Jack

正确答案

答案是Hello Jack，可是答案怎么来的，回答很差可能仍是只能打50分，有如下两种理解：

理解1：

当即执行函数有独立的做用域，访问不到外部name，因此if判断成立，输出 Hello Jack

这个理解是不正确的。虽然函数隔离了做用域，可是因为做用域链的关系，JS会从当前做用域一直往上级查找，直到顶级做用域（浏览器环境为window）。

以下代码输出Hello world

var name = "world";

(function(){
  console.log("Hello " + name);
}());

理解2：

var存在变量提高，因此if在判断的时候name确实为undefined，走了if分支，输出 Hello Jack

变量提高

MDN对变量提高的解释：

“变量提高”意味着变量和函数的声明会在物理层面移动到代码的最前面，但这么说并不许确。实际上变量和函数声明在代码里的位置是不会动的，而是在编译阶段被放入内存中。

• 敲黑板: JavaScript 仅提高声明，而不提高初始化
• 函数和变量相比，会被优先提高

根据变量提高理论咱们能够“模拟”JS实际执行代码的过程：

var name = "world";

(function(){
  var name; // 变量提高，仅提高声明，不提高初始化
  if(typeof name === "undefined") {
    name = "Jack";
    console.log("Hello " + name);
  } else {
    console.log("Hello " + name);
  }
}());

函数内部做用域顶级的name初始化时为undefined，因此会走if分支，输出Hello Jack。这才是100分答案！

规避变量提高问题

1. 在做用域的顶部定义变量
2. 使用ES6新语法let或const定义变量

技术参考

• 变量提高 - 术语表 | MDN