变量提升

138 阅读1分钟

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

测试题

  1. ` var a = 1 function fun(){ console.log(a); var a = 2; } fun() //输出结果为 undefined

    f2() function f2(){ console.log(f2) } //由于函数提升 可以执行 `