浅析JavaScript中的提高

JavaScript代码在执行时并不彻底是由上到下一行一行执行的，由此产生了一个提高的问题。

什么是提高

能够简单理解为：声明(变量和函数)都会被“移动”到各自做用域的最顶端,这个过程被称为提高。

具体例子看提高

下面两个例子a会log什么出来呢？

a = 233;
var a;
console.log(a)

console.log(a);
var a = 233;

“看起来”第一个例子应该log出undefined，第二个例子变量a在使用前没有先进行声明,所以会抛出ReferenceError异常。但实际上，第一个例子a输出233，第二个例子a输出undefined。

为何？

在知道为何以前有必要了解：JavaScript虽然是解释型语言，但在解释JavaScript代码以前首先对其进行编译的。编译阶段中的一部分工做就是找到全部的声明,并用合适的做用域将它们关联起来。

变量和函数在内的全部声明都会在任何代码被执行前首先被处理。

var a = 233;

上面的声明看起来是一个声明，而对于JavaScript而言实际上这是两个声明：var a;和a = 233;。第一个定义声明是在编译阶段进行的。第二个赋值声明会被留在原地等待执行阶段。

看回前面两个例子，第一个例子的代码会被这样处理：

var a;
a = 233;
console.log(a);

第二个例子：

var a;
console.log(a);
a = 233;

注意：只有声明自己会被提高,而赋值或其余运行逻辑会留在原地 。

函数声明与函数表达式

第一个例子：

foo();
function foo() {
  console.log(a); // undefined
  var a = 233;
}

函数foo能够正常执行。
第二个例子：

foo(); // TypeError
var foo = function bar() {
  // ...
}

报错：Uncaught TypeError: foo is not a function

由此能够看到：函数声明会被提高,可是函数表达式却不会被提高。
第三个例子：

foo(); // TypeError
bar(); // ReferenceError
var foo = function bar() {
  // ...
};

这段代码通过提高后,能够理解为如下形式:

var foo;
foo(); // TypeError
bar(); // ReferenceError
foo = function() {
  var bar = ...self...
  // ...
};

因而可知：具名的函数表达式,名称标识符在赋值以前也没法在所在做用域中使用。

函数优先

既然函数声明和变量声明都会被提高，那么问题来了，重复声明的代码中的优先级是怎样的，是函数声明被提高仍是变量声明被提高？
继续验证：

foo(); // 1
var foo;
function foo() {
  console.log( 1 );
}
foo = function() {
  console.log( 2 );
}

var foo尽管出如今 function foo()...的声明以前，但它是重复的声明而被忽略，由于函数声明会被提高到普通变量以前。能够得知：函数声明提高的优先权大于普通变量声明。

尽管重复的var声明会被忽略掉,但出如今后面的函数声明仍是能够覆盖前面的：

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

ES6中的变量声明

ES6新增了let、const声明，它们会存在一个暂时性死区（TDZ），表现出的状况会有所不一样，具体能够参考：let, const

总结

• var变量声明和函数声明存在提高
• 函数表达式不会被提高
• 函数声明提高的优先权大于普通变量声明
• let, const因为存在暂时性死区，表现出的状况和var声明有所不一样