14 JavaScript js的编译()

1 js运行的三个阶段

  • 语法分析
  • 预编译
  • 解释执行
语法分析就是JS引擎去检查你的代码是否有语法错误,解释执行就是执行你的代码。最重要最需要理解的就是第二个环节预编译,简单理解就是在内存中开辟一些空间,存放一-些变量与函数。

预编译可分为全局预编译和局部预编译。
1.在js脚本加载之后,会先通篇检查是否存在低级错误; .
2.在语法检测完之后,便进行全局预编译;
3.在全局预编译之后,就解释一行,执行一行;
4.当执行到函数调用那一行前一刻,会先进行函数预编译,再往下执行。

全局预编译的3个步骤:
1.创建GO对象(Global Object)全局对象,即window对象。
2.找变量声明,将变量名作为GO属性名,值为undefined
3.查找函数声明,作为GO属性,值赋予函数体

局部预编译的4个步骤:
1.创建A0对象(Activation Object)执行期上下文。
2.找形参和变量声明,将变量和形参名作为AO属性名,值为undefined
3.将实参值和形参统一赋值。
4.在函数体里面找函数声明,值赋予函数体。

案例:

var a = 10;
console.log(a);

function foo(a){
  console.log(a);
  var a = 100;
  console.log(a);
  function a(){};
  console.log(a);
  var b = function(){};
  console.log(b);
  function d(){};
}
var c = function(){
  console.log('匿名函数C');
};
console.log(c);
foo(20);

1、整个文件创建全局对象,GO/window
2、首先找到声明变量,分别为:a,c 初始并不赋值,默认值为undefined
3、在查找函数并声明,赋予函数体。
全局预编译-示例:
GO/window = {
  a: undefined,
  b: undefined,
  foo: function foo(a){
    console.log(a);
    var a = 100;
    console.log(a);
    function a(){};
    console.log(a);
    var b = function(){};
    console.log(b);
    function d(){};
  }
}
4、执行语句,变量被赋值;当执行到foo()时进行函数局部编译
解释执行-示例:
GO/window = {
  a:10,
  c:function(){
    console.log('匿名函数C')
  }
  function foo(a){
    console.log(a);
    var a = 100;
    console.log(a);
    function a(){};
    console.log(a);
    var b = function(){};
    console.log(b);
    function d(){};
  }
}
5、创建AO对象执行上下文
6、找到该函数的形参和变量声明,将变量和形参作为AO的属性名,值为:undefined  分别为:a,b
调用函数foo(20)钱发生的局部编译:
//局部预编译的5和6步操作如下:
AO = {
  a: undefined,
  b: undefined,
}
7、将实参和形参统一
//局部预编译的第三步操作如下:
AO = {
  a:20,
  b:undefined,
}
8、在函数体里面找函数声明,值赋予函数体。
//局部预编译的第四步操作如下:
AO = {
  a: function a() {},
  b: undefined,
  d: function d() {}
}
9、执行foo(20)
————————

1 js运行的三个阶段

  • 语法分析
  • 预编译
  • 解释执行
语法分析就是JS引擎去检查你的代码是否有语法错误,解释执行就是执行你的代码。最重要最需要理解的就是第二个环节预编译,简单理解就是在内存中开辟一些空间,存放一-些变量与函数。

预编译可分为全局预编译和局部预编译。
1.在js脚本加载之后,会先通篇检查是否存在低级错误; .
2.在语法检测完之后,便进行全局预编译;
3.在全局预编译之后,就解释一行,执行一行;
4.当执行到函数调用那一行前一刻,会先进行函数预编译,再往下执行。

全局预编译的3个步骤:
1.创建GO对象(Global Object)全局对象,即window对象。
2.找变量声明,将变量名作为GO属性名,值为undefined
3.查找函数声明,作为GO属性,值赋予函数体

局部预编译的4个步骤:
1.创建A0对象(Activation Object)执行期上下文。
2.找形参和变量声明,将变量和形参名作为AO属性名,值为undefined
3.将实参值和形参统一赋值。
4.在函数体里面找函数声明,值赋予函数体。

案例:

var a = 10;
console.log(a);

function foo(a){
  console.log(a);
  var a = 100;
  console.log(a);
  function a(){};
  console.log(a);
  var b = function(){};
  console.log(b);
  function d(){};
}
var c = function(){
  console.log('匿名函数C');
};
console.log(c);
foo(20);

1、整个文件创建全局对象,GO/window
2、首先找到声明变量,分别为:a,c 初始并不赋值,默认值为undefined
3、在查找函数并声明,赋予函数体。
全局预编译-示例:
GO/window = {
  a: undefined,
  b: undefined,
  foo: function foo(a){
    console.log(a);
    var a = 100;
    console.log(a);
    function a(){};
    console.log(a);
    var b = function(){};
    console.log(b);
    function d(){};
  }
}
4、执行语句,变量被赋值;当执行到foo()时进行函数局部编译
解释执行-示例:
GO/window = {
  a:10,
  c:function(){
    console.log('匿名函数C')
  }
  function foo(a){
    console.log(a);
    var a = 100;
    console.log(a);
    function a(){};
    console.log(a);
    var b = function(){};
    console.log(b);
    function d(){};
  }
}
5、创建AO对象执行上下文
6、找到该函数的形参和变量声明,将变量和形参作为AO的属性名,值为:undefined  分别为:a,b
调用函数foo(20)钱发生的局部编译:
//局部预编译的5和6步操作如下:
AO = {
  a: undefined,
  b: undefined,
}
7、将实参和形参统一
//局部预编译的第三步操作如下:
AO = {
  a:20,
  b:undefined,
}
8、在函数体里面找函数声明,值赋予函数体。
//局部预编译的第四步操作如下:
AO = {
  a: function a() {},
  b: undefined,
  d: function d() {}
}
9、执行foo(20)