JavaScript中声明过的变量提升往往会影响到我们对变量的正常获取。因此对其原理和各种情况进行分析。
变量提升发生在var声明 和function两种情况下
原理:
JS引擎的工作方式是首先解析代码,获取所有被声明的变量;然后在运行代码。也就是专业来说是分为预处理和执行两个阶段。
对var变量提升的说明
console.log(a); //undefined
var a = 1;
console.log(a); //直接报错 飘红了 Uncaught ReferenceError: a is not defined
a = 1;
上述例子是最简单能说明var的变量提升作用的,没有var 就不会有变量提升。实际第一段代码在js引擎中的运行过程可以视为:
var a;
console.log(a);
a = 1;
//函数1
function getColor(){
color = 'red';
return color;
}
var color = 'blue';
console.log(getColor()); //red
//函数2
function getColor(){
var color = 'red';
return color;
}
var color = 'blue';
console.log(getColor()); //red
函数1 : 在执行
color = 'red';之前 变量color 是 'blue'
函数2 : 变量查询的搜索过程中在局部环境找到之后就停止搜索,没找到才沿作用域链继续搜索。如果局部和全局存在同名标识符,不会使用父环境中的标识符。
function也存在变量提升情况
f1();
function f1(){
console.log(1111);
}
上述代码是可以正常运行的。
f1();
var f1 = function(){
console.log(1111);
}
//报错 Uncaught TypeError: f1 is not a function
f1();
f1 = function(){
console.log(1111);
}
//报错 Uncaught TypeError: f1 is not a function
测试题
-
` var a = 1 function fun(){ console.log(a); var a = 2; } fun() //输出结果为 undefined
f2() function f2(){ console.log(f2) } //由于函数提升 可以执行 `