web前端高级JavaScript - 深度剖析JS变量提升的机制

变量提升

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

• 声明declare：如 var a;
• 定义defined：如 a = 10;
• 带var的只会提前声明，不定义
• 带function的会提前声明并定义

• 代码执行前全局上下文中带var的变量提升

console.log(a);
var a = 12;
a = 13;
console.log(a);

上面代码中执行步骤为：

• 变量提升 - 声明变量a var a; 默认值为undefined
• 执行console.log(a)；输出undefined
• 创建一个值12，然后再让变量a与12关联； a = 12；
• 创建一个值13，然后再让变量a与13关联； a = 13；
• 最后执行console.log(a)；输出13

• 代码执行前全局上下文中带function的变量提升

在调用函数func之前，该函数已经被声明并定义

func();
function func(){
	console.log('变量提升');
}

• 全局上下文 判断体（if）中 的变量提升

不管条件是否成立，都要进行变量提升
需要注意的是：条件中带function的在新版本浏览器中只会声明不会定义，而在老版本浏览器中是即声明又定义

• 老版本，如IE10以下：
  • var a 全局上下文中声明一个a也相当于给window加一个a属性
  • fn = 函数（声明+定义）
• 新版本
  • var a 全局上下文中声明一个a也相当于给window加一个a属性
  • fn;只声明不定义

console.log(a);//undefined
if(!('a' in window)){
	var a = 1;
	function func(){}
}
console.log(a);//undefined
//'a' in window 检测a是否为window的属性，因为是全局声明所以a是window的属性，再取反后则条件不成立，则if里的代码不执行，所以两次都输出undefined

• 关于变量提升的练习题

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();

上面代码中最终输出结果为 5 5 5 3 3 3

• 步骤分析：
  • 首先进行带var和function的变量提升
    fn => 1;
    fn => 2;
    var fn；此处不再处理，因为上面处理function提升时已经有变量fn了，所以这里不再处理
    fn => 4;
    fn => 5;
    变量提升以后fn对应的值是输出5
  • 然后代码开始执行
    第一次调用fn(); 输出的是5
    第二次调用fn(); 输出的是5
    第三次调用fn(); 输出的是5
    执行到var fn…时对fn进行重新赋值，因为刚才在变量提升阶段并没有对这句代码进行处理，所以fn变为输出3
    最后几次调用都是输出3

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

步骤分析：

• 首先进行全局变量提升
  • var foo
  • function bar(){ …}
• 全局变量提升后，开始代码执行，调用bar函数
• bar函数执行会形成一个私有的执行上下文
• 在函数私有上下文中，初始化步骤
  • 初始化作用域链
  • 初始化this
  • 初始化arguments
  • 形参赋值
  • 变量提升： var foo; 不管判断题条件是否成立都先变量提升
• 然后函数中的代码执行，发现foo是函数的私有变量，并且只声明没赋值，所以取反后条件成立
• 给变量foo赋值为10
• 所以最后输出结果10