1. 犀牛前端部落首页
  2. Javascript百科

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

之前的一篇文章,俺跟大家讨论了变量提升。函数声明也会类似变量一样提升。但是有一个特别需要注意的细节点。那就是函数会被首先提升,然后才是变量。

今天俺就跟大家一起来学习函数优先原则。如果大家对变量提升还不是很懂的话可以看我之前的文章《变量声明提升》 。

先看一下这个代码:

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)
 }

 

原创文章,作者:犀牛前端部落,如若转载,请注明出处:https://www.pipipi.net/978.html

发表评论

登录后才能评论