概念
首先,看这篇文章之前确保你已经理解了js作用域。其次要补充,js在运行的时候,会优先加载当前作用域下的变量。在这个基础上再理解变量提升和函数提升。
变量提升的意思是,按照正常流程,一个变量只有在使用前定义才不会报错,但是JS机制里面有对这样变量推迟定义的情况的特殊对待。
//下面这样写是情况正常 会弹1
function test(){
var a = 1;
alert(a);
}
test();
//下面这样写会报错 Uncaught ReferenceError: a is not defined(…)
function test(){
alert(a);
}
test();
//下面这样写会弹出undefined
function test(){
alert(a);
var a = 1;
}
test();
第三个情况并没有像第二种那样,直接报错,而是也执行了弹窗那句话,为什么呢?说明在他眼里a已经是个变量了,这时候应该能对变量提升有些感觉了,刚才这个例子是局部变量提升。
局部变量提升
局部变量提升的意思是,js在其作用域内,会将所有变量声明提前,注意,只是声明提前,赋值并没有提前,像刚才第三个函数那样的情况就是局部变量提升,这个函数在js看来就相当于下面这么写
function test(){
var a;
alert(a);
a=1;
}
这样写就清晰了很多,alert();这个函数能执行,而不是报错,因为a这时候已经声明了,是个变量,但是a的
赋值确是在下面,所以他弹出的是undefined,有a并且a没有值。
全局变量提升
var a;
function test(){
alert(a);
a=1;
}
test();
alert(a);
看上面你这个例子,假如你这么写,两次弹窗分别弹出,undefined,1,第二次的alert()是再全局下执行的,所以在函数中的 a=1;其实被定义到了全局变量,这就是全局变量提升,但是下面这么写你就会看出不同。
function test(){
alert(a);
a=1;
}
test();
alert(a);
把第一行的var a;去掉,函数指定到test中的alert();的时候就会报错,说a没有定义,这说明什么呢,说明下面这句a=1其实并不是等价于将a的声明提前,所以全局变量提升,也不能叫做变量提升,他其实只是全局变量的另一种定义方式,当运行到a=1这一句的时候,直接定义一个全局变量 var window.a = 1;
函数提升
除了变量的提升还有函数的提升,先看例子
function test(){
alert(1);
}
test();//1
这个情况能弹1
test();//1
function test(){
alert(1);
}
这个也能弹1,为什么呢,再看
var test = function(){
alert(1);
}
test();
这样也能弹1
test();
var test = function(){
alert(1);
}
这样就报错了,说test没有定义,现在看看有哪些不同呢,前面的写法是function test(){...},后面是var test = function(){...}
而第一种写法,就算写到了下面,函数也能执行,这就是函数的提升,函数提升与变量提升不同的是,他不仅提升了函数,连函数体也一起提升了,所以这些function test(){...}都相当于在函数头部定义了一个 var test = function(){.....}。这里又牵扯到一个概念,叫函数声明和函数表达式。我不太了解,这个逼先不装啦。
总结
这样,函数提升的概念就比较清楚了,下面是一篇网上找的参考文章,但是里面的有些概念将的个人觉得不严谨,比如谁的优先级高这个问题,说的不严谨,可以自己看看,思考一下。下面再写一个里面看到的我还解释不了的问题。
B = 100;
function B(){
B = 2;
console.log(B);
}
console.log(B);
B();
这个函数的执行结果是先打印100,再提示B不是一个函数。换个写法
B = 100;
var B = function (){
B = 2;
console.log(B);
}
console.log(B);
B();
这个函数的执行结果是先打印B这个函数,在打印2,也就是说,第一种写法,function B(){...}的提升根本没有覆盖掉B=100,那么这是什么问题呢?还是说只有在B没有定义的时候才能提升函数体?欢迎思考评论与我讨论。