JavaScript预编译是个什么鬼

  今天学习了一下JS的预编译,对此想做一篇博文用来总结一下今天学习的知识,以此来加深一下记忆。本博文进仅供参考。如有错误的地方还请各位博友指出错误。

希望我们共同学习。

  首先先来一段代码

  

  JS是解释一行执行一行,但是上面代码却打印出a的值为undefined?为什么?

  到这里可能有很多人知道变量声明声明提升,函数声明整体提升比如说这个。

  

  这里打印的fn的值为 fn函数。但是其实者两句话知识一个对预编译出现的现象的一种总结。

  很多问题不能够使用这两句话解决

  

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

  这个结果是什么?现在这个初始a的结果应该是什么用上面的方法解决不了上面的问题;

  说的怎么多那么什么是预编译,到底什么是?

      在函数(JS)执行的前一刻,会创建一个叫做执行期上下文的(AO)对象这个创建执行期上下文的过程叫做预编译。

 

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);

  用这段代码解释一下预编译的过程

  1.首先在函数执行的前一刻创建AO对象

AO{

  }

  2.找到函数形参和变量声明,将函数和形参名的作为Ao对象的属性名,值为undefined

AO{
    a : undefined,
    b : undefined
}

  代码中只存在a形参和b变量

  3.实参形参相统一

AO{
    a : 1,
    b : undefined
}

  4.找到函数中的函数定义,函数名为AO对象属性名,值为函数体

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

  因为AO对象中a属性已存在修改值为函数,fn函数中还存在函数d声明。这是执行器上下文对象为上面这样

  所以代码的执行结果为:

  

function fn(a) {
  console.log(a);// AO对象的值为function a(){} 
  var a = 123;// 变量声明已经在预编译的时候执行的了 在执行时不会执行变量声明 改变Ao对象中属性a值为123
   console.log(a); // 123
   function a(){}// 这也不执行
  console.log(a);  // 123
  var b = function(){} // vaar b不执行 改变AO对象中的属性b为function(){}
  console.log(b);// function() {}
   function d(){}// 不执行
}
fn(1);

这样最终结果就是了

但是我们一开始在全局中的那个问题还是没有解决啊

其实在JS执行的前一刻也会创建对象只不过这个对象叫做GO对象全局执行器上下文,只不过他的预编译不存在函数预编译过程的第二步。全局不存在形参。他创建的对象叫做GO对象

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

1.创建GO对象

GO{

}

2.找到全局中的变量声明,将函数和形参名的作为GO对象的属性名,值为undefined

GO{
  a :undefined
}  

3.找到全局中函数声明将函数作为GO对象的属性名,值为函数

 GO{
  a :function a(){}
}

 

 代码执行结果为function a(){}

 

posted @ 2019-06-08 23:42  向往的人生  阅读(2441)  评论(0编辑  收藏  举报