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