这两天又把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. 【linux报错】安装好虚拟机后,挂载光盘报错:mount:you must specify the filesystem type

    问题现象: 问题原因: 当时光盘的“已连接”的勾没有勾上 解决后:

  2. Using the Console[译]

    由于最近的项目需要大量用到浏览器端的js编码和调试,所以仔细阅读了一下Chrome对于开发者工具中js部分的说明.虽然原来也用这个工具,但读后仍然觉得受益匪浅.于是抽空翻译一下,与大家分享. 本人英文 ...

  3. Unity特殊文件夹详解

    ##1.Editor Editor文件夹可以在根目录下,也可以在子目录里,只要名子叫Editor就可以.比如目录:/xxx/xxx/Editor 和 /Editor 是一样的,无论多少个叫Editor ...

  4. 402. Remove K Digits/738.Monotone Increasing Digits/321. Create Maximum Number

    Given a non-negative integer num represented as a string, remove k digits from the number so that th ...

  5. 【Go】累加器的测试问题记录

    关于GoLang学习过程中的一个问题mark,教程上说两个累加器的地址应该是不一样的,但是实际测试出来结果一样 package main import( "fmt" ) func ...

  6. 在python脚本中设置环境变量,并运行相关应用

    1. 问题 在自动化应用的时候 ,有时候环境变量与运行需要不一致.这时候有两种选择: 改变节点环境变量,使得其和运行需求保持一致: 在自动化脚本中设置环境变量,其范围只在脚本运行环境中有效. 显然,当 ...

  7. OpenFastPath(1):快平面接口是否支持多ip

    1.配置环境 fp0接口上配置两个IP地址: fp0       Link encap:Ethernet  HWaddr 00:0c:29:30:38:db inet addr:192.168.56. ...

  8. IDEA主题设置

    主题下载: Color Themes(个人倾向该网站,而不是http://www.riaway.com/) 主题设置: 打开IDEA,按下Ctrl+Alt+S,选择Editor-->Color ...

  9. webpack入门指南-step04

    一.建立项目 建一个文件夹,然后新建一个package.json的文件在项目根目录下 如果你使用git管理你的这个项目的话,建议你新建一个.gitignore文件,不要让git提交一些node依赖的模 ...

  10. DB2分页查询简单示例

    select * from ( select a.* ,rownumber() over(order by create_time desc) as rowid from ( select * fro ...