我是靠谱客的博主 秀丽八宝粥,最近开发中收集的这篇文章主要介绍函数声明与变量声明的提升机制优先级问题,觉得挺不错的,现在分享给大家,希望可以做个参考。

概述

博客地址:提升机制

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

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

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

结果:

望指正

最后

以上就是秀丽八宝粥为你收集整理的函数声明与变量声明的提升机制优先级问题的全部内容,希望文章能够帮你解决函数声明与变量声明的提升机制优先级问题所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(64)

评论列表共有 0 条评论

立即
投稿
返回
顶部