javascript 变量提升相关

发表于 | 更新于: | 分类于 | | 阅读次数:

什么是变量提升？

变量提升：把变量声明提升到当前执行环境的最顶端。按照js代码解析原则，js引擎在读取js代码时分两个步骤，第一个步骤是解释，第二个步骤是执行。所谓解释就是会先通篇扫描所有的Js代码，然后把所有声明提升到顶端；而执行就是操作一类的，依次执行解释完的代码。

变量提升大致可分为两类：

  • var 声明的变量的提升。只将变量声明语句提升至当前执行环境的顶端，初始化语句（若有）则依然处于原位置不动。
  • function 声明的函数的提升。将整个函数声明语句块提升至当前执行环境顶端，同时函数在声明时就已经将函数名初始化了。若有多个，则依次往下排，即先声明的位于最前。

回顾

  • 一个变量的整个生命周期有三个阶段，声明阶段，初始化阶段，赋值阶段。只声明而未初始化的变量，其值默认为“undefined”。
1
2
3
var text;
text+="你好";
alert(text);  //"undefined你好"
  • 没经 var 声明，而直接初始化，会定义一个全局变量。
  • 注意，以表达式形式创建的函数没有提升作用。

实例分析

下面通过一些实例来了解一下吧。

  • 例子1 关于下面代码：
1
2
3
4
5
(function(){
    console.log(typeof a); //"function"
    var a = 1;
    function a(){};
})();

被javascript执行引擎解释后的形态，等同于这个：

1
2
3
4
5
6
7
(function() {
    var a;
    function a() {
    }
    console.log(typeof a); //"function"
    a = 1;
})();
  • 例子2 关于下面代码：
1
2
3
4
5
6
(function(){
	console.log(typeof a); //function 
	var a = 1;
    function a(){};
    console.log(typeof a); //number
})();

被javascript执行引擎解释后的形态，等同于这个：

1
2
3
4
5
6
7
(function(){ 
    var a;
    function a(){};
    console.log(typeof a); //function
    a = 1;
    console.log(typeof a); //number
})();

总结

不少文章中说的“函数声明的提升优先于变量提升”其实并不准确。函数声明的提升与变量提升都是根据声明的先后顺序依次排列的，只不过“变量声明只提升变量的声明语句；而函数声明提升的是整个语句块，关键一点是，函数声明时就已经对函数名初始化了”。
另外，以表达式形式创建的函数没有提升作用。

相关阅读：

let深入理解—let存在变量提升吗？

[20]: