[JS]07.变量提升处理机制

1. 变量提升概念

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

2. 词法解析：

• 词法解析会把当前上下文中所有带var/function关键字的进行提前声明或者定义
  • 带var的只提前声明
  • 带function的提前声明+定义

创建变量：var a = 10;
1. 声明declare：var a
2. 定义defined：a = 10

3. var的变量提升

/*
  代码执行之前，全局上下文中的变量提升
    var a; 默认值是undefined
*/
console.log(a);  // a变量提升，未定义，undefined
var a = 12;  // 定义赋值 a = 12
a = 13;  // 全局变量 a = 13
console.log(a);  // 13

4. function声明函数和函数表达式声明函数

/*
  全局上下文中的变量提升
    func = 函数，函数在这个阶段赋值就做了
*/
func();
function func() {
  var a = 12;
  console.log('OK')
}

• 真实项目中期望用函数表达式方式创建函数，因为这样在变量提升阶段只会声明func，不会赋值，顺序性，不要再声明前执行

func()  // func is not a function
var func = function() {
}

• 函数表达式声明非匿名函数

var func = function AAA() {
  // 把原本作为值的函数表达式匿名函数具名化，但是外部不能访问，也就是不会在当前上下文创建这个名字
  // 函数执行，在形成的私有上下文中，可以访问
  console.log('OK')
  //AAA()  // 递归死循环
  console.log(AAA, typeof AAA) // "function" 
}
AAA() // Uncaught ReferenceError: AAA is not defined
func()

• 匿名函数具名化eg

setTimeout(function func() {
  func()
}, 1000)

5. 例子

/*
  EC(G)全局变量提升
*/
console.log(window.a);  // undefined
console.log(a); // a is not defined
a = 13;
console.log(a) // 13
console.log(window.a)  // 13

// let 定义 不会同时在window创建, var和直接创建都会在windoow中

/*
  EC(G)全局变量提升，let和const 不变量提升
*/
console.log('OK')  // OK
console.log(a); // a is not defined
let a = 12;
a = 13;
console.log(a);

// 无论条件是否成立，都要进行变量提升
if(!("a" in window)) {   // !true -> false
 var a = 1;
}
console.log(a);  // undefined

/*
  变量提升
  扫描代码，fn=>1 不会重新声明，但是要重新赋值
  fn=>2
  var fn 上面做过了，忽略
  fn=>4
  fn=>5
  window.fn 此时也是5
*/
fn();   // 5 变量提升完结果是5
function fn() {console.log(1)}  // 不再处理，变量提升阶段已经做过
fn();  // 5
function fn() {console.log(2)}
fn();  // 5
var fn = function() {console.log(3)}  // 变量提升阶段，没做个这个赋值，现在赋值
fn();  // 3
function fn() {console.log(4)}   // 不再处理
fn();  // 3
function fn() {console.log(5)}

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