谈谈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

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

你可能感兴趣的:(js分享)