手把手教会你JavaScript引擎如何执行JavaScript代码

外部词法环境引用(Outer Lexical Environment)：记录外层词法环境的引用。

通过外部词法环境的引用，作用域可以层层拓展，建立起从里到外延伸的一条作用域链。当某个变量无法在自身词法环境记录中找到时，可以根据外部词法环境引用向外层进行寻找，直到最外层的词法环境中外部词法环境引用为null，这便是作用域链的变量查询。

JavaScript 代码运行过程分为定义期和执行期，前面提到的编译阶段则属于定义期，代码示例如下：

function foo() { // 定义全局函数foo console.dir(bar); var a = 1; function bar() { // 在foo函数内部定义函数bar a = 2; }}console.dir(foo);foo();

前面我们说到，JavaScript 使用的是静态作用域，因此函数的作用域在定义期已经决定了。在上面的例子中，全局函数foo创建了一个foo的[[scope]]属性，包含了全局[[scope]]：

foo[[scope]] = [globalContext];

而当我们执行foo()时，也会分别进入foo函数的定义期和执行期。

在foo函数的定义期时，函数bar的[[scope]]将会包含全局[[scope]]和foo的[[scope]]：

bar[[scope]] = [fooContext, globalContext];

运行上述代码，我们可以在控制台看到符合预期的输出：

可以看到：

foo的[[scope]]属性包含了全局[[scope]]

bar的[[scope]]将会包含全局[[scope]]和foo的[[scope]]

也就是说，JavaScript 会通过外部词法环境引用来创建变量对象的一个作用域链，从而保证对执行环境有权访问的变量和函数的有序访问。除了创建作用域链之外，在这个过程中还会对创建的变量对象做一些处理。

在编译阶段会进行变量对象(VO)的创建，该过程会进行函数声明和变量声明，这时候变量的值被初始化为 undefined。在代码进入执行阶段之后，JavaScript 会对变量进行赋值，此时变量对象会转为活动对象(Active Object，简称 AO)，转换后的活动对象才可被访问，这就是 VO -> AO 的过程，示例如下：

function foo(a) { var b = 2; function c() {} var d = function() {};}foo(1);

在执行foo(1)时，首先进入定义期，此时：

参数变量a的值为1

变量b和d初始化为undefined

函数c创建函数并初始化

AO = { arguments: { 0: 1, length: 1 }, a: 1, b: undefined, c: reference to function() c() {} d:undefined}

前面我们也有提到，进入执行期之后，会执行赋值语句进行赋值，此时变量b和d会被赋值为 2 和函数表达式：

AO = { arguments: { 0: 1, length: 1 }, a: 1, b: 2, c: reference to function c(){}, d: reference to FunctionExpression “d”}

这就是 VO -> AO 过程。

在定义期(编译阶段)：该对象值仍为undefined，且处于不可访问的状态。

进入执行期(执行阶段)：VO 被激活，其中变量属性会进行赋值。

实际上在执行的时候，除了 VO 被激活，活动对象还会添加函数执行时传入的参数和arguments这个特殊对象，因此 AO 和 VO 的关系可以用以下关系来表达：

AO = VO + function parameters + arguments

现在，我们知道作用域链是在进入代码的执行阶段时，通过外部词法环境引用来创建的。总结如下：

在编译阶段，JavaScript 在创建执行上下文的时候会先创建变量对象(VO);

在执行阶段，变量对象(VO)被激活为活动对象( AO)，函数内部的变量对象通过外部词法环境的引用创建作用域链。

通过作用域链，我们可以在函数内部可以直接读取外部以及全局变量，但外部环境是无法访问内部函数里的变量。示例如下：

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

我们在全局环境下无法访问函数foo中的变量a，这是因为全局函数的作用域链里，不含有函数foo内的作用域。

如果我们想要访问内部函数的变量，可以通过函数foo中的函数bar返回变量a，并将函数bar返回，这样我们在全局环境中也可以通过调用函数foo返回的函数bar，来访问变量a：

function foo() { var a = 1; function bar() { return a; } return bar;}var b = foo();console.log(b()); // 1

当函数执行结束之后，执行期上下文将被销毁，其中包括作用域链和激活对象。

在上面的实例中;当b()执行时，foo函数上下文包括作用域都已经被销毁了，但是foo作用域下的a依然可以被访问到;这是因为bar函数引用了foo函数变量对象中的值，此时即使创建bar函数的foo函数执行上下文被销毁了，但它的变量对象依然会保留在 JavaScript 内存中，bar函数依然可以通过bar函数的作用域链找到它，并进行访问。这就是闭包;

闭包使得我们可以从外部读取局部变量，常见的用途包括：

用于从外部读取其他函数内部变量的函数;

可以使用闭包来模拟私有方法;

让这些变量的值始终保持在内存中。

注意，在使用闭包的时候，需要及时清理不再使用到的变量，否则可能导致内存泄漏问题。

确定 this 的指向

在 JavaScript 中，this指向执行当前代码对象的所有者，可简单理解为this指向最后调用当前代码的那个对象。

根据 JavaScript 中函数的调用方式不同，this的指向分为以下情况。

在全局环境中，this指向全局对象(在浏览器中为window)

在函数内部，this的值取决于函数被调用的方式

函数作为对象的方法被调用，this指向调用这个方法的对象

函数用作构造函数时(使用new关键字)，它的this被绑定到正在构造的新对象

在类的构造函数中，this是一个常规对象，类中所有非静态的方法都会被添加到this的原型中

在箭头函数中，this指向它被创建时的环境

使用apply、call、bind等方式调用：根据 API 不同，可切换函数执行的上下文环境，即this绑定的对象

可以看到，this在不同的情况下会有不同的指向，在 ES6 箭头函数还没出现之前，为了能正确获取某个运行环境下this对象，我们常常会使用以下代码：

var that = this;var self = this;

这样的代码将变量分配给this，便于使用。但是降低了代码可读性，不推荐使用，通过正确使用箭头函数，我们可以更好地管理作用域。

总结
今天我们了解了 JavaScript 代码的运行过程，该过程分为语法分析阶段、编译阶段、执行阶段三个阶段。
在编译阶段，JavaScript会进行执行上下文的创建，在执行阶段，变量对象(VO)会被激活为活动对象(AO)，变量会进行赋值，此时活动对象才可被访问。在执行结束之后，作用域链和活动对象均被销毁，使用闭包可使活动对象依然被保留在内存中。这就是 JavaScript 代码的运行过程。
觉得本文对你有帮助的话，可以转发关注支持下谢谢

专业技能

一般来说，面试官会根据你的简历内容去提问，但是技术基础还有需要自己去准备分类，形成自己的知识体系的。简单列一下我自己遇到的一些题

• HTML+CSS
• JavaScript
• 前端框架
• 前端性能优化
• 前端监控
• 模块化+项目构建
• 代码管理
• 信息安全
• 网络协议
• 浏览器
• 算法与数据结构
• 团队管理
• 开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

最近得空把之前遇到的面试题做了一个整理，包括我本人自己去面试遇到的，还有其他人员去面试遇到的，还有网上刷到的，我都统一的整理了一下，希望对大家有用。

其中包含HTML、CSS、JavaScript、服务端与网络、Vue、浏览器等等

由于文章篇幅有限，仅展示部分内容