这两天又把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. P4438 [HNOI/AHOI2018]道路

    辣稽题目 毁我青春 耗我钱财. 设\(f[x][i][j]\)为从1号点走到x点经过i条公路j条铁路,子树的最小代价. \(f[leaf][i][j]=(A+i)(B+j)C\) \(f[x][i][ ...

  2. window.location.hash 页面跳转,精确定位,实例展示:

    window.location.hash 页面跳转,精确定位,实例展示: (1).index.phtml,页面用于传参 <script id="bb_list_template&quo ...

  3. requests.get()解析

    1.requests.get(url, params=None, headers=None, cookies=None, auth=None, timeout=None) Sends a GET re ...

  4. 深入理解C/C++二维数组

    深入理解C/C++二维数组 前言 本来以为自己对二维数组的理解还可以,没感觉有什么,但是今天小伙伴问了一个问题感觉迷惑了好久,于是决定细致的记录一下,一步一步的探究各种关于二维数组的问题,巩固基础. ...

  5. lua中table的常用方法

    转载:https://blog.csdn.net/Fenglele_Fans/article/details/83627021 1:table.sort() language = {"lua ...

  6. 【SIKIA计划】_07_Unity3D游戏开发-坦克大战笔记

    [新增分类][AudioClips]音频剪辑[AudioMixers]音频混合器[Editor][Fonts]字体[Materials]材质[Models]模型[Standard Assets] [渲 ...

  7. Arthas Alibaba 开源 Java 诊断工具

    Arthas 用户文档 English Docs Arthas(阿尔萨斯) 能为你做什么? Arthas 是Alibaba开源的Java诊断工具,深受开发者喜爱. 当你遇到以下类似问题而束手无策时,A ...

  8. Django 前后端不分离 代码结构详解

    Demo:  hello_pycharm 根目录文件:hello_pycharm [__init__.py  __pycache__  settings.py  urls.py  wsgi.py] A ...

  9. linux一切皆文件之文件描述符(一)

    一.知识准备 1.在linux中,一切皆为文件,所有不同种类的类型都被抽象成文件.如:普通文件.目录.字符设备.块设备.套接字等 2.当一个文件被进程打开,就会创建一个文件描述符.这时候,文件的路径就 ...

  10. Bitcoin Core P2P网络层

    目录 数据结构 节点发现和节点连接 地址管理 节点发现 节点连接 插口(Sockets)和消息 Socket线程 (net.cpp) 消息线程 ProcessMessages (net_process ...