js全局预处理与执行过程

js全局预处理与执行过程

1. 预处理阶段：
   • js在预处理阶段只做两件事：
   1. 查找用var 声明的变量和以声明方式声明的函数，即这种：

var b = 1;
function a（） {
    //state
}

2. 将查找到的加在window 或 Global Object 的词法作用域中并进行预赋值，像这样：

   window：
   {
   b:undefined;
   a:保存对a函数的引用
   }

• 所以我们很容易看到这样的效果：（在变量被声明之前被调用却不会报错，所谓变量提升）

console.log(a)
console.log(b)
console.log(c)
console.log(d)
var b = 1;
function a() {
    console.log('aa')
}
c = 2；
d = function(){
  //state
}
var e = function(){
  //state
}
// undefined
// undefined
// 将会报错 c is not defined
// 报错
// undefined
// 不过这种情况将在 js的严格模式下都会报错（此处不探究）

2. 代码执行阶段：
   • 代码执行原则：从上向下执行。
   • 当遇到存在于window词法作用域中的变量时进行再赋值；
   • 当遇到不存在于window词法作用域中的变量时，js将一次性执行声明（变量成为词法作用域成员）并执行赋值操作。
3. 特殊情况：
   1. 函数主大，直接看代码：

console.log(a)
var a = 1;
function a() {
    console.log('aa')
}
// 输出对函数a的引用

• 如果将此处解释位后声明的覆盖了前面声明的话，还解释的通。但如果像下面这样：

console.log(a)
function a() {
    console.log('aa')
}
var a = 1;
// 输出对函数a的引用

• 他仍然输出对函数a的引用，这就是我们说的函数主大，当命名冲突时，函数覆盖变量，而变量不能覆盖函数。

  2. 函数中未用var声明的变量将直接进入window的词法作用域。比如这样：

function a1() {
    function a2() {
        a = '我就是'
    }
    a2()
}
a1()
console.log(a)
// 输出 '我就是'