理解JavaScript中的提升

前言：在回调地狱的解决方案中，函数提升使得代码更加清晰，那么为什么可以这样做呢？

先看四段代码

//代码段1--------------------------
var myvar = '变量值1'; 
console.log(myvar); // 变量值1

1.先定义后打印。

 //代码段2--------------------------
 var myvar = '变量值2';  
 (function() { 
   console.log(myvar); //变量值2
})();

2.依旧常用，由于Javascript编译器首先在匿名函数内部作用域（Scope）查看变量myvar是否声明，发现没有，就继续向上一级的作用域（Scope）查看是否声明 myvar，发现存在，即打印出该作用域的myvar值。

//代码段3----------------------------
var myvar = '变量值3'; 
(function() { 
 console.log(myvar); // undefined 
 var myvar = '内部变量值3'; 
})();    

3.这段代码中，底部多了一行代码，就打印出了“undefined”，先要理解，“undefined”的意思是已声明而未初始化，如果直接未声明，控制台会报错说“ReferenceError：myvar is not defined”。
为什么会出现这么个打印结果？因为在变量的作用域内，不管变量在何处声明，都会被提升到作用域的顶部，但是变量初始化的顺序不变。这里涉及到JavaScript引擎的编译步骤，简单说一下：
JavaScript在看到var myvar = '内部变量值3'时，并没有当作一个声明，而是两个声明：var myvar 和 myvar = ‘内部变量值3’。第一个定义声明是在编译阶段由编译器处理的，第二个赋值声明则在原地等待执行阶段由引擎来处理。
由于定义声明都在复制操作前面，这就相当于声明被提升了，初始化数据还在原处，代码段3相当于变成了这样：

//代码段3的实际呈现—————————-
var myvar = ‘变量值3’;
(function() {
var myvar；
console.log(myvar); // undefined
myvar = ‘内部变量值3’;
})();

说完变量提升，再来看一下这段代码：

//代码段4----------------------
var myvar = '变量值4'; 
(function() { 
  console.log(myvar); // 变量值4
  myvar = '内部变量值4'; 
})();

4.应该很好理解了，这个其实相当于代码段2。

“提升”的总结

通过上面四个例子，可以理解：变量提升其实是对变量定义声明的提升，赋值操作是留在原地的。函数提升和变量提升道理一样，看例子：

foo();
function foo(){
var a = 2;
console.log(a)
};

其实相当于

function foo(){
var a = 2;
console.log(a)
};
foo();

• 本文作者： Baili
• 本文链接： https://baili90.github.io/2021/04/20/2021-04-20-Js/
• 版权声明： 本博客所有文章除特别声明外，均采用 MIT 许可协议。转载请注明出处！