首页  >  文章  >  web前端  >  基础的JavaScript知识总结(八)预编译执行过程

基础的JavaScript知识总结(八)预编译执行过程

php中世界最好的语言
php中世界最好的语言原创
2018-03-10 13:31:331726浏览

这次给大家带来基础的JavaScript知识总结,总共有十一个知识点,基础的JavaScript知识总结(八)预编译执行过程下面就是实战案例,一起来看一下。

JS运行三部曲

第一步:语法分析

第二部:预编译

第三部:解释执行

预编译

语法分析也叫语义分析,语法分析他是通篇执行的一个过程,比如我写了好多行代码,这些代码在执行的时候他是解释一行执行一行,但是在执行之前系统执行的第一步它会扫描一遍,看看有没有低级的语法错误,比如少些个括号,带个中文之类的,它会通篇扫描一遍,但是不执行,这个通篇扫描的过程叫语法分析,通篇扫描之后它会预编译,然后在解释一行执行一行,也就是解释执行

预编译前奏

imply global 暗示全局变量: 即任何变量,如果变量未经声明就赋值,自变量就位全局对象所有
eg : a = 123;
eg : var a = b = 123;

一切声明的全局变量,全是window的属性

  eg:var a = 123;===> window.a = 123;
//例子:
   function test (){        console.log("a");
   }  
   test();//成功打印出a,
   box();//写在方法之前也成功打印出a,为什么能执行就是有预编译的过程
   function box (){        console.log("a");
   }    
   var a =123;    console.log(a);//输出123
   console.log(a);//输出undefined,不报错;
    var a = 123;    
    //但是如果直接打印会报错;
    console.log(b)//报错
    //也是预编译的效果
    
    //如果想偷懒记住两句话
    //函数声明整体提升
    //变量 声明提升

解释一下函数声明正题提升: 如果你写一个函数声明,不管你写到哪里,系统总会把这个函数提到逻辑的最前面,所以你不管在哪里调用,在上面调用也好,下面调用也罢,本质上他都是在函数的下面调用,他会把函数声明永远给你提升到逻辑的最前面

变量 声明提升比如

var a = 123;//实际上他是两部var a;//先声明变量
   a = 123;//在变量赋值

所以系统提升的变量 而不是变量带着值一起提升,所以在例子中a是打印出undefined;

注意,这两句话不是万能的

比如

function a(a){    var a = 123;    var a = function(){        
    }
    a();
}var a = 123;

这个就不是那两句话可以解决的

在解释上面的之前,要先用弄什么是impiy global

imply globa:暗示全局变量: 即任何变量,如果变量未经声明就赋值,自变量就位全局对象所有

eg : a = 123;

eg : var a = b = 123;

a = 10;console.log(a);//打印10然后在window属性上有了awindow.a//10var b = 20;//你声明了window也有bwindow就是全局的域

预编译正式

创建AO对象

找形参和变量声明,将变量和形参名作为AO属性名,值为undefined

将实参值和形参统一

在函数体里面找函数声明,值赋予函数体

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

这个例子,参数,变量,函数名字都叫a,首先可以确定的是肯定会发生一个覆盖的现象,这样子就很矛盾前面说了函数的预编译执行在函数执行的前一刻,可以这样子说,预编译就把这些矛盾给调和了.

首先预编译的

第一步 : 创建了一个AO对象,全称是Activation object 也就是作用域,也叫执行期上下文

AO{    
}

第二步 : 找形参和变量声明,将变量和形参名作为AO属性名,值为undefined

AO{    a : undefined
    b : undefined
}

第三步 : 将实参值和形参统一

AO{    a : 1;    b : undefined
}

第四步 : 在函数体里面找函数声明,值赋予函数体

AO{    a : 1,    b : undefined,    //b是是函数表达式,不是函数声明,所以不变
    //然后有a了 有b了,然后将这个函数声明的名作为AO对象挂起来
    d : 
}//然后值赋予函数体,也就是把a和b的属性值,变成函数体//覆盖掉a 和b的的属性值//也就变成下面的//因为第四步的优先级最高AO{    a : function a () {}
    b : undefined,    //b是是函数表达式,不是函数声明,所以不变
    d : function d () {}
}

至此预编译过程结束,开始执行代码,执行函数

然后我们在看上面的例子

//预编译结果AO{    a : function a () {}
    b : undefined,    d : function d () {}
}//开始执行代码function fn (a){    //第一步开始打印a
    //根据上面预编译的结果,
    //所以打印结果是function a () {}
    console.log(a);    
    //第二步执行 var a = 123;
    //因为在预编译的第二步里面,变量已经提升了
    //所以第二步只执行的赋值
    //a = 123;去AO对象里面去找a
    //也就变成
    //AO{
        //a : 123   这个才是a的存储值
        //b : undefined,
        //d : function d () {}
    //}
    var a = 123;    //所以打印出123
    console.log(a);    //因为这句在话在预编译的时候系统已经看了
    //所以不在看这句话
    function a (){};    //所以下面的console.log(a)
    //还是打印123;
    console.log(a);    //一样下面的var b这句话在预编译的时候已经看了,所以不在看
    //AO{
        //a : 123   
        //所以b的值变成function(){}
        //b : function(){}
        //d : function d () {}
    //}
    var b = function (){
        
    }    //所以打印出function(){}
    console.log(b);
        
}

fn(1);

我们在看个例子

function test(a , b){    console.log(a);
    c = 0;    var c;
    a = 3;
    b = 2;    console.log(b);    function b () {}    console.log(b);
}//这下我们就很快的得出打印的东西//a-->1//b-->2//b-->2

预编译不只会在函数体里面,也会发生在全局里面

全局里面的第一步是先生成GO Global Object,其他一样

GO === window

那么问题来了是GO先还是AO先

答案是先执行GO

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

相关阅读:

基础的JavaScript知识总结(六)函数、初始作用域(上)

基础的JavaScript知识总结(六)函数、初始作用域(下)

基础的JavaScript知识总结(七)递归

以上是基础的JavaScript知识总结(八)预编译执行过程的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn