谈谈js的变量提升

谈谈js的变量提升

所谓变量提升就是指在js代码的执行过程中，js引擎会把变量的声明部分和函数声明部分提升到代码开头的行为，变量被提升后会给变量设置默认值undefined。

下面举个例子：

paly();
console.log(name);
var name="zhangsan";
function paly(){
     
	console.log("this is paly");
}
//将代码拆分成声明和执行部分
//-------声明-----------
var name=undefined;
function paly(){
     
	console.log("this is paly");
}

//-------执行部分--------
paly();
console.log(name);
name="zhangsan";

这样就明白了为什么可以在定义之前使用变量或者函数，因为他们在执行之前就已经提升到代码开头。

js引擎的编译阶段

变量的提升归根结底还是由于js引擎对js代码的处理，对于一段js代码，js引擎首先会对代码进行编译，然后再是执行，这里我们着重讲一下编译阶段。

我们的js代码在经过编译之后会生成两部分内容:执行上下文和可执行代码，执行上下文是js执行一段代码时的运行环境，比如调用一个函数，就会进入这个函数的执行上下文，它里面保存的内容有this、作用域链、变量环境等，这里的变量环境就保存着我们变量提升的内容，对于上面的代码，它大致的结构如下：

VariableEnvironment:
	name=undefined;
	paly=function :{
     console.log("this is paly")}

这样我们就明了了，在编译阶段js引擎会将提前声明的变量和函数声明保存到变量环境中，然后在执行阶段再去给我们的变量赋值。执行完代码后结果如下：

VariableEnvironment:
	name="zhangsan";
	paly=function :{
     console.log("this is paly")}

变量和函数的优先级

对于变量和变量来说或者函数和函数来说，如果他们存在同名，此时后面声明的会将前面声明的覆盖掉，这个好容易理解，但是如果变量声明和函数声明同名呢？

function a(){
     
	console.log("r23")
}
var a;
console.log(a);//[Function: a]
a="fre";
console.log(a);//fre

从这个例子可以看出，函数声明的优先级要比变量高，这里要注意是函数声明不是函数表达式，所以我们最终可以得出结论： 函数提升要比变量提升的优先级要高一些，且不会被变量声明覆盖，但是会被变量赋值之后覆盖