1.啥叫变量提升？
 
我们知道变量如果没定义就输出的话，就会报错not defined
 
 
如果是在定义语句的上面调用的话，就会输出undefined，为啥嘞？
 
 
这种情况就叫做变量提升，在定义语句上面调用变量的话，会假设在调用语句上面加了一句定义而未赋值的语句
 
 
当然我们知道，如果定义一个变量但没给他赋值的话，就会得到undefined，so，变量提升的结果就是undefined
 
对于var 而言，变量提升不只限于定义变量的时候，定义函数的时候也支持变量提升
 
我们知道有两种定义函数的方式，一种是用function关键字声明定义，一种是函数直接量的方式，第一种方式，你随便在哪调用都行，可以在定义之前调用。第二种方式的话，你就不能在定义之前调用，会报错说函数未定义，输出那个变量的话就是undefined，原理就是变量提升
 
 
 
 
2.let没有变量提升
 
 
没错，没有变量提升的let，如果你在定义它之前输出它的话，就会报错了

什么是变量提升？
 
变量提升(Hoisting)是人们对JavaScript执行上下文工作方式的一种认识，并不是官方给出的改变。从字面上理解，变量提升的意思是变量和函数的声明会在物理层移动到作用域的最前面，虽然这样理解并不准确，效果是相同的。变量提升实际的实现方式是JavaScript的变量和函数的声明会在编译阶段放入内存。这意味着使用者在正式声明一个函数或者变量之前就能够使用它。
 
要搞清楚变量提升的实现，首先我们要明确以下2点：
 
javascript代码并不是一行一行往下执行的.
javascript执行分为2个步骤: 
编译(词法解释/预解释)
执行
变量提升帮助理解 
 
console.log(a);
var a = 'ghostwu';
 
对于上面的代码这个例子，第一行代码，你可能认为报错， 因为在输出a之前，没有定义a变量， 但是正确的结果是undefined.。根据上面js执行代码的解释，结合实际的代码，当我们碰到 var a = "ghostwu" 定义一个变量的时候， 其实js把这句话看成是2个阶段的事,  var a 发生在编译阶段， a = 'ghostwu'发生在执行阶段. 然后 var a会被提升到当前作用域的最前面,  a = 'ghostwu'留在原地等待执行阶段，所以看下面的案例：
 
1 a = 'ghostwu';
2 var a;
3 console.log( a );
4 
5 //上面这段代码经过编译之后，变成下面这样
6 
7 var a;  //被提升到当前作用域的最前面
8 a = 'ghostwu'; //留在原地，等待执行
9 console.log( a ); //输出ghostwu



10  console.log( a ); 
12   var a = 'ghostwu';
13 
14   //上面这段代码,经过编译之后，变成下面这样
15 
16   var a;
17   console.log( a );//输出undefined,而不会报错
18   a = 'ghostwu';
 
函数声明提升 
 
在讲解函数声明提升之前，我们先来了解函数的常见的两种定义方式
 
1         //函数声明, 形如:
2         function show(){
3             console.log( '函数声明方式' );
4         }
5 
6         //函数表达式, 形如:
7         var show = function(){
8             console.log( '表达式方式' );
9         }
 
因为函数表达式和函数的声明，在编译阶段，会产生不同的解释效果，所以函数的声明会被提升，案例见下面代码：
 
1         show();
2         function show(){
3             console.log( a );
4             var a = 'ghostwu';
5         }


//函数声明会被提升，所以上面的代码经过编译之后，就变成下面这样

6    function show(){    //函数声明被提升到 当前作用域的最前面
7    var a;    
     //var声明被提升到当前作用域的最前面, 注意，他不会提升到函数的外面, 因为当前的作用域是在函数中
8    console.log( a );
9    a = 'ghostwu';
10   }
11   show();//输出undefined
 
但是函数表达式是不会被提升的，看下面的例子：
 
1 show(); //报错,show is not a function
 2 var show = function(){
 3  console.log( 'ghostwu' );
 4 }
 5 //对于上面这段表达式代码，经过编译之后:
 6 var show;
 7 show();  //执行之后就是 undefined(), 所以在表达式定义之前，调用函数报错了
 8 show = function(){
 9   console.log( 'ghostwu' );  
10 }



 
但是看下面的案例：
 
1         show(); //你好
2         var show;
3         function show(){
4             console.log( '你好' );
5         }
6         show = function(){
7             console.log( 'hello' );
8         }
 
上面的代码为什么会输出“你好”，因为当出现同名的函数声明，变量声明的时候， 函数声明会被优先提升，变量声明会被忽略。 所以经过编译之后，就变成: 
 
1         function show(){
2             console.log( '你好' );
3         }
4         show(); //你好
5         show = function(){
6             console.log( 'hello' );
7         }
8         show();//如果这里在调用一次，就是hello, 因为show函数体在执行阶段被重新赋值了 
 
 但是如果有同名的函数声明，后面的会覆盖前面的，如下代码：
 

 1         show(); //how are you
 2         var show;
 3         function show(){
 4             console.log( 'hello' );
 5         }    
 6         show = function(){
 7             console.log( '你好' );
 8         }
 9         function show(){
10             console.log( 'how are you!' );
11         }  


12        //上面的代码经过编译之后，变成如下形式:
13         function show(){
14             console.log( 'how are you!' );
15         }
16         show(); //how are you
17         show = function(){
18             console.log( '你好' );
19         }
20         show(); //如果在这里再执行一次，结果：你好
 
注：
 
变量提升只是提升变量的声明，并不会把赋值也提升上来。
正因为有变量提升这回事，所以为了避免变量提升带来的不好的影响，我们最好在定义变量时，使用let而不是var。 
 
 
 
 
 
 
 

 
 
文章是本人大三期间的学习笔记，一些论断取自书籍和网上博客，碍于当时的技术水平有一些写得不够好的地方，可以在评论处理智讨论~
 
 
变量的作用域
 
 
在理解变量提升和函数提升之前，我们需要先理解好JavaScript的作用域的奇特之处。
 
没有块级作用域
 
和C、C++、以及Java不同，在ES6之前，JavaScript没有块级作用域，只有全局作用域和函数作用域。
 
 
 
**注：**其实从 ES3 发布以来，JavaScript 就有了块级作用域（with 和 catch分句），而 ES6 引入了 let
 
 
我们首先来看下面这个例子：
 
 
 
ps:下面代码可以直接复制出去运行哦
 
 
<script type="text/javascript">
function test() {
	if(1) {
		var j = 0;//j存在于test()中任何地方，不止在if{}中
		for(var k = 0; k < 10; k++) {}
		console.log("k = " + k);//k存在于test()中任何地方，不止在循环中
	}
	console.log("j = " + j);
}
test();
</script>
 
对于初学JavaScirpt，写惯了C、C++、Java的童鞋来说，这已经是一个很奇特的结果了。
 
此外，在函数作用域中，局部变量的优先级比同名的全局变量高。如果给一个局部变量或函数的参数声明的名字与某个全局变量的名字相同，那么就会有效地隐藏这个全局变量了。
 
变量提升
 
 
在了解了关于作用域的前置知识后，我们来聊聊提升这个有趣的现象。
 
首先举个栗子~
 
console.log(a);
var a = 2;
 
上面会输出什么呢？
 
是由于变量 a 在使用前没有先进行声明，因此会抛出 ReferenceError异常?还是输出 2 ？
 
不过上面的两种猜测都不对，正确答案是输出 undefined（已声明未定义值）。
 
这就是一个典型的 变量提升 现象。
 
当你看到 var a = 2;时，可能会认为这只是一个简单的声明语句。但 JavaScript 实际上会将其看成两个声明： var a; 和 a = 2;。第一个定义声明是在编译阶段进行的，第二个赋值声明会被留在原地等待执行阶段。
 
因此上面的代码会以如下的形式进行处理：
 
var a;
console.log(a);
a = 2;
 
因此，打个比方，这个过程就好像变量和函数声明从它们在代码中出现的位置被“移动”到了最上面。这个过程就叫做 提升。
 
 
 
注：无论作用域中的声明出现在什么地方，都将在代码本身被执行前首先进行处理。可以将这个过程形象地想象成所有的声明（变量和函数）都会被“移动”到各自作用域的最前端，这个过程被称为 变量（函数）提升
 
 
函数提升
 
 
接着让我们来结合函数以及作用域以及上面的变量提升来看一个有趣的题目（这极有可能会出现在面试题中）：
 
var a = true;
foo();

function foo() {
	if(a) {
		var a = 10;
	}
	console.log(a);
}
 
这个例子最终的答案是 undefined。这是个很有趣的题目包含了许多可能会在 JavaScript 中碰到的坑。
 
下面是这段代码实际会被 JavaScript 执行的样子：
 
function foo() {
	var a;
	if(a) {
		a = 10;
	}
	console.log(a);
}
var a;

a = true;

foo();
 
var a = true;被解析成上面第1、2行不足为奇。
 
首先，我们来看 foo(...) {} 的位置被移到了 foo();的前面，根据前面对变量提升的解释，我们可以很容易理解这是函数发生了提升，这就是函数提升。
 
继续我们来分析 foo(...) {} 中的代码。为什么会输出 undefined，而不是我们期望的 10，玄机都在其中！
 
让我们回到最前面对作用域的理解，在 JavaScript 中没有块级作用域，所以 var a = 10;会被 JavaScript 分为两步中的 var a; 会被提升到函数作用域中的最顶端，声明了一个局部变量 a，在 foo(...) {} 的函数作用域中，这个重名局部变量 a 会屏蔽全局变量 a，换句话说，在遇到对 a 的赋值声明之前，在 foo(...) {}，a 的值都是 undefined！
   所以一个 undefined 的 a 进入不了 if(a) {...} 中，所以最后被打印出来的是 undefined。
 
需要注意的一点是，在 JavaScript 中，函数有两种方式进行声明，函数声明会被提升，但是函数表达式却不会被提升。
 
将上面的例子进行修改：
 
var a = true;
foo();

var foo = function() {
	if(a) {
		var a = 10;
	}
	console.log(a);
}
 
这里会抛出 TypeError，而不是 ReferenceError。
 
同常量提升，代码会被解析为：
 
var a;
var foo；

a = true;
foo();

foo = function() {
	if(a) {
		var a = 10;
	}
	console.log(a);
}
 
在执行阶段时，当碰到 foo();时，foo 还没有赋值（如果它是一个函数声明而不是函数表达式，那么就会赋值）。foo(); 由于对 undefined 值进行函数调用而导致非法操作，因此会抛出 TypeError 异常。（关于TypeError和ReferenceError 的区别，可移步 TypeError 和 ReferenceError ）。
 
函数优先
 
 
函数声明和变量声明都会被提升。但是有一个需要注意的细节是函数会首先被提升，然后才是变量。
 
考虑下面的代码：
 
foo();
function foo() {
	console.log('1');
}

var foo = function() {
	console.log('2');
}
 
会输出 1 而不是 2！这个代码片段会被引擎理解为如下形式：
 
function foo() {
	console.log('1');
}

foo();

foo = function() {
	console.log('2');
}
 
然后，如果是两个函数声明，出现在后面的函数声明可以覆盖前面的。
 
foo();	//2
function foo() {
	console.log('1');
}
function foo() {
	console.log('2');
}
 
上面的代码会被解析成：
 
function foo() {
	console.log('1');
}
function foo() {
	console.log('2');
}

foo();	//2

 
文章目录
 
一、预解析
1. 变量提升
2. 函数提升
3. 函数优先
   
   
二、暂时性死区
三、总结
 

 
通常在直觉上我们会认为代码执行时是从上到下按顺序执行的，但在 JavaScript 中（就同步代码而言），这并不完全正确。
 
小二，上栗子！
 
实例 1：
 
a = 2;
var a;
console.log(a); // ？
 
如果实例 1 的代码是自上而下执行的话，那么 var a在a = 2之后，应该是变量被重新赋值为undefined了。但输出的结果其实是 2。
 
实例 2：
 
console.log(a); // ？
var a = 2;
 
根据上一个例子的代码的表现，如果代码并不是完全自上而下执行的，那实例 2 代码里会输出 2，还是会报错呢。实际上输出的是 undefined。
 
哦豁，到底发生了什么？
 
一、预解析
 
JavaScript 引擎在执行任何代码片段（例如函数调用）之前，会先对其中所有变量（包括函数）声明进行处理，这是一个预解析的过程。
 
1. 变量提升
 
JavaScript 会将var a = 2;看成是两个操作：var a;和a = 2;。第一个声明是预解析阶段进行的，第二个赋值操作留在原地等待执行阶段。
 
上面实例 1 的代码可以认为被处理成如下形式：
 
// 预解析阶段
var a; 
//----------------
// 执行阶段
a = 2; 
console.log(a); // 2
 
实例 2 的代码可以认为被处理成如下形式：
 
// 预解析阶段
var a;
//----------------
// 执行阶段
console.log(a); // undefined
a = 2;
 
这样来看，代码的执行顺序就变得正常了。预解析的过程好像是变量的声明被“移动”到顶部，这个过程就叫作提升。
 
 
2. 函数提升
 
函数声明同样也会被提升，但是跟变量的提升行为有所不同。
 
实例 3：
 
fn(); // 输出 undefined

function fn() {
    console.log(a);
    var a = 1;
}
 
在实例 3 中，在函数声明之前就可以正常调用函数，因为整个函数体都被提升了。值得注意的是，函数内也声明了一个变量 a ，那这个变量会被提升到哪里呢，这就跟作用域有关系了。
 
每个作用域都会发生提升行为，且只提升到当前作用域的顶部。在函数被调用时，才会对函数内部代码进行预解析。因此实例 3 的代码可以等同于如下形式：
 
function fn() {
    var a;
    console.log(a); 
    a = 1;
}

fn(); // 输出 undefined
 
另外，函数表达式的提升行为，是跟普通变量一样的。
 
实例 4：
 
fn(); // 报错，只提升了 var fn;  不能对 undefined 进行函数调用

var fn = function() {
    console.log("fn");
}
 
 
3. 函数优先
 
我们知道变量声明和函数声明都会被提升，那么在重复声明的情况下，JavaScript 引擎会怎么处理呢？
 
预解析过程中，每遇到一个 var 关键字的变量声明，首先会查询当前作用域之前是否已经有了该名称的变量，如果是，则会忽略该声明；如果没有则把该变量声明提升。
 
所以需要注意的是，预解析时函数首先被提升，然后才到变量。
 
实例 5：
 
fn(); // 1
var fn;

function fn() {
    console.log(1);
}

fn = function() {
    console.log(2);
}
fn(); // 2
 
实例 5 中，虽然 var fn; 出现在 function fn (){...} 之前，但因为首先提升函数，而同名的 var 声明就被忽略了。
 
 
尽管同名的 var 声明会被忽略掉，但是后出现的函数声明是能够覆盖前面的。
 
实例 6：
 
fn(); // 3
function fn() {
    console.log(1);
}

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

function fn() {
    console.log(3);
}
 
虽然这些看起来似乎都是并没有什么用的理论，一般也没谁这么写，但是至少说明了在同一个作用域内重复声明是非常糟糕的，会导致各种莫名其妙的问题，可见良好的编程习惯是多么重要！
 
二、暂时性死区
 
前面提到的种种提升行为，并没有出现 let 和 const 关键字。因为，let 和 const 并不会表现出变量提升的现象。
 
 
 
ES6 明确规定，代码块（{}）中如果出现 let 和 const 声明的变量，这些变量的作用域会被限制在代码块内，也就是块级作用域。
 
 
实例 7：
 
var a = 1;
if(true){
	a = 2;
    console.log(a); // ?
	let a;
}
 
实例 7 代码中，在a = 2这里就已经报错：Cannot access 'a' before initialization，意思是无法在初始化之前访问 a，这是为什么呢？
 
在预解析的时候，JavaScript 引擎当然也会注意到 let 和 const 声明的变量，因为实例 7 的块级作用域中存在变量 a ，便不会继续去外部作用域查找变量。
 
严格来说， let 和 const 也会有类似“提升“的行为，但跟 var 不同的是，提升的时候变量值并不会默认赋值为 undefined，并且会禁止在声明之前使用这些变量，这就是所谓的暂时性死区。
 
实例 8：
 
var a = 1;

if(true){
    // 死区开始--------------------------
    // 访问 a 都会报错，不能在声明之前使用
    a = 2;
    console.log(a);
    // 死区结束--------------------------
    let a;
    console.log(a); // undefined
    
    a = 3;
    console.log(a); // 3
}
 
暂时性死区的设计，也是为了提倡大家先声明，后使用，养成良好的编程习惯。同时推荐大家不管是用哪种声明方式，最好都先声明然后再使用，才能避免变量提升现象给代码带来的负面影响。
 
 
 
暂时性死区是 let 和 const 共同的特性，为了方便起见，上面的例子都只用了 let 关键字。
 
 
三、总结
 
var声明的变量，只提升声明，赋值操作留在原地。
函数声明提升整个函数体，函数表达式的提升行为和变量一致。
同作用域中，如果函数声明和 var 声明同名，只提升函数声明，忽略 var声明。
let 和 const 有暂时性死区，必须先声明后使用。
 

 - END -
 
感谢你花费宝贵的时间阅读本文，文章在撰写过程中难免有疏漏和错误，欢迎你在下方留言指出文章的不足之处；如果觉得这篇文章对你有用，也欢迎你点赞和留下你的评论哦。