一、js运行三部曲:

1.语法分析(通篇扫描看有没有语法错误)

2.预编译

3.解释执行

二、预编译前奏

  1、imply global 暗示全局变量:任何变量如果未经声明就赋值,此变量为全局对象所有

    eg: a = 123;

    var a = b =123;

  2、一切声明的全局变量,全是window的属性,一切定义在全局上的变量,都归window所有(window等价于全局)

    eg:    console.log(a)   等价于  console.log(window.a);

   举个例子:

<script>

function test(){
var a = b = 123;
} test();
console.log(b); </script>

其结果为:123

如果将console.log(b) 改成 console.log(a) 则会出现 “ReferenceError: a is not defined” 的错误。

这是因为执行test()函数时,先对  b赋值,使 b=123, 然后再 var a 进行声明, 最后使a=b,

b在未声明的时候进行赋值,所以为全局变量,可以在函数外访问,而a则是局部变量,不能再函数外访问

三、预编译的两个规则:

  a.函数声明整体提升 :  函数声明不管位于哪里,系统总会把声明提升到逻辑的最前面,因此无论函数调用在声明前或声明后结果都一样

  b.变量   声明提升:会把变量的声明提升到函数调用前面

举两个小例子:

<script>

  test();

  functiont  test(){

  console.log('a');

  }

</script>

输出的结果为: a

<script>
console.log(a);
var a = 123;
</script>

输出结果为:undefined;

四、预编译四部曲(函数预编译时)

  通过下面例子进行讲解

<script type="text/javascript">
function fn(a) {
console.log(a);
var a = 123;
console.log(a);
function a() {}
console.log(a);
var b = function() {}
console.log(b);
function d() {}
} fn(1);
1.创建AO对象 (Activation object)(执行期上下文)
AO{ } 2:找形参和变量声明,将变量和形参名作为AO()属性名,值为undefined
AO{
a:undefined
b:undefined
} 3.将实参值和形参值统一
AO{
a:1
b:undefined
} 4.在函数体里找函数声明,值赋予函数体
AO{
a:function a(){}
b:undefined
d:function d(){}
}
预编译完后进行执行:
    首先一句一句执行,执行第一句console.log(a);那么,会在AO对象中调取a,在AO对象中a等于function a(){},那么就输出function a(){}
  然后到达第二句 var a = 123,var a 已经被提升了,所以不用管,直接到a = 123,所以,在AO对象中,a变成了123
  AO对象变成123后,再来进行执行第三句,console.log(a);那么,现在a等于123,那么就是输出123,
  到达第四句,第四句是函数,由于函数已经被提升了,所以没有这一步,然后再到第五句,第五句是console.(a),所以输出还是123吧
  然后再到第六句,第六句是var b = function (){},所以就要把在AO对象中的b的属性改为function(){}
  所以在第七句b的输出就是function(){},第八句直接被提升了,所以不用读了。 结果为:
function a(){}
123
123
function (){} 全局预编译:
生成一个GO global object对象(等价于window) 例:
  
<script>
global = 100;
function fn(){
console.log(global);
global=200;
console.log(global);
var global=300;
}
fn();
var global;
</script>

 结果为:

undefined
200 执行过程:首先生成GO{
global:undefined
}
执行第一行:global = 100
执行fn()时生成AO{
global = undefined;
} 注意
  js不是全文编译完成再执行,而是块编译,即一个script块中预编译然后执行,再按顺序预编译下一个script块再执行
  但是此时上一个script快中的数据都是可用的了,而下一个块中的函数和变量则是不可用的。
 

JavaScript预编译详解的更多相关文章

  1. JS预编译详解

    我们都知道javascript是解释型语言,执行的特点呢是编译一行,执行一行.按照这个思路有时候我们在运行代码时会有一些令人费解的现象出现.下面我们一起来执行下面三段代码. <script> ...

  2. C中预编译详解

    预处理过程扫描源代码,对其进行初步的转换,产生新的源代码提供给编译器.可见预处理过程先于编译器对源代码进行处理.在C 语言中,并没有任何内在的机制来完成如下一些功能:在编译时包含其他源文件.定义宏.根 ...

  3. JavaScript严格模式详解

    转载自阮一峰的博客 Javascript 严格模式详解   作者: 阮一峰 一.概述 除了正常运行模式,ECMAscript 5添加了第二种运行模式:"严格模式"(strict m ...

  4. Sentry(v20.12.1) K8S 云原生架构探索,SENTRY FOR JAVASCRIPT Source Maps 详解

    系列 Sentry-Go SDK 中文实践指南 一起来刷 Sentry For Go 官方文档之 Enriching Events Snuba:Sentry 新的搜索基础设施(基于 ClickHous ...

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

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

  6. 从mixin到new和prototype:Javascript原型机制详解

    从mixin到new和prototype:Javascript原型机制详解   这是一篇markdown格式的文章,更好的阅读体验请访问我的github,移动端请访问我的博客 继承是为了实现方法的复用 ...

  7. [转]javascript console 函数详解 js开发调试的利器

    javascript console 函数详解 js开发调试的利器   分步阅读 Console 是用于显示 JS和 DOM 对象信息的单独窗口.并且向 JS 中注入1个 console 对象,使用该 ...

  8. javascript 节点属性详解

    javascript 节点属性详解 根据 DOM,html 文档中的每个成分都是一个节点 DOM 是这样规定的:整个文档是一个文档节点每个 html 标签是一个元素节点包含在于 html 元素中的文本 ...

  9. (" use strict")Javascript 严格模式详解

    Javascript 严格模式详解 转载别人的博客内容,浏览了一遍,没有全部吸收,先保存一下链接 http://www.ruanyifeng.com/blog/2013/01/javascript_s ...

随机推荐

  1. 为MAC配置终端环境iTerm2+Zsh+oh-my-zsh

    首先展示下我的终端吧. 这就是我们为什么要配置iTerm2+Zsh+oh-my-zsh环境的原因: 我们使用zsh解释器,当然等你使用 zsh时就会知道zsh与bash对比的强大之处了. 至于我们的g ...

  2. SpringBoot相知

    前言 这篇文章的将介绍表单验证,AOP处理请求和统一异常处理,案例是延续上一篇 SpringBoot初识 表单验证 现在将要拦截未满18岁的女生,在之前GirlController里面添加一个女生的方 ...

  3. LeetCode133:Clone Graph

    题目: Clone an undirected graph. Each node in the graph contains a label and a list of its neighbors. ...

  4. 全自动baidu云盘下载脚本

    20141231<吃元宵>孔云龙_6平米.MP3 20141231<家庭论>李云杰_6平米.MP3 20141231<劫皇杠>李昊洋_6平米.MP3 2014123 ...

  5. C#存储过程调用的三个方法

    //带参数的SQL语句 private void sql_param() { SqlConnection conn = new SqlConnection("server=WIN-OUD59 ...

  6. C#不用union,而是有更好的方式实现

    用过C/C++的人都知道有个union,特别好用,似乎char数组到short,int,float等的转换无所不能,也确实是能,并且用起来十分方便.那C#为什么没有这个关键字呢?怎么实现这个功能?其实 ...

  7. 2D and 3D Linear Geometry Kernel ( Geometry Kernels) CGAL 4.13 -User Manual

    1 Introduction CGAL, the Computational Geometry Algorithms Library, is written in C++ and consists o ...

  8. 消息中间件(Kafka/RabbitMQ)收录集

    https://blog.csdn.net/u013256816/article/details/54743481

  9. Java基础学习篇---------this、object的学习

    一.this的学习方法 1.使用this调用构造方法市一定放在构造方法的首行 2.使用this调用构造方法时一定流出调用的出口 public class MyClass { public MyClas ...

  10. python使用venv环境报Python.h : No such file or direc

    这个是因为域名 install python36的时候没有按照python36-devel ,只需要 yum install python36-devel 然后重新安装所需模块即可.