当前位置：首页 > 资讯 > 技术文档

JavaScript 详解预编译原理

时间：2022-10-16 18:21 编辑：来源：阅读：
扫一扫，手机访问

摘要：JavaScript 详解预编译原理

[b]JavaScript 预编译原理[/b] 今天用了大量时间复习了作用域、预编译等等知识看了很多博文，翻开了以前看过的书（好像好多书都不会讲预编译）发现当初觉得自己学的很明白，其实还是存在一些思维误区（很多博文具有误导性）今晚就整理了一下凌乱的思路先整理一下预编译的知识吧，日后有时间再把作用域详细讲解一下大家要明白，这个预编译和传统的编译是不一样的（可以理解js预编译为特殊的编译过程） JavaScript是解释型语言，既然是解释型语言，就是编译一行，执行一行传统的编译会经历很多步骤，分词、解析、代码生成什么的日后有时间再给大家科普下面就给大家分享一下我所理解的JS预编译 [b]JavaScript运行三部曲[/b] 脚本执行js引擎都做了什么呢？ [list] [*]语法分析[/*] [*]预编译[/*] [*]解释执行[/*] [/list] 在执行代码前，还有两个步骤语法分析很简单，就是引擎检查你的代码有没有什么低级的语法错误解释执行顾名思义便是执行代码了预编译简单理解就是在内存中开辟一些空间，存放一些变量与函数理解了预编译对大家理解作用域同样有帮助 [b]JS预编译什么时候发生[/b] 我当初思维误区也发生在这里预编译到底什么时候发生希望大家不要让上面的运行过程让你产生误会，误以为预编译仅仅发生在script内代码块执行前这倒并没有错预编译确确实实在script代码内执行前发生了但是它大部分会发生在函数执行前 [b]JS预编译实例[/b] 举例前，先来思考一下这几个概念： [list] [*]变量声明 var…[/*] [*]函数声明 function… [/*] [/list]

<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>

让我们看看引擎对这段代码做了什么吧 1.页面产生便创建了GO全局对象（Global Object）（也就是大家熟悉的window对象） 2.第一个脚本文件加载 3.脚本加载完毕后，分析语法是否合法 4.开始预编译查找变量声明，作为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之前，发生预编译 [list] [*]创建AO活动对象（Active Object）[/*] [*]查找形参和变量声明，值赋予undefined[/*] [*]实参值赋给形参[/*] [*]查找函数声明，值赋予函数体 [/*] [/list]

//伪代码
AO = {
  //创建AO同时，创建了arguments等等属性，此处省略
  y: 100,
  x: undefined
}

解释执行函数中代码第一个脚本文件执行完毕，加载第二个脚本文件第二个脚本文件加载完毕后，进行语法分析语法分析完毕，开始预编译重复最开始的预编译步骤…… [b]大家要注意， [/b] [b]预编译阶段发生变量声明和函数声明，没有初始化行为（赋值），匿名函数不参与预编译 [/b] [b]只有在解释执行阶段才会进行变量[/b]初始化嗯~最后收一下尾 [b]总结[/b] 预编译(函数执行前)※ 1. 创建AO对象（Active Object） 2. 查找函数形参及函数内变量声明，形参名及变量名作为AO对象的属性，值为undefined 3. 实参形参相统一，实参值赋给形参 4. 查找函数声明，函数名作为AO对象的属性，值为函数引用预编译(脚本代码块script执行前) 1. 查找全局变量声明（包括隐式全局变量声明，省略var声明），变量名作全局对象的属性，值为undefined 3. 查找函数声明，函数名作为全局对象的属性，值为函数引用理解了预编译对理解提升行为，this指向，作用域及性能等问题都有很大帮助感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

全部评论(0)

上一篇：理解Javascript的caller,callee,call,apply区别
下一篇：JavaScript arguments 多参传值函数

资讯排行榜
更多>>