变量提升详解

自认为对变量提升有一定的了解，其实不然。

概念

什么是变量提升

变量提升，在当前上下文中（全局/私有/块级），js 代码自上而下执行之前，浏览器会提前处理一些事情（可以理解为词法解析的一个环节，词法解析一定发生在代码执行之前）

变量提升会把上下文中的所有带 var/function 关键字进行提前声明或者定义

var a = 10

声明 declare var a;
定义 defined a=10

带 var 的只会提前声明

带 function 会提前声明和定义

看看 var 的变量提升

// 代码执行之前，全局上下文中的变量会提升
// var a;默认是undefined
console.log(a); // undefined
var a = 12; // 执行到这才会给 a赋值 12（不需要声明a了，变量提升阶段完成了，完成的事情不会重新处理）
a = 13; // 全局变量 a=13
console.log(a); // 13

看看 function 的变量提升

/*
全局上下文中的变量提升
fn = 函数   这个阶段函数的声明和赋值都做了，所以 调用fn()可以在函数代码之前调用
*/
fn();
function fn() {
  var a = 12;
  console.log("ok");
}

fn(); // 会报错  TypeError: fn is not a function，因为用var 声明的变量只会声明fn但是不会赋值
var fn = function () {
  var a = 12;
  console.log("ok");
};

var fn = function fb() {
  // 原本匿名函数给具名化以后，但是在外部依然是不能方位的，在当前上下文中是不会创建这个名字，但是在函数内部我们是可以调用这个函数名，因为：在函数执行时，在形成私有上下文中，会把这个具名化的名字作为私有上下文中的变量来处理
  var a = 12;
  console.log("ok");
  fb(); // 递归调用
};
fb(); // 会报错Uncaught ReferenceError: fb is not defined
fn();

ES6

全局的变量提升 只有 var 和 function ,而 let 和 const 是不会有变量提升的

console.log(a); // 会报错Uncaught ReferenceError: a is not defined
let a = 1;

window

var 或者 function 在全局上下文声明的变量会映射到全局对象中（window）,作为他的属性，修改每个属性，全局对象中对应的属性也会修改

var a = 13;
console.log(window.a); // 13

条件判断

全局上下文中的变量提升：不论条件是否判断成立，都需要进行变量提升(条件中带 function 在新版本浏览器中只会提前声明，不会提前赋值)

老版本：

var a;
fn = 函数

新版本：

var a
fn

console.log(a, fn); // undefined undefined
// 首先不用看条件是否成立，会先进行变量提升，此时a：undefined ,并且window 也会有a
// 所以 "a" in window 为true 取反 为false
if (!("a" in window)) {
  var a = 1;
  function fn() {}
}
console.log(a); // 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()

分析过程：

1.首先需要变量提升

声明 fn 并赋值函数 1 已经声明过的不需要重复声明,只需要重新赋值即可

fn=>1
=>2
var fn
=> 4
=> 5

开始指向 fn
fn() 5
fn() 5
fn() 5
把 fn(){console.log(3)} 赋值给 fn
fn() 3
fn() 3
fn() 3

所以结果就是 5 5 5 3 3 3

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

执行函数 bar ,会进行变量提升，因为不论条件是否成立都需要变量提升，

所以函数内 foo 会变量提升为 undefined