JavaScript内部是这样运行
Pomelo1213 commented 3 hours ago
这个地方baz到底是怎样的?
这里baz不应该是undefined吗?相同名字的变量和函数,函数会声明前置,这个地方是覆盖baz吗?博主,能解下疑惑吗? |
请爱好前端技术的朋友,联系我,有问题大家一起讨论
这个地方baz到底是怎样的?
这里baz不应该是undefined吗?相同名字的变量和函数,函数会声明前置,这个地方是覆盖baz吗?博主,能解下疑惑吗? |
编译阶段
词法分析(Lexing)
简单举个例子:c = b - a 转换为
语法分析(Parsing)
AST大概是下面的样子:
生成可执行代码
执行阶段
接下来,我们以一个简单例子进行分析。
1. JS引擎创建一个全局对象(Global Object)
这个对象全局只存在一份,它的属性在任何地方都可以访问,它的存在伴随着应用程序的整个生命周期。全局对象在创建时,将Math,String,Date,document 等常用的JS对象作为其属性。由于这个全局对象不能通过名字直接访问,因此还有另外一个属性window,并将window指向了自身,这样就可以通过window访问这个全局对象了。用伪代码模拟全局对象的大体结构如下:
2. JS引擎会创建一个执行环境栈(Execution Context Stack)
提到栈,小伙伴们都知道,栈是一种类似羽毛球筒存储羽毛球的数据结构,采用先进后出,后进先出的特点。
上图中的羽毛球1一定是先放入栈中,然后是羽毛球2,以此类推,而出栈时,一定是羽毛球5先拿出来,然后是羽毛球4,以此类推,这种方式和栈存取数据的方式如出一辙。
堆数据类型类似与书架。书虽然也整齐的存放在书架上,但是我们只要知道书的名字,我们就可以很方便的取出我们想要的书。
好了好了,扯远了。我们接着往下说,在这只需知道执行环境栈是怎样存取数据的就行。
3. 创建全局执行上下文(Execution Context)
到这你可能会问,上下文是个啥玩意?
是啊,上下文是个什么鬼啊?
上下文不是玩意,也不是什么鬼。
执行上下文可以理解为当前代码的执行环境。JS所有代码都会在自己的上下文环境下运行。
说到上下文,你可能会有这样的疑惑:上下文不就是作用域吗?
老铁,我肯定的告诉你,上下文不是作用域。的确,在JS里,这还真是个很难区分的东东。不过现在我还不能马上道出他们的区别,因为作用域的知识,我们还没有涉及,彻底搞懂JavaScript作用域,通过这篇文章,你将彻彻底底了解关于作用域的一切。
那在JS中会有几种执行环境呢?
大概有3种:
因此在一个JavaScript程序中,必定会产生多个执行上下文。
go on...
4. 全局上下文推入执行环境栈底
5. 代码开始从上往下执行,这里我们暂且不谈标识符处理,当代码执行到bar(),生成bar执行上下文,推入栈中
6. 代码执行到foo(),生成foo执行上下文,推入栈中
7. foo()执行完,foo执行上下文出栈
8. bar()执行完,bar执行上下文出栈
9. 全局上下文执行上下文出栈
我们用图走一下js执行流程,是这样的:
小伙伴们,现在是不是对JS执行流程有了一个整体认识,下面我们来说点更有意思的。
上下文执行细节
我们先看整体了解下
创建阶段
1. 创建变量对象(Variable Object)
创建变量对象,依次经历了以下几个步骤
变量提升
看到这,我觉得你对变量提升具体是什么以及如何实现的应该了解的一清二楚了。
是不是呢?
我们来一道题测试下
第一处是undefined,第二处是[Function: baz],是不是很简单?
下面我用代码简单模拟下上面的过程
变量对象大概是这样的
2. 确定作用域链
作用域链是由当前作用域与上层一系列父级作用域组成,作用域的头部永远是当前作用域,尾部永远是全局作用域。作用域链保证了当前上下文对其有权访问的变量的有序访问。
我们先简单了解下,详细的我们会在彻底搞懂JavaScript作用域中谈到。
上面的对于我们来说很简单,是吧?没错这就是作用域链的应用。
我们简单模拟下
3. 确定this指向
谈到this,大家是不是感到很兴奋,平时写代码时,被这家伙整的晕头转向的,这回我们终于可以揭开this的神秘面纱了,搞清楚它在JS到底是怎样的存在,不过客官别着急,我们这里先不介绍this,因为关于this的内容太多了,我们得慢慢去品味它,这里先记住,this是在执行上下文创建阶段确定的。
this传送门
this真是一个淘气鬼
全局上下文
全局上下文有些特殊,其变量对象永远是window,this永远指向window(在浏览器中,Node中不是)。
即
执行阶段
在执行阶段变量对象(Variable Object)变为活动对象(Active Object)。
VO => AO
执行阶段JS引擎会进行变量赋值、函数引用、执行其他代码,执行顺序取决于代码的位置。
我们就聊到这吧。
喝杯茶,
休息一下。