Javascript基础：函数声明和变量声明提升之注意点函数优先

原创

IT工作者

发布于 2022-01-26 11:03:06

9610

先看一下这个代码：

foo(); //2019
var foo;
function foo() {
   console.log(2019);
}
foo = function () {
   console.log(2020);
}

上面的代码会输出2019，而不是2020。新手同学们肯定会疑惑，为什么没有输出2020呢，因为2020赋值的那条语句是表达式而不是函数声明，因此不会被提升。

所以上面的代码实际上会被引擎认为是以下代码：

function foo () {
  console.log( 2019 );
}
foo( );
foo = function( ){
console.log(2020);
}

虽然这个道理看起来好像是没什么用一样，但是有的时候有些人写的代码出了一些奇怪的bug，如果我们不知道这个知识，那就很难解决这个问题了。

下面俺再跟大家一起看一下另外一个经典案例：

var f = true;
foo();//b
if(f){
  function foo(){console.log('a');}
}else{
  function foo(){console.log('b');}
}

这个案例代码，俺在最新版本的google上面测试已经跑不通了，俺看的是《你不知道的Javascript（上卷）》，看来这个问题以及被Javascript修复了哈~

书中提到了Javascript未来版本可能会发生改变。

但是这个问题想告诉大家的是函数声明会被提升，另外后面的函数声明还会覆盖前面的函数声明的。

例如下面的代码就会输出3，因为中间的是表达式不会提升，而第三个函数声明覆盖了第一个，因此输出3。

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

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

登录后参与评论

0 条评论

热度