三道面试题带你彻底理解变量提升

首先我们先来看一下这三道面试题,都是写出代码执行后的输出结果。

• 第一道面试题

fn(); 
function fn() { console.log(1); }  
fn(); 
function fn() { console.log(2); }
fn(); 
var fn = function () { console.log(3); }  
fn(); 
function fn() { console.log(4); }
fn(); 
function fn() { console.log(5); }
fn(); 

• 第二道面试题

var foo = 1;
function bar() {
	if (!foo) {
		var foo = 10;
	}
	console.log(foo);
}
bar();

• 第三道面试题

var a = 0;
if (true) {
    a = 1;
    function a() {};
    a = 21;
    console.log(a)
}
console.log(a);

首先让我们来聊一下变量提升的具体概念

ES3的JS有一个变量提升机制

• 1.变量提升：在当前上下文中(全局/私有/块级)，JS代码自上而下执行之前，浏览器会提前处理一些事情（可以理解为词法解析的一个环节，词法解析一定发生在代码执行之前）
• 会把当前上下文中所有带VAR/FUNCTION关键字的进行提前的声明或者定义

var a=10;
声明declare：var a;
定义defined：a=10;
带VAR的只会提前的声明
带FUNCTION会提前的声明加定义

变量提升的意义：能让我们在创建之前使用这个变量，在代码执行之前就已经把所有的变量提前声明了。

/*
 * 代码执行之前:全局上下文中的变量提升
 *    var a;   默认值是undefined
 */
console.log(a); //=>undefined
var a = 12; //=>创建值12  不需要再声明a了（变量提升阶段完成了，完成的事情不会重新处理） a=12赋值
a = 13; //创建一个值13，然后让全局变量a=13
console.log(a); //=>13

直接调用一个未声明的变量时

console.log(a)
//Uncaught ReferenceError: a is not defined

• 全局上下文中的变量提升
• func=函数 函数在变量提升这个阶段声明和赋值都做了

/*
* 代码执行之前:全局上下文中的变量提升
* function func(){} 提前声明和定义
*/
func();//所以此处会打印出ok
function func() {
   var a &