变量提升/函数提升
很多人在初学JS接触到变量,函数的时候,总会碰到一个很棘手的问题----变量/函数提升.
变量提升,顾名思义,就是把定义在后面的变量或者函数,提升到前面来使用.
然而变量提升之所以存在疑点,是因为它涉及到了作用域(scoping)的问题.所以在讲变量/函数提升之前,我们先来研究一下作用域的问题.
JavaScript的scoping如此复杂的原因是它看上去非常像C系语言的成员。我们首先来看一段C程序
#include
int main() {
int x = 1;
printf("%d, ", x); // 1
if (1) {
int x = 2;
printf("%d, ", x); // 2
}
printf("%d\n", x); // 1
} 这段代码的返回结果是1,2,1. 这是因为在C系语言有块级作用域(block-level scope),当进入到一个块时，就像if语句，在这个块级作用域中声明的新的变量，这些变量不会影响到外部作用域。但是JavaScript却不是这样。
var x = 1;
console.log(x); // 1
if (true) {
var x = 2;
console.log(x); //2
}
console.log(x);// 2 那么接下来,我们就可以深入的理解一下到底变量/函数提升是怎么一回事了
1.变量提升
变量提升,简单来说,就是把变量提升到一块作用域当中(或者说一个函数)顶端的位置,需要注意的是,变量提升,只是提升变量的声明,并不会将变量的赋值一同提升上来.
比如下面一段代码
(function(){
var a='One';
var b='Two';
var c='Three';
})()
(function(){
var a,b,c;
a='One';
b='Two';
c='Three';
})() 那么我们来看接下来一段代码,分析看看,这段代码的结果到底应该是什么呢?
var v='abc';
alert(v);//①abc
(function(){
alert(v);//②undefined
var v='123';
alert(v);//③123
})()
alert(v);//④abc每一个结果都标注好了,有的朋友会问了,怎么会有一个undefined?
这段代码用一个函数划定了两个作用域,一个是全局,另外一个是函数内,①和④都被划定在函数外,并不受函数内的定义变量影响,故返回结果都是'abc',而函数内的返回结果,相信你看了下面这个代码段就清楚是怎么一回事了.
(function(){
var v;
alert(v);//②undefined
v='123';
alert(v);//③123
})()怎么样?不需要再过多的解释,我相信大家看到这里一定都明白了!
2.函数提升
在我们写js 代码的时候，我们有两种写法，一种是函数表达式，另外一种是函数声明方式。
函数表达式 var fn=function fn(){}
函数声明方式 function fn(){code}
我们需要重点注意的是，只有函数声明形式才能被提升。
变量赋值并没有被提升，只是声明被提升了。但是，函数的声明有点不一样，函数体也会一同被提升
函数提升是把整个函数都提到前面去。
接下来我们看两段代码
(function test3() {
fn();
function fn() {
console.log("我来自fn test3");
}
}) ()
function test4() {
fn();// fn is not a function
var fn = function fn() {
console.log("我来自 fn test4");
}
fn();
}
test4();
这就是变量/函数提升的全部内容了.如果你有问题,或者还有更好的见解,欢迎评论交流!