JavaScript 详解预编译原理


Posted in Javascript onJanuary 22, 2017

JavaScript 预编译原理

今天用了大量时间复习了作用域、预编译等等知识

看了很多博文,翻开了以前看过的书(好像好多书都不会讲预编译)

发现当初觉得自己学的很明白,其实还是存在一些思维误区 (很多博文具有误导性)

今晚就整理了一下凌乱的思路

先整理一下预编译的知识吧,日后有时间再把作用域详细讲解一下

大家要明白,这个预编译和传统的编译是不一样的(可以理解js预编译为特殊的编译过程)

JavaScript是解释型语言,

既然是解释型语言,就是编译一行,执行一行

传统的编译会经历很多步骤,分词、解析、代码生成什么的

日后有时间再给大家科普

下面就给大家分享一下我所理解的JS预编译

JavaScript运行三部曲

脚本执行js引擎都做了什么呢?

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

在执行代码前,还有两个步骤

语法分析很简单,就是引擎检查你的代码有没有什么低级的语法错误

解释执行顾名思义便是执行代码了

预编译简单理解就是在内存中开辟一些空间,存放一些变量与函数

理解了预编译对大家理解作用域同样有帮助

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>

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

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之前,发生预编译

  • 创建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 相关文章推荐
脚本吧 - 幻宇工作室用到js,超强推荐base.js
Dec 23 Javascript
[IE&amp;FireFox兼容]JS对select操作
Jan 07 Javascript
javascript中的注释使用与注意事项小结
Sep 20 Javascript
关于JavaScript中string 的replace
Apr 12 Javascript
浅析JavaScript中两种类型的全局对象/函数
Dec 05 Javascript
详解JavaScript函数对象
Nov 15 Javascript
JSONP基础知识详解
Mar 19 Javascript
ES6学习教程之对象字面量详解
Oct 09 Javascript
jQuery阻止事件冒泡实例分析
Jul 03 jQuery
VUE 实现滚动监听 导航栏置顶的方法
Sep 11 Javascript
使用Vue.js中的过滤器实现幂方求值的方法
Aug 27 Javascript
vue+Element-ui实现分页效果
Nov 15 Javascript
JavaScript中匿名函数的递归调用
Jan 22 #Javascript
Javascript中字符串和数字的操作方法整理
Jan 22 #Javascript
loading动画特效小结
Jan 22 #Javascript
全面总结Javascript对数组对象的各种操作
Jan 22 #Javascript
通过jsonp获取json数据实现AJAX跨域请求
Jan 22 #Javascript
JS实现点击表头表格自动排序(含数字、字符串、日期)
Jan 22 #Javascript
node.js基于mongodb的搜索分页示例
Jan 22 #Javascript
You might like
数据库中排序的对比及使用条件详解
2012/02/23 PHP
PHP中配置IIS7实现基本身份验证的方法
2015/09/24 PHP
YII框架中使用memcache的方法详解
2017/08/02 PHP
Javascript 中介者模式实例
2009/12/16 Javascript
jquery改变disabled的boolean状态的三种方法
2013/12/13 Javascript
javascript框架设计读书笔记之数组的扩展与修复
2014/12/02 Javascript
JavaScript模拟重力状态下抛物运动的方法
2015/03/03 Javascript
自定义刻度jQuery进度条及插件
2015/09/02 Javascript
JS实现动态表格的添加,修改,删除功能(推荐)
2016/06/15 Javascript
大型JavaScript应用程序架构设计模式
2016/06/29 Javascript
Javascript数组中push方法用法分析
2016/10/31 Javascript
javascript监听页面刷新和页面关闭事件方法详解
2017/01/09 Javascript
nodejs个人博客开发第二步 入口文件
2017/04/12 NodeJs
vue使用axios实现文件上传进度的实时更新详解
2017/12/20 Javascript
新手必须知的Node.js 4个JavaScript基本概念
2018/09/16 Javascript
[37:35]DOTA2上海特级锦标赛A组资格赛#1 Secret VS MVP.Phx第二局
2016/02/25 DOTA
Python正则表达式匹配和提取IP地址
2019/06/06 Python
Python面向对象程序设计之私有变量,私有方法原理与用法分析
2020/03/23 Python
Python开发入门——迭代的基本使用
2020/09/03 Python
Python3.9最新版下载与安装图文教程详解(Windows系统为例)
2020/11/28 Python
python 合并多个excel中同名的sheet
2021/01/22 Python
python批量提取图片信息并保存的实现
2021/02/05 Python
Pytorch如何切换 cpu和gpu的使用详解
2021/03/01 Python
五分钟学会HTML5的WebSocket协议
2019/11/22 HTML / CSS
Agoda香港:全球特价酒店预订
2017/05/07 全球购物
新西兰最大的品牌运动鞋购物网站:Platypus NZ
2017/10/27 全球购物
顶岗实习计划书
2014/01/10 职场文书
小学运动会广播稿200字(十二篇)
2014/01/14 职场文书
什么是就业协议书
2014/04/17 职场文书
节能环保标语
2014/06/12 职场文书
煤矿安全生产月活动总结
2014/07/05 职场文书
大学生个人简历自荐信
2015/03/06 职场文书
停电放假通知
2015/04/14 职场文书
字典算法实现及操作 --python(实用)
2021/03/31 Python
golang elasticsearch Client的使用详解
2021/05/05 Golang
Django drf请求模块源码解析
2021/06/08 Python