预编译与执行上下文

今天在看腾讯课堂，姬成老师的课程，关于预编译和执行上下文讲解的特别详细。让我明白之前一直迷惑的执行上下文顺序。

这点也是面试的时候经常遇到的面试题。

 

预编译：发生在函数执行的前一刻。

预编译过程：

　　1、创建AO对象；

　　2、找形参和变量声明，将变量和形参作为AO对象的属性名，值为undefined；

　　3、将实参和形参统一；

　　4、在函数体里面找函数声明，值赋予函数体。

 

例子：

  function fn(a) {
    console.log(a);
    var a = 123;
    console.log(a);
    function a() { };
    console.log(a);
    var b = function () { };
    console.log(b);
    function d() { };
  }

  fn(1);

解析过程：

第一步：创建AO对象：

AO：{

}

第二步：找形参和变量声明，将变量和形参作为AO对象的属性名，值为undefined；

  AO : {
    a: undefined,
    b: undefined,
  }

第三步：将实参和形参统一

  AO : {
    a: 1,
    b: undefined,
  }

第四部：在函数体里面找函数声明，值赋予函数体

AO : {
    a: function a() { },
    b: undefined,
    d: function d() { },
  }

然后开始解析对象，执行上下文：（已经解析的在执行过程中忽略）

  function fn(a) {
    console.log(a);  // 取AO对象里面的a： function a() { }
    var a = 123;     // 将AO对象里面的a重新赋值，为123；
    console.log(a);　// 取AO对象里面的a   123
    function a() { };  // 忽略
    console.log(a);　　// 123
    var b = function () { };  // 将AO对象里面的b重新赋值为 function b() {}
    console.log(b);　　　// 取AO对象里面的b  为function(){ }
    function d() { }; 
  }

  fn(1); 

 

所有的执行上下文的顺序都可以按照这4个步骤进行分步解析。

 

标签：function,执行,console,log,形参,AO,编译,上下文,undefined
来源： https://www.cnblogs.com/liumcb/p/15234323.html