预编译与执行上下文

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

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

 

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

预编译过程:

  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个步骤进行分步解析。

 

上一篇:提问:JavaScript中什么情况下会返回undefined值?


下一篇:【vue】this.$refs['box3']._proto_打印结果为undefined