简析JavaScript中的编译原理和提升

JS编译原理

JavaScript是一门可归类于"动态""解释执行"的编程语言,与传统的编程语言不同,它不是提前编译的,编译结果也不能在分布式系统中移植。通常一段源代码在执行之前会经历三个过程:

分词/词法分析

这个过程会将字符串分割为有意义的代码块,这些代码块称之为词法单元。例如变量的声明:
var a = 2;
这行代码会被分为以下词法单元:var、a、=、2(空格算不算词法单元取决于空格对于该编程语言是否具有意义);这些零散的词法单元会组成一个词法单元流(数组)进行解析。

解析/与法分析

这个过程会将词法单元流转换成一棵抽象语法树(Abstract Syntax Tree,AST)在线解析工具
var a = 2;的词法单元流就会被解析为下面的AST:

062AF4C4-FE8A-43BC-8D0B-A0B6C0B145F3.png

代码生成

将AST转化为可执行的代码。

整个过程看似很简单,但是在语法分析和代码生成阶段有很多坑等着踩。
这里又要引入几个概念了

成员:

1.引擎:负责整个过程中javascript的编译及执行过程。浏览器不同,其引擎也不同,比如Chrome采用的是v8,Safari采用的是SquirrelFish Extreme。
2.编译器:负责语法分析和代码生成。
3.作用域:负责收集并维护所有的标识符(变量)简析JavaScript中的作用域与作用域链

例子分析:

还是对最简单的例子进行分析,var a = 2;,首先进行词法分析,然后将词法单元流交给编译器生成AST,再有编译器生成可执行的代码。
   A.编译器遇到var a;会询问同一作用域集是否有存在同名的变量,如果有,就忽略该声明,继续编译;如果没有编译器就会要求作用域在当前作用域的集合生命一个新的变量,并命名为a。
   B.编译器会为引擎的运行生成一些列代码,这些代码用于为变量a进行赋值操作。引擎会询问当前作用域是否有这个变量的存在,如果有则进行赋值操作,如果没有就开始查找这个变量(从当前作用域向上查找,直到全局作用域,如果还是没有,就会抛出一个异常)。
   C.LHS和RHS,当引擎执行编译器给的代码(赋值操作)时,会通过查找这个变量来判断这个变量是否已经声明,这个过程需要作用域的协助,而查找的方式分为两种:LHS(“赋值操作的目标是谁”)、RHS(”谁是赋值操作的源头“)。例如下面这个例子:

 var a;  //RHS引用
 a = 2;  //LHS引用
 alert(a);  //RHS引用
/*这段代码块既有RHS引用也有LHS引用,
foo(2),2被当作函数参数传递给foo()时,2会被分配给变量a(a = 2);
*/
  function foo(a){
  alert(a);
}
  foo(2);

区分RHS和LHS也很重要,尤其分析异常时。例如下面这个例子:

function foo(a){
  alert(a + b); 
  b = a;
}
foo(2);

第一次对b进行RHS查询会查询不到这个变量,因为它是一个未声明的变量,在所有作用域都无法找到(var b;);此时引擎会抛出一个异常(ReferenceError)。在非严格模式下,当引擎进行LHS查询查询不到某个变量时,全局作用域会创建一个同名的变量交给引擎,当然这个变量具有全局作用域;而在严格模式下,引擎会抛出ReferenceError的异常。

提升

变量和函数在内的声明都在任何代码执行前被处理。声明操作在编译阶段时进行的,而赋值操作是在等到执行阶段才执行。

//代码块1
  var a = 2;
  alert(a);  //  输出2
//代码块2 
  b = 2;
  var b;
  alert(b);  //输出2
//代码块3
  alert(c);  //输出undefined
  var c = 2;
//代码块4
  var d;
  alert(d); //输出undefined
  d = 2;

代码块2,4等价于代码块1,3(除了变量名不同,内存地址不同);这个过程就好像变量和函数声明的代码被移动到了最上面,这个过程就叫提升

函数声明可以提升,函数表达式不能提升。
//函数声明可以提升
foo();  //输出2;
function foo(){
  alert(2); 

//函数表达式不可提升
bar();  //TypeError
var bar = function f1(){
  alert(2);
}
函数声明优先于变量声明提升,出现在后面的函数声明可以覆盖之前的声明。
foo();  //输出3
function foo(){
  alert(1);
}
var foo = function bar(){
  alert(2);
}
function foo(){
  alert(3);
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 158,117评论 4 360
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 66,963评论 1 290
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 107,897评论 0 240
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,805评论 0 203
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,208评论 3 286
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,535评论 1 216
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,797评论 2 311
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,493评论 0 197
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,215评论 1 241
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,477评论 2 244
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,988评论 1 258
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,325评论 2 252
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,971评论 3 235
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,055评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,807评论 0 194
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,544评论 2 271
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,455评论 2 266

推荐阅读更多精彩内容