一起来了解一下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 相关文章推荐
In Javascript Class, how to call the prototype method.(three method)
Jan 09 Javascript
javascript 写的一个简单的timer
Jul 30 Javascript
Extjs改变树节点的勾选状态点击按钮将复选框去掉
Nov 14 Javascript
Jquery中children与find之间的区别详细解析
Nov 29 Javascript
jQuery中的$.ajax()方法应用
May 06 Javascript
JavaScript prototype属性详解
Oct 25 Javascript
javascript实现页面滚屏效果
Jan 17 Javascript
Mongoose实现虚拟字段查询的方法详解
Aug 15 Javascript
详解基于webpack2.x的vue2.x的多页面站点
Aug 21 Javascript
react redux入门示例
Apr 19 Javascript
JS中min函数实例讲解
Feb 18 Javascript
关于angular 8.1使用过程中的一些记录
Nov 25 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
php车辆违章查询数据示例
2016/10/14 PHP
php之可变变量的实例详解
2017/09/12 PHP
php 多继承的几种常见实现方法示例
2019/11/18 PHP
防止xss和sql注入:JS特殊字符过滤正则
2013/04/18 Javascript
JavaScript保留关键字汇总
2015/12/01 Javascript
Bootstrap 粘页脚效果
2016/03/28 Javascript
jQuery中的on与bind绑定事件区别实例详解
2017/02/28 Javascript
原生JS实现图片懒加载(lazyload)实例
2017/06/13 Javascript
vue-cli项目中怎么使用mock数据
2017/09/27 Javascript
vue 实现数字滚动增加效果的实例代码
2018/07/06 Javascript
js中获取URL参数的共用方法getRequest()方法实例详解
2018/10/24 Javascript
微信小程序实现登录注册tab切换效果
2020/12/29 Javascript
微信头像地址失效踩坑记附带解决方案
2019/09/23 Javascript
Vue项目中如何使用Axios封装http请求详解
2019/10/23 Javascript
[03:23]我的刀塔你不可能这么可爱 第一期金萌萌的故事
2014/06/20 DOTA
Python基于辗转相除法求解最大公约数的方法示例
2018/04/04 Python
python打包压缩、读取指定目录下的指定类型文件
2018/04/12 Python
Python实现的查询mysql数据库并通过邮件发送信息功能
2018/05/17 Python
对PyTorch torch.stack的实例讲解
2018/07/30 Python
python实现LRU热点缓存及原理
2019/10/29 Python
python实现异常信息堆栈输出到日志文件
2019/12/26 Python
Python3爬虫中Ajax的用法
2020/07/10 Python
html5是什么_动力节点Java学院整理
2017/07/07 HTML / CSS
HTML5拖放API实现自动生成相框功能
2020/04/07 HTML / CSS
mysql的最长数据库名,表名,字段名可以是多长
2014/04/21 面试题
合伙协议书范本
2014/04/21 职场文书
高一学生评语大全
2014/04/25 职场文书
开展党的群众路线教育实践活动工作总结
2014/11/05 职场文书
2014年个人教学工作总结
2014/12/09 职场文书
继续教育个人总结
2015/03/03 职场文书
指导老师鉴定意见
2015/06/05 职场文书
大学新生入学感想
2015/08/07 职场文书
关于五一放假的通知
2015/08/18 职场文书
Redis 配置文件重要属性的具体使用
2021/05/20 Redis
MySQL RC事务隔离的实现
2022/03/31 MySQL
python+opencv实现目标跟踪过程
2022/06/21 Python