javascript预编译的过程 - Go语言中文社区

javascript预编译的过程


预编译的两种情况

全局:

1.全局 直接是script标签中的代码,不包括函数执行
执行前:
1.首先生成一个GO(global object)对象,看不到,但是可以模拟出来用来分析
2.分析变量声明,变量名为属性名,值为undefined
3.分析函数声明,函数名为属性名,值为函数体,如果函数名和变量名相同,则无情覆盖

函数内部(局部):

1. 函数调用,也是会生成自己的作用域(AO:active object),AO活动对象. 函数调用时候,执行前的一瞬间产生的,如果有多个函数的调用,会产生多个AO

a.  函数执行前的一瞬间,生成AO活动对象
b. 分析参数,形参作为对象的属性名,实参作为对象的属性值
c.  分析变量声明,变量名为属性名,值为undefined,如果遇到AO对象上属性同名,不去做任何改变
d. 1.4 分析<b>函数声明</b>,函数名为属性名,值为函数体,如果遇到AO对象上属性同名,则无情覆盖

2. 逐行执行。

 

代码分析如下:

<script type="text/javascript">
  console.log(a);
  console.log(b)
  var a = 100;
  console.log(a)
  var b = 200
  var c = 300
  function a(){
  }
  function fun(){
  }
  console.log(a);
</
script>

全局 直接是script标签中的代码,不包括函数执行

执行前:

1.首先生成一个GO(global object)对象,看不到,但是可以模拟出来用来分析


GO = {
自带的属性都不写
}


2.分析变量声明,变量名为属性名,值为undefined


GO = {
a : undefined,
b : undefined,
c : undefined
}


3.分析<b>函数声明</b>,函数名为属性名,值为函数体,如果函数名和变量名相同,则无情覆盖


GO = {
a : function a(){},
b : undefined,
c : undefined,
fun : function fun(){}
}

此时,GO就是预编译完成的最终对象,词法分析结束


4.逐行执行,分析过(变量声明,函数声明)不用管了,只管赋值(变量赋值)
11行的时候,a赋了一次值,值改变为100


GO = {
a : 100,
b : undefined,
c : undefined,
fun : function fun(){}
}

局部

<script type="text/javascript">
    var num = 100;
    function fun(num){
        console.log(num)
    }
    fun(5)
    fun(10)
</script>

1.预编译的时候

GO = {
num : undefined,
fun : function
}

2.执行过程

走到9行

 

GO = {
num : 100,
fun : function
}


走到14行,函数的调用


3.函数调用,也是会生成自己的作用域(AO:active object),AO活动对象. 函数调用时候,执行前的一瞬间产生的,如果有多个函数的调用,会产生多个AO
3.1 函数执行前的一瞬间,生成AO活动对象


fun.AO = {

}


3.2 分析参数,形参作为对象的属性名,实参作为对象的属性值


fun.AO = {
num : 5
}


3.3 分析变量声明,变量名为属性名,值为undefined,如果遇到AO对象上属性同名,不去做任何改变


fun.AO = {
num : 5
}


3.4 分析函数声明,函数名为属性名,值为函数体,如果遇到AO对象上属性同名,则无情覆盖

4.逐行执行

综合分析:

<script type="text/javascript">
     console.log(test);
     function test(test){
         console.log(test);
         var test = 123;
         console.log(test);
         function test(){ 
         }
         console.log(test);
         var test = function(){}
         console.log(test);
     }
     test(10);
     var test = 456
     console.log(test);
 </script>

预编译开始,先生成一个GO{

}

1.看变量GO{

test:underfined

}

2.看函数声明GO{

test:function test(test){

console.log(test);
var test = 123;
console.log(test);
function test(){

}
console.log(test);
var test = function(){}
console.log(test);
}

}

把整个函数体给test

预编译完成,开始执行代码,第二行的结果是test函数的函数体

3到13行都是函数声明,不用管

第14行函数执行,传入参数10

函数执行的时候产生AO{

}

1.看参数AO{

test:10

}

2.看变量,变量同名,不用管变量AO{

test:10

}

3.看函数,函数和参数同名,函数把参数覆盖AO{

test:function test(){}

}

4.逐行执行

第三行打印名字为test的函数体,

第四行给test赋值123,第五行打印123

7到9行函数体声明不用管

第十行打印123

第十一行把一个匿名函数(没有函数名的函数)赋值给test

第十二行函数执行完毕

第十四行回到全局,把456赋值给test

第十五行打印456

版权声明:本文来源博客园,感谢博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
原文链接:https://www.cnblogs.com/xuxiaoyu/p/10133373.html
站方申明:本站部分内容来自社区用户分享,若涉及侵权,请联系站方删除。
  • 发表于 2019-11-17 14:24:26
  • 阅读 ( 1137 )
  • 分类:

0 条评论

请先 登录 后评论

官方社群

GO教程

猜你喜欢