JavaScript变量提升和函数提升

1.什么是函数声明和函数表达式
1)函数声明(function declaration),通过function 关键字,functionName函数名,arg参数(可选)定义的函数。
例:function foo(a){…}
2)函数表达式: 将函数声明赋值给一个变量,这个表达式叫做函数表达式。
例:匿名函数表达式:var res = function(){…},函数是匿名函数。
具名函数表达式:var res1 = function foo(){…},函数有函数名的表达式。
2.什么是提升?
通常js引擎会在正式执行之前进行一次预编译,在这个过程中,会将函数声明以及变量声明提升至作用于的顶端,并且赋值undefined,这个过程叫过提升。
先来看两个栗子,下面的两段代码分别输出什么?
代码1:
function foo() {
var a = 1;
function a() {
}
console.log(a);
}
foo();
代码2:
function foo() {
var a;
function a() {
}
console.log(a);
}
foo();
答案是:代码1打印的是1,代码段2打印的是 a() 函数。

为什么呢?其实就是涉及到了js中的变量提升和函数提升的具体过程了。
(1)变量提升:
js是怎么创建变量的呢?
如下面的代码:
var a = 1;
var b = 2;
js在解析上面的代码的时候,其实会按照下面的方式进行解析的:
var a;
var b;
a = 1;
b = 2;
所以 js 并不是在我们定义一个变量的时候,声明完成之后立即赋值,而是把所有用到的变量全部声明之后,再到变量的定义的地方进行赋值,变量的声明的过程就是变量的提升。
function foo() {
var a = 1;
console.log(a);
console.log(b);
var b = 2;
}
foo();
上面的代码在js的眼中是这样解析的:
function foo() {
var a;
var b;
a = 1;
console.log(a); // 1
console.log(b); // undefined
b = 2;
}
foo();
所以输出的 a 的值为1, b的值为 undefined。
变量在声明提升的时候,是全部提升到作用域的最前面,一个接着一个的。但是在变量赋值的时候就不是一个接着一个赋值了,而是赋值的位置在变量原本定义的位置。原本js定义变量的地方,在js运行到这里的时候,才会进行赋值操作,而没有运行到的变量,不会进行赋值操作。
所以变量的提升,提升的其实是变量的声明,而不是变量的赋值。
(2)函数提升
函数的提升和变量的提升类似,都是提升到作用域的最开始的位置,只不过变量的提升是分两步的,第一步是变量声明的提升,第二步是变量的赋值。而函数的提升是直接将整个函数整体提升到作用域的最开始位置,相当于剪切过去的样子。
1)函数声明
function foo() {
foo();
function foo1() {
console.log(‘hello world‘);
}
}
foo();
上面的代码预编译之后:
function foo() {
function foo1() {
console.log(‘hello world‘);
}
foo1();
}
foo();
2)函数表达式
当函数声明遇到函数表达式时,会有什么样的结果呢,先看下面这段代码:
function demo() {
foo(); // 2
var foo = function() {
console.log(1);
};
foo(); // 1
function foo() {
console.log(2);
}
foo(); // 1
}
demo();
运行后我们会发现,输出的结果依次是2 1 1.
因为在js中函数是一等公民,函数声明的优先级最高,会被提升至当前作用域的最顶端,然后才是函数表达式和变量按顺序执行,所以第一次调用实际上执行了下面定义的函数声明,而第二次调用时,由于前面的函数表达式与之前的函数声明同名,故将其覆盖,以后的调用也是同样的结果, 上面的过程预编译之后的逻辑如下:
function demo() {
var foo;
foo = function foo() {
console.log(2);
}
foo(); // 2
foo = function() {
console.log(1);
};
foo(); // 1
foo(); // 1
}
demo();
3、变量提升和函数提升的顺序
在作用域中,不管是变量还是函数,都会提升到作用域最开始的位置,不同的是,函数的提升后的位置是在变量提升后的位置之后的。
举个例子:
下面的代码输出什么?
function foo() {
console.log(a);
var a = 1;
console.log(a);
function a() {}
console.log(a);
}
foo();
上面的代码在js眼中是这样解析的:
function foo() {
var a;
function a() {}
console.log(a); // a()
a = 1;
console.log(a); // 1
console.log(a); // 1
}
foo();
所以从上面的栗子可以看到,变量的提升是在函数提升之前的,但是变量赋值的部分是在js原型到变量定义的位置才给变量赋值的,而函数提升是相当于直接剪切到最前面的。

最后,注意:只有声明的变量和函数才会进行提升,隐式全局变量不会提升。
下面的栗子中,b不会进行变量提升。
function foo() {
console.log(a);
console.log(b); // 报错
b = ‘aaa’;
var a = ‘bbb’;
console.log(a);
console.log(b);
}
foo();
总结:函数声明的优先级最高,会被提升至当前作用域的最顶端,然后才是函数表达式和变量按顺序执行!!!

发布了2 篇原创文章 · 获赞 0 · 访问量 46

猜你喜欢

转载自blog.csdn.net/wangshuo0520ai/article/details/104595454