你不知道的js函数提升

今天我们来聊聊js的函数提升！！！！

情况一

先来看的例子

foo();
function foo() {
console.log(“foo”);
}

这个我们应该很容易看出来，结果是"foo"，因为这是一个函数声明，函数声明在执行的时候会被提升，所以在调用之前就会被声明。所以可以写成下面这样

function foo() {
console.log(“foo”);
}
foo();

情况二

foo();
var foo = function fun() {
    console.log("fun");
};

这又会是什么结果呢？

这会提示foo不是一个函数，这有数为什么呢，不是说函数会被提升吗？？在这段程序中，这个函数是以函数表达式的形式出现，这里提升的其实是变量foo，我们改写下

var foo；
foo();
foo = function fun() {
    console.log("fun");
};

这就好理解了。

情况三

foo(); 
fun(); 
var foo = function fun() {
console.log("fun");
};

现在就有点难度了，这会出现什么结果呢？可能第一次会想到，foo()会报错，fun()可以正常执行打印出"fun",其实不然，我们看看结果

这又是为什么呢？我们改写下

var foo;
foo(); 
fun(); 
foo = function fun() {
  var bar = ...self...
  console.log("fun")
  console.log(bar)//[Function: bar]
}

这里我们打印下bar,他出现的是[Function: bar]它等于它自己

情况四

foo(); 
var foo;
function foo() {
console.log("1");
}
foo = function() {
console.log("2");
};

这里函数名和变量名同名，这时代码又会怎样执行呢？？这里我们要注意一个细节，如果函数名和变量名重名，是函数会首先被提升，然后才是变量。所以foo()执行会打印"1",这里我们也可以改写

function foo() {
console.log("1");
}
foo(); 
foo = function() {
console.log("2");
};

这里还要注意一点 var foo 尽管出现在 function foo()… 的声明之前，但它是重复的声明（因此被忽略了），因为函数声明会被提升到普通变量之前。