阅读 2264

函数声明与变量声明的提升机制优先级问题

博客地址:提升机制

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

问题:以下代码会输出什么?

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();
复制代码

结果:

望指正

文章分类
前端
文章标签