JavaScript 代码提升机制

问题：以下代码会输出什么？
1
2
3
4
5
6
7
var getName = function() {
console.log(1)
}
function getName() {
console.log(2)
}
getName()
  
开始我以为会是2，因为后面的代码会覆盖前面的，但是答案往往会偏离我们的想法ε=(´ο｀*)))唉。看了群里的大神提了一句：函数提升 优于变量，开始思考提升机制。

函数提升优于变量提升

这句话没毛病，红皮书111页说道：解析器在向执行环境中加载数据时会率先读取函数声明，并使其在执行任何代码之前可用(可访问)，即函数声明提升、JavaScript上卷中第40页提到函数声明是优于变量提升的。可见代码
1
2
3
4
5
console.log(getName)
var getName = 1;
function getName() {
console.log(2)
}
输出为函数getName,代码等价于
1
2
3
4
5
function getName() {
console.log(2)
}
console.log(getName);
getName = 1;

问题升级

先来看代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/*
* 函数声明优于变量声明
* 函数表达式会将变量提升，但是代码在执行的时候才会被赋值
*/
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()输出’我是函数表达式’。代码等价于
1
2
3
4
5
6
7
8
9
10
11
12
13
function test() {
console.log('我是函数');
}
test();// 第一次调用
console.log(test); // 第一次console.log
console.log(test); // 第二次console.log
test = '我是变量';
console.log(test);
test = function (params) {
console.log('我是函数表达式');
}
console.log(test);
test();
      
如果活动对象上已经存在属性名称，解析器就会绕过该声明。即因为函数声明优先于变量声明，因此活动对象(window)不会再注册一个test了。

再升一级

这次，我把代码顺序调换一下
1
2
3
4
5
6
7
8
9
10
11
12
13
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()输出的却是我是函数表达式。解释：函数在提升的时候解析器就已经解析过一遍了，代码执行到函数这里不会再次解析也就不会再次赋值。因此就不会出现覆盖前面代码这一说。代码等价于
1
2
3
4
5
6
7
8
9
10
11
12
13
function test() {
console.log('我是函数');
}
test();
console.log(test);
test = '我是变量';
console.log(test);
test = function (params) {
console.log('我是函数表达式');
}
console.log(test);
console.log(test);
test();
      
注意：不要学了一点就忘记别的了啊，如果两个函数名一样，后面的会覆盖前面的(认为是在函数解析的时候覆盖，即提升的时候就覆盖了)
1
2
3
4
5
6
7
8
9
10
console.log(test);
function test() {
console.log('我是函数');
}
console.log(test);
function test() {
console.log('我是函数表达式');
}
console.log(test);
test();
      
 

 

结果：
 
posted @ 2020-12-29 18:31  李不懂。  阅读(99)  评论(0)    收藏  举报