这两天又把js的基础重新复习了一下,很多不懂得还是得回归基础,大家都知道js是解释性语言,就是编译一行执行一行,但是在执行的之前,系统会做一些工作:

1,语法分析;

2,预编译;

3,解释执行。

语法分析很简单,就是引擎会简单的检查一下你的代码有没有什么低级的错误,解释执行就是执行代码,执行代码之前会进行预编译,预编译简单理解就是在内存中开辟一些空间,存放一些变量与函数。下面我详细说一下:

预编译可以简单的分成全局预编译和函数体预编译,函数体预编译可以从四个规则入手;

1,创建AO对象;AO{  }

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

3,将实参和形参统一;

4,在函数里找函数声明  ,赋值函数体。

记住以上四条规则,下面通过一个简单的案列说明一下:

function test(){
             console.log(a);
             console.log(b);
             var b = 234;//变量声明
             console.log(b);
             a = 123;//变量声明
             console.log(a);
             function a(){}//函数声明
             var a;
             b = 257;
             var b = function (){}//变量声明
             console.log(a);
             console.log(b);
            function c(y){//函数声明
            var y = 1;
    };             
         }
         test(1)
       让我们看看引擎对这段代码做了什么吧
       1,创建AO对象;Activation Object AO{  }
       2,找形参和变量声明,将变量和形参名作为AO的属性名,并赋值为undefined
       AO{
           b:undefined;
           a:undefined;
       
       }
       3,将实参和形参统一;
       4,在函数里找函数声明  ,赋值函数体。所以此时的a会被函数体替代
       AO{
           a:function a(){}
           b:undefined
           c:function c(y){
               var y = 1;
           }
       }
       当页面预处理完之后便会开始执行,根据编译一句执行一句的原则,此时console.log(a)的值自然为:function a(){},console.log(b)的值为:undefined.
       随后b被赋值为234,所以第二个console.log(b)的值为:234,以此类推,第二个console.log(a)的值为:123,
       b经历了第三次赋值257后,又被function(){}赋值,所以最后console.log(b)的值为:function(){},console.log(a)的值为:123,

全局预编译比函数体预编译少了第三条:

1,创建GO对象;即global objetct GO{  }

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

4,在函数里找函数声明  ,赋值函数体。

下面也通过一个简单的列子解释一下:

function test(){
             console.log(b);//undefined
             if(a){
                 var b = 100;
             }
             console.log(b)//undefined
             c = 456;
             console.log(c);//456
         }
         var a
         console.log(a)////undefined
         test()  
         a = 10;
         console.log(a)//10
         console.log(c)//456
         
         首先定义创建GO对象,随后将变量和形参作为属性名,并赋值为undefined,如下:
         GO{
             a:undefined;
             c:undefined;
         }
         然后在函数生命里赋值函数体,但此时没有函数体,所以不用赋值,
         下面就是开始执行语句,所以一第个console.log(a)为undefined;第二个为10,c为456(注意此时c没有命名,直接提升为全局变量)
         当执行到test()的时候会主动预编译function test()里面的内容,此时会创建AO对象.

还有一篇关于预编译的文章写的也比较清楚:http://blog.csdn.net/q1056843325/article/details/52951114

浅谈JavaScript预编译原理的更多相关文章

  1. JavaScript预编译原理分析

    一直对变量对象,活动对象,预编译,变量提升,执行上下文的时间顺序有着凌乱的认识,但是这些对理解JS语法有着很重要的作用.读了很多人的文章,都没有一个特别清晰的把这些写出来. 今天主要总结一下现阶段自己 ...

  2. 浅谈JavaScript DDOS 攻击原理与防御

    前言 DDoS(又名"分布式拒绝服务")攻击历史由来已久,但却被黑客广泛应用.我们可以这样定义典型的DDoS攻击:攻击者指使大量主机向服务器发送数据,直到超出处理能力进而无暇处理正 ...

  3. 浅谈JavaScript的闭包原理

    在一般的教程里,都谈到子作用域可以访问到父级作用域,进而访问到父级作用域中的变量,具体是如何实现的,就不得不提及到函数堆栈和执行上下文. 举个例子,一个简单的闭包:   首先,我们可以知道,examp ...

  4. javaScript 预编译过程浅尝

    javaScript 预编译过程 1.创建AO对象(Activation Object) AO{ a: } 2.找形参和变量声明,将变量和形参作为AO属性名,值为undefined AO{ a:und ...

  5. 浅谈 JavaScript 编程语言的编码规范

    对于熟悉 C/C++ 或 Java 语言的工程师来说,JavaScript 显得灵活,简单易懂,对代码的格式的要求也相对松散.很容易学习,并运用到自己的代码中.也正因为这样,JavaScript 的编 ...

  6. 浅谈JavaScript中的正则表达式(适用初学者观看)

    浅谈JavaScript中的正则表达式 1.什么是正则表达式(RegExp)? 官方定义: 正则表达式是一种特殊的字符串模式,用于匹配一组字符串,就好比用模具做产品,而正则就是这个模具,定义一种规则去 ...

  7. TODO:浅谈pm2基本工作原理

    TODO:浅谈pm2基本工作原理 要谈Node.js pm2的工作原理,需要先来了解撒旦(Satan)和上帝(God)的关系. 撒旦(Satan),主要指<圣经>中的堕天使(也称堕天使撒旦 ...

  8. 关于JavaScript预编译和执行顺序以及函数引用类型的思考

    昨晚在对项目中的一部分做模块化处理的时候,遇到了一个问题,一个重新定义的function对一个通用类中的function进行赋值覆盖的时候,失败了.问题抽象出来是这样的: <script > ...

  9. 浅谈javascript函数节流

    浅谈javascript函数节流 什么是函数节流? 函数节流简单的来说就是不想让该函数在很短的时间内连续被调用,比如我们最常见的是窗口缩放的时候,经常会执行一些其他的操作函数,比如发一个ajax请求等 ...

随机推荐

  1. P4249 [WC2007]剪刀石头布

    有一个竞赛图,要给一些边定向,求三元环最多的数量 反过来考虑最少的不是环的三个点(称为不好的环),一定有一个点有2条入边,一个点有2条出边,一个点1入边1出边 可以对每一个不好的环只记录入边为2的点, ...

  2. Flutter - 创建横跨所有页面的侧滑菜单

    前一篇博客讲到了如何创建侧滑菜单,但是再实际使用过程中,会发现,这个策划菜单只能在首页侧滑出来. 当导航到其他页面后,侧滑就不管用了.这也有点不符合良好的用户体验设计.Google Play就是很好的 ...

  3. 图片转换成word 公式

    1 下载安装mathpix, 利用该软件将图片转换成LaTeX公式 2 参考此帖,将LaTeX公式转换成word公式 https://www.douban.com/note/648629593/ ht ...

  4. CentOS安装Zabbix Agent

    rpm -i http://repo.zabbix.com/zabbix/3.4/rhel/7/x86_64/zabbix-release-3.4-2.el7.noarch.rpm安装存储库 yum ...

  5. 【Unity Shader】(八) ------ 高级纹理之立方体纹理及光线反射、折射的实现

    笔者使用的是 Unity 2018.2.0f2 + VS2017,建议读者使用与 Unity 2018 相近的版本,避免一些因为版本不一致而出现的问题.    [Unity Shader](三) -- ...

  6. Unity在OpenGL模式下Shader编译报错

    报错信息 GLSL compilation failed: 0(21) : error C7528: OpenGL reserves names containing '__' 双击报错VS自动打开V ...

  7. 服务治理-> Spring Cloud Eureka

    服务治理->搭建服务注册中心 服务治理可以说是微服务架构中最为核心和基础的模块, 它主要用来实现各个微服务 实例的自动化注册与发现. 为什么我们在微服务架构中那么需要服务治理模块呢?微服务 系统 ...

  8. 如何布局您的PC站和移动站,并表达两者之间内容的对应关系

      如何布局您的PC站和移动站,并表达两者之间内容的对应关系 目前较流量的PC站与移动站配置方式有三种,百度站在搜索引擎角度将这三种分别称为跳转适配.代码适配和自适应,以下为这三种配置方式的名词解释及 ...

  9. java中JVM的原理

    转载:https://blog.csdn.net/witsmakemen/article/details/28600127 一.java虚拟机的生命周期: Java虚拟机的生命周期 一个运行中的Jav ...

  10. 跨域Ajax -- jsonp和cors

    跨域Ajax - jsonp - cors 参考博客: http://www.cnblogs.com/wupeiqi/articles/5703697.html http://www.cnblogs. ...