var变量提升的底层原理

328 阅读1分钟
原理:JS引擎的工作方式是先解析代码,获取所有被声明的变量,然后再运行,也就是专业和来说是分为预处理和执行两个阶段。
变量提升定义:所有变量的声明语句都会被提升到代码头部,这就是变量提升

例如:

console.log(a);//提示undefined

var a = 1;

以上不会报错,只是提示undefined,实际在js引擎中运行过程是:

var a;

console.log(a);

a = 1;

变量a已经声明,但未赋值。

注意:变量提升只针对var声明的变量(也有说法称:let、const声明的变量也会进行变量提升,但是会形成暂时性死区,所以在执行到赋值代码之前,访问变量就会报错)

console.log(b)

let b = 1;

以上代码会报错 ReferenceError: Cannot access 'b' before initialization

在js中,function可看做变量,也可以存在变量提升

a();

function a(){ console.log(1) }

表面来看,是a()先执行,但是由于变量提升,在js引擎中,函数a被定义的部分被提升到代码头部,也就是在调用前就已经声明了。

但是如果采用赋值语句定义函数,js就会报错:

a();

var a = function(){console.log(1)}

//TypeError: a is not a function

因为变量提升,a就是一个变量,而不是一个function,运行代码如下:

var a;

a();

a = function(){console.log(1)}