[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);
复制代码

基于 var/function全局上下文中声明的变量,全局变量,会映射到GO(全局对象),也就是window上一份,作为属性

// 无论条件是否成立,都要进行变量提升
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
复制代码
分类:
前端