今天我们来聊聊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()… 的声明之前,但它是重复的声明(因此被忽略了),因为函数声明会被提升到普通变量之前。