JavaScript执行机制深层剖析-阿里云开发者社区

开发者社区> awufan> 正文

JavaScript执行机制深层剖析

简介: 编译阶段 ,词法分析(Lexing),这个过程会将由字符组成的字符串分解成(对编程语言来说)有意义的代码块,这些代 码块被称为词法单元(token)。
+关注继续查看

编译阶段

词法分析(Lexing)

这个过程会将由字符组成的字符串分解成(对编程语言来说)有意义的代码块,这些代 码块被称为词法单元(token)。

简单举个例子:c = b - a 转换为

  • NAME "c"
  • EQUALS
  • NAME "a"
  • MINUS
  • NAME "b"
  • SEMICOLON

语法分析(Parsing)

这个过程是将词法单元流(数组)转换成一个由元素逐级嵌套所组成的代表了程序语法 结构的树。这个树被称为“抽象语法树”(Abstract Syntax Tree,AST)。

AST大概是下面的样子:


9b82483e076c7bdf973bc78bd07c92b03bade67e

生成可执行代码

将 AST 转换为可执行代码的过程称被称为代码生成。

执行阶段


接下来,我们以一个简单例子进行分析。


var a = 2;

function bar() {
    var b = 2;

    function foo() {
        var c = 2;
    }

    foo();
}

bar();

1. JS引擎创建一个全局对象(Global Object)

这个对象全局只存在一份,它的属性在任何地方都可以访问,它的存在伴随着应用程序的整个生命周期。全局对象在创建时,将Math,String,Date,document 等常用的JS对象作为其属性。由于这个全局对象不能通过名字直接访问,因此还有另外一个属性window,并将window指向了自身,这样就可以通过window访问这个全局对象了。用伪代码模拟全局对象的大体结构如下:



//创建一个全局对象
var globalObject = {
    Math:{},
    String:{},
    Date:{},
    document:{}, //DOM操作
    ...
    window:this //让window属性指向了自身
}


2. JS引擎会创建一个执行环境栈(Execution Context Stack)

  • 栈 提到栈,小伙伴们都知道,栈是一种类似羽毛球筒存储羽毛球的数据结构,采用先进后出,后进先出的特点。
a4340aa9de23c6ceae2f3567b9f8c749d12eda57

上图中的羽毛球1一定是先放入栈中,然后是羽毛球2,以此类推,而出栈时,一定是羽毛球5先拿出来,然后是羽毛球4,以此类推,这种方式和栈存取数据的方式如出一辙。

  • 堆 堆数据类型类似与书架。书虽然也整齐的存放在书架上,但是我们只要知道书的名字,我们就可以很方便的取出我们想要的书。

好了好了,扯远了。我们接着往下说,在这只需知道执行环境栈是怎样存取数据的就行。

3. 创建全局执行上下文(Execution Context)

到这你可能会问,上下文是个啥玩意?

是啊,上下文是个什么鬼啊?

上下文不是玩意,也不是什么鬼。

执行上下文可以理解为当前代码的执行环境。JS所有代码都会在自己的上下文环境下运行。

说到上下文,你可能会有这样的疑惑:上下文不就是作用域吗?

老铁,我肯定的告诉你,上下文不是作用域。的确,在JS里,这还真是个很难区分的东东。不过现在我还不能马上道出他们的区别,因为作用域的知识,我们还没有涉及,彻底搞懂JavaScript作用域,通过这篇文章,你将彻彻底底了解关于作用域的一切。

那在JS中会有几种执行环境呢?

大概有3种:

  • 全局环境:JavaScript代码运行起来会首先进入该环境
  • 函数环境:当函数被调用执行时,会进入当前函数中执行代码
  • eval、with(不建议使用,可忽略)

因此在一个JavaScript程序中,必定会产生多个执行上下文。

go on...

4. 全局上下文推入执行环境栈底

5. 代码开始从上往下执行,这里我们暂且不谈标识符处理,当代码执行到bar(),生成bar执行上下文,推入栈中

6. 代码执行到foo(),生成foo执行上下文,推入栈中

7. foo()执行完,foo执行上下文出栈

8. bar()执行完,bar执行上下文出栈

9. 全局上下文执行上下文出栈

我们用图走一下js执行流程,是这样的:


760608714e1bc1174a978ab42e391385626fe44c

小伙伴们,现在是不是对JS执行流程有了一个整体认识,下面我们来说点更有意思的。

上下文执行细节

我们先看整体了解下

27290c8a57305b29e1ce56e09fbcf73f921eea37

创建阶段

1. 创建变量对象(Variable Object)

创建变量对象,依次经历了以下几个步骤

  1. 建立arguments对象。检测当前上下文参数,建立该对对象下的属性及属性值。(这里提一下,函数的参数是按值传递,我知道你是知道的)
  2. 检测关键词function函数声明。检测当前上下文中的函数声明,并挂载到变量对象上,其值是函数对象的引用。
  3. 检测var变量声明。检测当前上下文中的var声明,并赋值为undefined;如遇到同名var声明的变量,则会默认覆盖;如遇到同名函数声明,则默认忽略,这也就体现了函数声明的优先级要高于var声明。谁的大哥还是得分清的,哈哈。。。
变量提升

看到这,我觉得你对变量提升具体是什么以及如何实现的应该了解的一清二楚了。

是不是呢?

我们来一道题测试下



function foo() {
    console.log(a);
    console.log(baz);

    var a = 'inner';
    var baz = 1;

    function baz() {}
}

foo();


第一处是undefined,第二处是[Function: baz],是不是很简单?

下面我用代码简单模拟下上面的过程


function foo() {
    function baz() {}

    var a = undefined;

    console.log(a);
    a = 'inner';

    console.log(baz);
}

foo();


变量对象大概是这样的

VO(foo) = {
     arguments: {},
     baz: <foo reference>,  // 表示foo的地址引用
     a: undefined
 }

2. 确定作用域链

作用域链是由当前作用域与上层一系列父级作用域组成,作用域的头部永远是当前作用域,尾部永远是全局作用域。作用域链保证了当前上下文对其有权访问的变量的有序访问。

我们先简单了解下,详细的我们会在彻底搞懂JavaScript作用域中谈到。


var a = 1;
function foo() {
    function baz() {
        console.log( a ); 
    }

    baz();
}

foo(); // 1

上面的对于我们来说很简单,是吧?没错这就是作用域链的应用。


我们简单模拟下


EC(foo) = {
    VO(foo): {...}, //省略
    ScopeChain: [VO(foo), window],
    this: 
}

EC(baz) = {
    VO(baz): {...}, //省略
    ScopeChain: [VO(baz), VO(foo), window],
    this: 
}



3. 确定this指向

谈到this,大家是不是感到很兴奋,平时写代码时,被这家伙整的晕头转向的,这回我们终于可以揭开this的神秘面纱了,搞清楚它在JS到底是怎样的存在,不过客官别着急,我们这里先不介绍this,因为关于this的内容太多了,我们得慢慢去品味它,这里先记住,this是在执行上下文创建阶段确定的

this传送门

this真是一个淘气鬼

全局上下文

全局上下文有些特殊,其变量对象永远是window,this永远指向window(在浏览器中,Node中不是)。



EC(global) = {
    VO: window,
    ScopeChain: {},
    this: window
}

执行阶段

在执行阶段变量对象(Variable Object)变为活动对象(Active Object)。 VO => AO

这样,如果再面试的时候被问到变量对象和活动对象有什么区别,就又可以自如的应答了,他们其实都是同一个对象,只是处于执行上下文的不同生命周期。不过只有处于函数调用栈栈顶的执行上下文中的变量对象,才会变成活动对象。

执行阶段JS引擎会进行变量赋值函数引用执行其他代码,执行顺序取决于代码的位置。

我们就聊到这吧。

喝杯茶,

休息一下。

原文发布时间为:2018年04月08日
原文作者:张建成(prettyEcho@github)
本文来源:掘金 如需转载请联系原作者

 


版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
7757 0
JavaScript执行机制深层剖析
编译阶段 ,词法分析(Lexing),这个过程会将由字符组成的字符串分解成(对编程语言来说)有意义的代码块,这些代 码块被称为词法单元(token)。
1759 0
Javascript在页面加载时的执行顺序
一、在HTML中嵌入Javasript的方法 直接在Javascript代码放在标记对和之间 由标记的src属性制定外部的js文件 放在事件处理程序中,比如:点击我 作为URL的主体,这个URL使用特殊的Javascript:协议,比如:点击我 利用javascript本身的document.write()方法写入新的javascript代码 利用Ajax异步获取javascript代码,然后执行 第3种和第4种方法写入的Javascript需要触发才能执行,所以除非特别设置,否则页面加载时不会执行。
701 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
9485 0
JavaScript异步精讲,让你更加明白Js的执行流程!
JavaScript异步精讲,让你更加明白Js的执行流程! 问题点 什么是单线程,和异步有什么关系 什么是 event-loop jQuery的Deferred Promise 的基本使用和原理 async/await(和 Promise的区别、联系) 一、什么是单线程,和异步有什么关系 单线程.
1825 0
深入理解 JavaScript 执行上下文和执行栈
如果你是一名 JavaScript 开发者,或者想要成为一名 JavaScript 开发者,那么你必须知道 JavaScript 程序内部的执行机制。执行上下文和执行栈是 JavaScript 中关键概念之一,是 JavaScript 难点之一。
3904 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
11123 0
+关注
13
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载