浅谈Javascript引擎的工作原理

javascript解析引擎

javascript解析引擎(简称javascript引擎),是一个程序,是浏览器引擎的一部分。每个浏览器的javascript解析引擎都不一样(因为每个浏览器编写Javascript解析引擎的语言(C或者C++)以及解析原理都不相同)。标准的Javascript解析引擎会按照 ECMAScript文档来实现。虽然每个浏览器的Javascript解析引擎不同,但Javascript的语言性质决定了Javascript关键的渲染原理仍然是动态执行Javascript字符串。只是词法分析、语法分析、变量赋值、字符串拼接的实现方式有所不同。

当JavaScript引擎遇到代码是怎么工作的

JavaScript解析引擎就是根据ECMAScript定义的语言标准来动态执行JavaScript字符串。虽然之前说现在很多浏览器不全是按照标准来的,解释机制也不尽相同,但动态解析JS的过程还是分成两个阶段:语法检查阶段和运行阶段。

语法检查包括词法分析和语法分析,运行阶段又包括预解析和运行阶段(V8引擎会将JavaScript字符串编译成二进制代码,此过程应该归到语法检查过程中)。

第一阶段:语法检查

语法检查是JavaScript解析器工作的第一阶段,包括 词法分析 和 语法分析,过程大致如下:

一:词法分析
JavaScript解释器先把JavaScript代码(字符串)的字符流按照ECMAScript标准转换为记号流。

二:语法分析
JavaScript语法分析器在经过词法分析后,将记号流按照ECMAScript标准把词法分析所产生的记号生成语法树。

通俗地说就是把从程序中收集的信息存储到数据结构中,每取一个词法记号,就送入语法分析器进行分析。

当语法检查正确无误之后,就可以进入运行阶段了。

第二阶段:运行阶段

运行阶段包括预解析阶段和运行阶段。

第一阶段:预解析
第一步:创建执行上下文。JavaScript引擎将语法检查正确后生成的语法树复制到当前执行上下文中。
第二步:属性填充。JavaScript引擎会对语法树当中的变量声明、函数声明以及函数的形参进行属性填充。

预解析阶段创建的执行上下文包括:变量对象、作用域链、this

  • 变量对象(Variable Object):由var declaration、function declaration(变量声明、函数声明)、arguments(参数)构成。变量对象是以单例形式存在。
  • 作用域链(Scope Chain):variable object + all parent scopes(变量对象以及所有父级作用域)构成。
  • this值:(thisValue):content object。this值在进入上下文阶段就确定了。一旦进入执行代码阶段,this值就不会变了。

“预解析”阶段创建执行上下文之后,还会对变量对象/活动对象(VO/AO)的一些属性填充数值。

  • 函数的形参:执行上下文的变量对象的一个属性,其属性名就是形参的名字,其值就是实参的值;对于没有传递的参数,其值为undefined。
  • 函数声明:执行上下文的变量对象的一个属性,属性名和值都是函数对象创建出来的;如果变量对象已经包含了相同名字的属性,则会替换它的值。
  • 变量声明:执行上下文的变量对象的一个属性,其属性名即为变量名,其值为undefined;如果变量名和已经声明的函数名或者函数的参数名相同,则不会影响已经存在的函数声明的属性。

第二阶段:执行代码

经过“预解析”创建执行上下文之后,就进入执行代码阶段,VO/AO就会重新赋予真实的值,“预解析”阶段赋予的undefined值会被覆盖。

此阶段才是程序真正进入执行阶段,Javascript引擎会一行一行的读取并运行代码。此时那些变量都会重新赋值。

进入了执行代码阶段,在“预解析”阶段所创建的任何东西可能都会改变,不仅仅是VO/AO,this和作用域链也会因为某些语句而改变。

最后

了解完Javascript引擎的解析过程最后我们再来了解下firebug的控制台对Javascript的报错提示吧。

alert(var);// SyntaxError: syntax error 语法分析阶段错误 :语法错误  
var=1;; // SyntaxError: missing variable name 语法分析阶段错误 :var是保留字符,导致变量名丢失  
a=b=v // ReferenceError: v is not defined 运行期错误: v 是未定义的JavaScript错误信息)

知道了javascript引擎的工作原理,是不是忽然对程序出错时控制台出现的提示信息感到亲切了呢?


转载自浅谈javascript解析引擎解析过程

  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值