变量提升
变量提升：在当前上下文中（全局/私有/块级），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
