javascript预编译

刻刻帝丶      2022-02-07     839

关键词:

今天用了大量时间复习了作用域,预编译等等知识
看了很多博文,翻开了以前看过的书
发现当初觉得自己学的很明白,其实还是存在一些思维误区
今晚就整理了一下凌乱的思路
先整理一下预编译的知识吧,日后有时间再把作用域详细讲解一下


大家要明白,这个预编译和编译是不一样的
JavaScript是解释型语言,
既然是解释型语言,就是编译一行,执行一行
传统的编译会经历很多步骤,分词、解析、代码生成什么的
日后有时间再给大家科普
下面就给大家分享一下我所理解的JS预编译

JavaScript运行三部曲

页面加载完都做了什么呢?

  1. 语法分析
  2. 预编译
  3. 解释执行

在执行代码前,还有两个步骤
语法分析很简单,就是引擎检查你的代码有没有什么低级的语法错误
解释执行顾名思义便是执行代码了
预编译简单理解就是在内存中开辟一些空间,存放一些变量与函数
理解了预编译对大家理解作用域同样有帮助

JS预编译什么时候发生

我当初思维误区也发生在这了
预编译到底什么时候发生
希望大家不要让上面的运行三部曲让你产生误会,
误以为预编译发生在script内代码块执行前
这倒并没有错
预编译确确实实在script代码内执行前发生了
但是它大部分会发生在函数执行前

JS预编译实例

举例前,先来思考一下这几个概念:

  • 变量声明 var…
  • 函数声明 function…
<script>
    var a = 1;// 变量声明
    function b(y){//函数声明
        var x = 1;
        console.log(‘so easy‘);
    };
    var c = function(){//是变量声明而不是函数声明!!
        //...
    }
    b(100);
</script>
<script>
    var d = 0;
</script>

让我们看看引擎对这段代码做了什么吧

  • 页面产生便创建了GO全局对象(Global Object)(也就是大家熟悉的window对象)
  • 第一个脚本文件加载
  • 脚本加载完毕后,分析语法是否合法
  • 开始预编译
    • 查找变量声明,作为GO属性,值赋予undefined
    • 查找函数声明,作为GO属性,值赋予函数体
//伪代码
GO/window = {
    //页面加载创建GO同时,创建了document、navigator、screen等等属性,此处省略
    a: undefined,
    c: undefined,
    b: function(y){
        var x = 1;
        console.log(‘so easy‘);
    }
}
  • 解释执行代码(直到执行函数b)
//伪代码
GO/window = {
    //变量随着执行流得到初始化
    a: 1,
    c: function(){
        //...
    },
    b: function(y){
        var x = 1;
        console.log(‘so easy‘);
    }
}
  • 执行函数b之前,发生预编译
    • 创建AO活动对象(Active Object)
    • 查找形参和变量声明,值赋予undefined
    • 实参值赋给形参
    • 查找函数声明,值赋予函数体
//伪代码
AO = {
    //创建AO同时,创建了arguments等等属性,此处省略
    y: 100,
    x: undefined
}
  • 解释执行函数中代码
  • 第一个脚本文件执行完毕,加载第二个脚本文件
  • 第二个脚本文件加载完毕后,进行语法分析
  • 语法分析完毕,开始预编译
    • 重复最开始的预编译步骤……

大家要注意,
预编译阶段发生变量声明和函数声明,没有初始化行为(赋值),匿名函数不参与预编译
只有在解释执行阶段才会进行变量初始化
嗯~最后收一下尾

总结

预编译(函数执行前)※
1. 创建AO对象(Active Object)
2. 查找函数形参及函数内变量声明,形参名及变量名作为AO对象的属性,值为undefined
3. 实参形参相统一,实参值赋给形参
4. 查找函数声明,函数名作为AO对象的属性,值为函数引用

预编译(脚本代码块script执行前)
1. 查找全局变量声明(包括隐式全局变量声明,省略var声明),变量名作全局对象的属性,值为undefined
3. 查找函数声明,函数名作为全局对象的属性,值为函数引用


理解了预编译对理解提升行为,this指向,作用域及性能等问题都有很大帮助
以后我也会总结这些问题+_+额好累

































javascript的预编译和执行

 JavaScript引擎,不是逐条解释执行javascript代码,而是按照代码块一段段解释执行。所谓代码块就是使用<script>标签分隔的代码段。整个代码块共有两个阶段,预编译阶段和执行阶段一、编译阶段对于常见编译型语言(例... 查看详情

浅谈javascript预编译原理

这两天又把js的基础重新复习了一下,很多不懂得还是得回归基础,大家都知道js是解释性语言,就是编译一行执行一行,但是在执行的之前,系统会做一些工作:1,语法分析;2,预编译;3,解释执行。语法分析很简单,就是引擎... 查看详情

javascript预编译学习(代码片段)

JavaScript预编译在重新学习JavaScript之前,先了解一下JavaScript从编译到执行的过程,大致分为四步:词法分析语法分析:检查代码是否存在错误,若有错误,引擎会抛出语法错误。同时会构建一颗抽象语法树... 查看详情

javascript预编译(代码片段)

预编译分为两种:函数预编译(函数执行的前一刻执行)全局预编译(页面加载完成时执行)函数执行编译步骤:创建ActivationObject找形参和变量声明,将变量声明和形参作为AO的属性名,值为undefined将实参和形参值统一在函数体内找函... 查看详情

javascript预编译(代码片段)

预编译分为两种:函数预编译(函数执行的前一刻执行)全局预编译(页面加载完成时执行)函数执行编译步骤:创建ActivationObject找形参和变量声明,将变量声明和形参作为AO的属性名,值为undefined将实参和形参值统一在函数体内找函... 查看详情

更好地理解 javascript 预编译

】更好地理解javascript预编译【英文标题】:Abetterunderstandingofjavascriptprecompile【发布时间】:2015-04-2111:36:12【问题描述】:varfoo=1;functionbar()foo=10;return;functionfoo()bar();alert(foo);我目前正在学习javascript是如何在机器中实际运行的,这... 查看详情

Javascript - 预编译的正则表达式性能

】Javascript-预编译的正则表达式性能【英文标题】:Javascript-Precompiledregexperformance【发布时间】:2013-02-1823:38:12【问题描述】:在this帖子中,据说预编译正则表达式将提高脚本性能。作者通过performancetest证明了这一点。但是,据... 查看详情

javascript之预编译学习(附带多个面试题)(代码片段)

前言在学习JavaScript预编译之前,先了解一下JavaScript从编译到执行的过程,大致分为四步:词法分析语法分析:检查代码是否存在错误,若有错误,引擎会抛出语法错误。同时会构建一颗抽象语法树(AST)。... 查看详情

javascript之预编译学习(附带多个面试题)(代码片段)

前言在学习JavaScript预编译之前,先了解一下JavaScript从编译到执行的过程,大致分为四步:词法分析语法分析:检查代码是否存在错误,若有错误,引擎会抛出语法错误。同时会构建一颗抽象语法树(AST)。... 查看详情

Rails 3.1 资产预编译 - 包括所有 javascript 文件

】Rails3.1资产预编译-包括所有javascript文件【英文标题】:Rails3.1assetprecompilation-includealljavascriptfiles【发布时间】:2011-11-0819:59:16【问题描述】:我希望Rails3.1获取更多我的资产进行预编译。特别是,编译文件的默认匹配器不会添... 查看详情

个人对javascript预编译的理解

什么是js的预编译马上要找工作了,之前学习JS都是很基础的皮毛,作为当前最火热的语言,本人一定是要研究的,然而刚接触到预编译我就快疯了,对于一个脑子不好使的人来说真的太绕了,饶了好久也不知道有没有绕明白,... 查看详情

5分钟教你读懂javascript预编译和函数执行(代码片段)

JavaScript运行三部曲JavaScript在展示页面之前会提前进行编译,因此也称之为预编译,而预编译基本分为三部分    语法分析----  (有没有基本的语法错误,例如中文,关键字错误...)    词法分析(预编译... 查看详情

javascript预编译流程详解(代码片段)

1-JavaScript运行三部曲1.语法分析2.预编译3.解释执行语法分析很简单,就是引擎检查你的代码有没有什么低级的语法错误;解释执行顾名思义便是执行代码了;预编译简单理解就是在内存中开辟一些空间,存放一些变量与函数;2-J... 查看详情

js中的预编译(词法分析)阶段和执行阶段

javascript相对于其它语言来说是一种弱类型的语言,在其它如java语言中,程序的执行需要有编译的阶段,而在javascript中也有类似的“预编译阶段”(javascript的预编译是以代码块为范围<script></script>,即每遇到一个... 查看详情

jQuery 或原始 JavaScript 是不是预编译或缓存变量表达式或选择器?

】jQuery或原始JavaScript是不是预编译或缓存变量表达式或选择器?【英文标题】:DojQueryorrawJavaScriptprecompileorcachevariableexpressionsorselectors?jQuery或原始JavaScript是否预编译或缓存变量表达式或选择器?【发布时间】:2012-11-1807:24:15【... 查看详情

javascript预解析和作用域

JavaScript解析过程分为两个阶段:一是:编译阶段.就是JavaScrip预解析阶段,在这个阶段JavaScript解析器将完成把JavaScript脚本代码转换到字节码;二是:执行阶段.在编译阶段JavaScript解析器借助执行环境把字节码生成机械码,并顺序执行;预... 查看详情

预编译(代码片段)

javascript预编译部分  JavaScript当中不向其他的语言一样,在js中我们会看到一些奇怪的现象就像我们可以在函数声明之前去访问这个函数的名字,并且能够打印出函数体,而且我们还能在变量声明之前去访问这个变量,虽然值... 查看详情

rails4 rake assets 在生产环境中预编译生成错误的javascript文件

】rails4rakeassets在生产环境中预编译生成错误的javascript文件【英文标题】:rails4rakeassetsprecompileinproductionenvironmentgeneratewrongjavascriptfile【发布时间】:2015-08-3108:33:28【问题描述】:我正在部署我的rails应用程序,我发现当我运行RAIL... 查看详情