一起来了解一下JavaScript的预编译(小结)


Posted in Javascript onMarch 01, 2021

JS运行三部曲

js运行代码共分三步

  • 语法分析
  • 预编译
  • 解释执行

JavaScript代码在运行时,首先会进行语法分析,通篇检查代码是否存在低级错误,然后进行预编译,整理内部的一个逻辑,最后再开始一行一行的执行代码

语法分析

代码在执行之前,系统会通篇扫描一遍,检查代码有没有低级的语法错误,比如少写个大括号。

预编译

预编译前奏

预编译发生在函数执行的前一刻。变量未经声明就赋值,此变量为全局对象所有

a = 3

var b = c = 4

一切声明的全局变量,全是window的属性

var a = 1 ===> window.a = 1

预编译四部曲

  1. 创建AO(Activation Object)对象(里面存储的是函数内部的局部变量)
  2. 找形参和变量声明,将变量和形参名做为AO属性名,值为undefined
  3. 将实参和形参统一
  4. 在函数体里面找函数声明,值赋予函数体

用一个例子来说明一下,也可以自己先给出一个答案,再继续往下看

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() {}
 console.log(d)
}
fn(1);

第一步,创建AO(Activation Object)对象 {}第二步,找形参和变量声明,将变量和形参名做为AO属性名,值为undefined

{
 a: undefined,
 b: undefined,
}

第三步,将实参和形参统一

{
 a: 1,
 b: undefined,
}

第四步,找函数声明,值赋予函数体

{
 a: function a() {},
 b: undefined,
 d: function d() {}
}

所以在函数fn执行的前一刻,a、b、d的值如上所示

所以fn(1)执行的结果为

// ƒ a() {}
// 123
// 123
// ƒ () {}
// ƒ d() {}

在全局作用域里,预编译过程有些许不同

  • 创建GO(Global Object)对象(里面存储的是函数内部的全局变量)GO === window
  • 找形参和变量声明,将变量和形参名做为GO属性名,值为undefined
  • 在函数体里面找函数声明,值赋予函数体

解释执行

一行一行的执行代码

实践题

这里有几个例题,有兴趣的可以看一下

function test(a, b) {
 console.log(a);
 console.log(b);
 var b = 234;
 console.log(b);
 a = 123;
 console.log(a);
 function a() {}
 var a;
 b = 234;
 var b = function() {};
 console.log(a);
 console.log(b);
}
test(1);
global = 100;
function fn() {
 console.log(global);
 global = 200;
 console.log(global);
 var global = 300;
}
fn();
var global;
function test() {
 console.log(b);
 if (a) {
  var b = 100;
 }
 c = 234;
 console.log(c);
}
var a;
test();
a = 10;
console.log(c);

总结

多数情况下,我们都是采用下面的这种方式来处理预编译的一个过程

  • 函数声明,整体提升
  • 变量声明,声明提升

若是遇见复杂的情况就只能采用最原始的方式来解决问题了

到此这篇关于一起来了解一下JavaScript的预编译(小结)的文章就介绍到这了,更多相关JavaScript 预编译内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
更优雅的事件触发兼容
Oct 24 Javascript
jQuery中复合属性选择器用法实例
Dec 31 Javascript
深入理解JS函数的参数(arguments)的使用
May 28 Javascript
浅谈jQuery中的eq()与DOM中element.[]的区别
Oct 28 Javascript
JS实现HTML标签转义及反转义
Apr 14 Javascript
关于jQuery中fade(),show()起始位置的一点小发现
Apr 25 jQuery
AngularJS页面带参跳转及参数解析操作示例
Jun 28 Javascript
解决canvas画布使用fillRect()时高度出现双倍效果的问题
Aug 03 Javascript
JavaScript中的return布尔值的用法和原理解析
Aug 14 Javascript
vue双花括号的使用方法 附练习题
Nov 07 Javascript
vue实现多个元素或多个组件之间动画效果
Sep 25 Javascript
vue使用el-upload上传文件及Feign服务间传递文件的方法
Mar 15 Javascript
vue实现桌面向网页拖动文件的示例代码(可显示图片/音频/视频)
Mar 01 #Vue.js
three.js 实现露珠滴落动画效果的示例代码
Mar 01 #Javascript
详解js创建对象的几种方式和对象方法
Mar 01 #Javascript
vue 使用饿了么UI仿写teambition的筛选功能
Mar 01 #Vue.js
vue实现拖拽进度条
Mar 01 #Vue.js
vue 使用 v-model 双向绑定父子组件的值遇见的问题及解决方案
Mar 01 #Vue.js
js闭包和垃圾回收机制示例详解
Mar 01 #Javascript
You might like
对javascript和select部件的结合运用
2006/10/09 PHP
php防止sql注入代码实例
2013/12/18 PHP
PHP获取浏览器信息类和客户端地理位置的2个方法
2014/04/24 PHP
php中函数前加&符号的作用分解
2014/07/08 PHP
PHP书写格式详解(必看)
2016/05/23 PHP
PHP定义字符串的四种方式详解
2018/02/06 PHP
PHP框架实现WebSocket在线聊天通讯系统
2019/11/21 PHP
三种方式获取XMLHttpRequest对象
2014/04/21 Javascript
javascript动态创建及删除元素的方法
2014/12/22 Javascript
BootStrap glyphicons 字体图标实现方法
2016/05/01 Javascript
JS实现加载时锁定HTML页面元素的方法
2017/06/24 Javascript
微信小程序实现多个按钮的颜色状态转换
2019/02/15 Javascript
js实现移动端tab切换时下划线滑动效果
2019/09/08 Javascript
vue学习之Vue-Router用法实例分析
2020/01/06 Javascript
关于引入vue.js 文件的知识点总结
2020/01/28 Javascript
vue 使用插槽分发内容操作示例【单个插槽、具名插槽、作用域插槽】
2020/03/06 Javascript
vue中实现拖动调整左右两侧div的宽度的示例代码
2020/07/22 Javascript
vue+Element-ui前端实现分页效果
2020/11/15 Javascript
Python生成验证码实例
2014/08/21 Python
Python代码调试的几种方法总结
2015/04/15 Python
python判断字符串是否是json格式方法分享
2017/11/07 Python
wxPython之解决闪烁的问题
2018/01/15 Python
如何解决django-celery启动后迅速关闭
2019/10/16 Python
基于Python实现天天酷跑功能
2021/01/06 Python
python Protobuf定义消息类型知识点讲解
2021/03/02 Python
使用css3匹配手机屏幕横竖状态
2014/01/27 HTML / CSS
英国打印机墨水和碳粉商店:Printerinks
2017/06/30 全球购物
世界汽车零件:World Car Parts
2019/09/04 全球购物
安德玛菲律宾官网:Under Armour菲律宾
2020/07/28 全球购物
揭牌仪式策划方案
2014/05/28 职场文书
司法局火灾防控方案
2014/06/05 职场文书
2014年最新个人对照检查材料范文
2014/09/25 职场文书
市场总监岗位职责
2015/02/11 职场文书
一年级语文教学随笔
2015/08/14 职场文书
演讲开头怎么书写?
2019/08/06 职场文书
java协程框架quasar和kotlin中的协程对比分析
2022/02/24 Java/Android