博客地址：提升机制

一次群里的讨论引发的思考

问题：以下代码会输出什么？

var getName = function() {
  console.log(1)
}
function getName() {
  console.log(2)
}
getName()

开始我以为会是2，因为后面的代码会覆盖前面的，但是答案往往会偏离我们的想法ε=(´ο｀*)))唉。看了群里的大神提了一句：函数提升优于变量，开始思考提升机制。

函数提升优于变量提升

这句话没毛病，红皮书111页说道：解析器在向执行环境中加载数据时会率先读取函数声明，并使其在执行任何代码之前可用(可访问)，即函数声明提升、JavaScript上卷中第40页提到函数声明是优于变量提升的。可见代码

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

输出为函数getName

问题升级

先来看代码：

/* 
* 函数声明优于变量声明
* 函数表达式会将变量提升，但是代码在执行的时候才会被赋值
*/
test();
console.log(test);
function test() {
  console.log('我是函数');
}
console.log(test);
var test = '我是变量';
console.log(test);
var test = function (params) {
  console.log('我是函数表达式');
}
console.log(test);
test();

这次，我加入了函数表达式，结果如下：

解释：函数声明优于变量声明，所以第一个console.log(test)会输出函数test(),test()输出'我是函数'。而变量只有当代码执行到该语句的时候才会被赋值并且覆盖内存。所以第三个console.log(test)输出的是变量'我是变量'。最后函数表达式又覆盖了前面的代码，所以最后一个console.log(test)输出函数表达式test()，test()输出'我是函数表达式'。

再升一级

这次，我把代码顺序调换一下

test();
console.log(test);
var test = '我是变量';
console.log(test);
var test = function (params) {
  console.log('我是函数表达式');
}
console.log(test);
function test() {
  console.log('我是函数');
}
console.log(test);
test();

结果如下：

这次我将函数声明放到了最下面，但是却没有最后一次执行test()输出的却是我是函数表达式。解释：函数在提升的时候解析器就已经解析过一遍了，代码执行到函数这里不会再次解析也就不会再次赋值。因此就不会出现覆盖前面代码这一说。

注意：不要学了一点就忘记别的了啊，如果两个函数名一样，后面的会覆盖前面的(认为是在函数解析的时候覆盖，即提升的时候就覆盖了)

console.log(test);
function test() {
  console.log('我是函数');
}
console.log(test);
function test() {
  console.log('我是函数表达式');
}
console.log(test);
test();

结果：

望指正