深入理解js变量提升和函数提升
深入理解js的变量提升和函数提升
- 变量提升
在ES6之前,JavaScript没有块级作用域的概念(一对花括号{}即为一个块级作用域),只有全局作用域和函数作用域,变量提升即是将变量声明提升到它所在的作用域的最开始的部分。
意思即是:在我们的js中,代码的执行是分两步进行走的,1、预解析 2、一步一步执行
在预解析阶段,首先会在全局作用域内,js解析器会找到所有的var、function、参数,并提前到当前作用域的最顶上去(变量的赋值操作不会提前,还在原来的地方),此时并没有执行代码。然后再开始一行一行执行代码。遇到了函数调用,于是进入到函数作用域内,又开始分两步骤走,预解析 一步一步执行,以此类推。如例子:
console.log(global); //undifined
var global="222";
console.log(global); //222
f() {
console.log(a); //undifined
var a="111";
console.log(a); //111
}
f();
之所以会是以上打印的结果,是由于js的变量提升,实际上上面的代码是按照以下来执行的:
var global; //变量提升,全局作用域范围内,此时只是声明,并没有赋值
console.log(global); //undifined
var global="222"; //此时才进行赋值
console.log(global); //打印变量上面赋的值
f() {
var a;//先进行变量提升,函数作用域范围内
console.log(a); //undifined
var a="111";
console.log(a); //111
}
f();
- 函数提升
js中创建函数由两种方式,函数声明式和函数赋值式。注意:只有函数声明才会存在函数提升(如变量提升一样),如下:
console.log(f1); //function f1() {}
console.log(f2); //undifined
function f1() {} //函数声明式
var f2=function () {}//函数赋值式
之所以会有这样的输出结果,正是由于js中的函数提升起到了效果。
function f1() {} //函数提升,整个代码块提升到文件的最开始
console.log(f1);
var f2=function(){}