avaScript 在运行过程中与其他语言有所不一样，如果不理解 JavaScript 的词法环境、执行上下文等内容，很容易会在开发过程中产生 Bug，比如this指向和预期不一致、某个变量不知道为什么被改了，等等。所以今天我们就来聊一聊 JavaScript 代码的运行过程。

大家都知道，JavaScript 代码是需要在 JavaScript 引擎中运行的。我们在说到 JavaScript 运行的时候，常常会提到执行环境、词法环境、作用域、执行上下文、闭包等内容。这些概念看起来都差不多，却好像又不大容易区分清楚，它们分别都在描述什么呢？

这些词语都是与 JavaScript 引擎执行代码的过程有关，为了搞清楚这些概念之间的区别，我们可以回顾下 JavaScript 代码运行过程中的各个阶段。

JavaScript 代码运行的各个阶段

JavaScript 是弱类型语言，在运行时才能确定变量类型。JavaScript 引擎在执行 JavaScript 代码时，也会从上到下进行词法分析、语法分析、语义分析等处理，并在代码解析完成后生成 AST（抽象语法树），最终根据 AST 生成 CPU 可以执行的机器码并执行。

这个过程，我们称之为语法分析阶段。除了语法分析阶段，JavaScript 引擎在执行代码时还会进行其他的处理。以 V8 引擎为例，在 V8 引擎中 JavaScript 代码的运行过程主要分成三个阶段。

0. 语法分析阶段。该阶段会对代码进行语法分析，检查是否有语法错误（SyntaxError），如果发现语法错误，会在控制台抛出异常并终止执行。

2. 编译阶段。该阶段会进行执行上下文（Execution Context）的创建，包括创建变量对象、建立作用域链、确定 this 的指向等。每进入一个不同的运行环境时，V8 引擎都会创建一个新的执行上下文。
3. 执行阶段。将编译阶段中创建的执行上下文压入调用栈，并成为正在运行的执行上下文，代码执行结束后，将其弹出调用栈。

其中，语法分析阶段属于编译器通用内容，就不再赘述。前面提到的执行环境、词法环境、作用域、执行上下文等内容都是在编译和执行阶段中产生的概念。

执行上下文的创建

执行上下文的创建离不开 JavaScript 的运行环境，JavaScript 运行环境包括全局环境、函数环境和eval，其中全局环境和函数环境的创建过程如下：

0. 第一次载入 JavaScript 代码时，首先会创建一个全局环境。全局环境位于最外层，直到应用程序退出后（例如关闭浏览器和网页）才会被销毁。
1. 每个函数都有自己的运行环境，当函数被调用时，则会进入该函数的运行环境。当该环境中的代码被全部执行完毕后，该环境会被销毁。不同的函数运行环境不一样，即使是同一个函数，在被多次调用时也会创建多个不同的函数环境。

在不同的运行环境中，变量和函数可访问的其他数据范围不同，环境的行为（比如创建和销毁）也有所区别。而每进入一个不同的运行环境时，JavaScript 都会创建一个新的执行上下文，该过程包括：

• 建立作用域链（Scope Chain）；
• 创建变量对象（Variable Object，简称 VO）；
• 确定 this 的指向。

由于建立作用域链过程中会涉及变量对象的概念，因此我们先来看看变量对象的创建，再看建立作用域链和确定 this 的指向。

创建变量对象

变量对象(VO)

每个执行上下文都会有一个关联的变量对象，该对象上会保存这个上下文中定义的所有变量和函数。

在浏览器中，全局环境的变量对象是window对象，因此所有的全局变量和函数都是作为window对象的属性和方法创建的。相应的，在 Node 中全局环境的变量对象则是global对象。

创建VO的过程

创建变量对象将会创建arguments对象（仅函数环境下），同时会检查当前上下文的函数声明和变量声明。

• 对于变量声明：此时会给变量分配内存，并将其初始化为undefined（该过程只进行定义声明，执行阶段才执行赋值语句）。
• 对于函数声明：此时会在内存里创建函数对象，并且直接初始化为该函数对象。

变量声明和函数声明的处理过程，便是我们常说的变量提升和函数提升，其中函数声明提升会优先于变量声明提升。因为变量提升容易带来变量在预期外被覆盖掉的问题，同时还可能导致本应该被销毁的变量没有被销毁等情况。因此 ES6 中引入了let和const关键字，从而使 JavaScript 也拥有了块级作用域。

作用域

在各类编程语言中，作用域分为静态作用域和动态作用域。JavaScript 采用的是词法作用域（Lexical Scoping），也就是静态作用域。词法作用域中的变量，在编译过程中会产生一个确定的作用域。

词法作用域中的变量，在编译过程中会产生一个确定的作用域，这个作用域即当前的执行上下文，在 ES5 后我们使用词法环境（Lexical Environment）替代作用域来描述该执行上下文。因此，词法环境可理解为我们常说的作用域，同样也指当前的执行上下文（注意，是当前的执行上下文）。

在 JavaScript 中，词法环境又分为词法环境（Lexical Environment）和变量环境（Variable Environment）两种，其中：

• 变量环境用来记录var/function等变量声明；
• 词法环境是用来记录let/const/class等变量声明。

也就是说，创建变量过程中会进行函数提升和变量提升，JavaScript 会通过词法环境来记录函数和变量声明。通过使用两个词法环境（而不是一个）分别记录不同的变量声明内容，JavaScript 实现了支持块级作用域的同时，不影响原有的变量声明和函数声明。

这就是创建变量的过程，它属于执行上下文创建中的一环。创建变量的过程会产生作用域，作用域也被称为词法环境。

建立作用域链

作用域链，就是将各个作用域通过某种方式连接在一起。作用域就是词法环境，而词法环境由两个成员组成。

0. 环境记录（Environment Record）：用于记录自身词法环境中的变量对象。
1. 外部词法环境引用（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函数的作用域链找到它，并进行访问。这就是闭包；

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

0. 用于从外部读取其他函数内部变量的函数；
1. 可以使用闭包来模拟私有方法；
2. 让这些变量的值始终保持在内存中。

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

确定 this 的指向

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

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

0. 在全局环境中，this指向全局对象（在浏览器中为window）
1. 在函数内部，this的值取决于函数被调用的方式
2. 函数作为对象的方法被调用，this指向调用这个方法的对象
3. 函数用作构造函数时（使用new关键字），它的this被绑定到正在构造的新对象
4. 在类的构造函数中，this是一个常规对象，类中所有非静态的方法都会被添加到this的原型中
5. 在箭头函数中，this指向它被创建时的环境
6. 使用apply、call、bind等方式调用：根据 API 不同，可切换函数执行的上下文环境，即this绑定的对象

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

var that = this;
var self = this;

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

总结

今天我们了解了 JavaScript 代码的运行过程，该过程分为语法分析阶段、编译阶段、执行阶段三个阶段。

在编译阶段，JavaScript会进行执行上下文的创建，在执行阶段，变量对象（VO）会被激活为活动对象（AO），变量会进行赋值，此时活动对象才可被访问。在执行结束之后，作用域链和活动对象均被销毁，使用闭包可使活动对象依然被保留在内存中。这就是 JavaScript 代码的运行过程。

录

• 什么是 Python？
• 什么是 JavaScript？
• JavaScript 和 Python 的区别因素
• Python 与 JavaScript：2022 年选择哪种编程语言？

Web 开发正在成为 IT 中最受欢迎的领域之一，毫无疑问，JavaScript 和 Python 都是 Web 开发人员中非常流行的编程语言。这两种编程语言都有自己的优点，这使它们成为开发人员的热门选择。

然而，Python 和 JavaScript 的比较一直是开发者社区的热门讨论。它经常会产生这样的问题：python 比 javascript 难吗？python比javascript好吗？python和javascript有什么区别？javascript在Web开发中的用途是什么？等等等等。继续阅读本文，因为本文简要回答了所有这些问题，但在讨论这些编程语言在 Web 开发中的比较之前，了解什么是 Python 和 JavaScript 至关重要。

什么是 Python？

Python 是当今最好和最强大的编程语言之一。它用途广泛，是大多数科学应用的必备工具。但是，它是一种通用编程语言，支持不同的编程范式。

这种编程广泛用于科学领域，包括数据科学、人工智能、计算机视觉 (CV)、DIP（数字图像处理）、自然语言处理和 Web 开发。Python 的语法非常简单。这就是为什么很多人认为 python 比 javaScript 好得多的原因。

在 web 开发的背景下，有一个流行的问题：python 是用于前端还是后端？答案是python主要用于后端。这是我们可以将其功能和能力与 JavaScript 进行比较的地方。但是，需要注意的是，Python 不仅限于后端开发，还可以在一些附加工具的帮助下用于前端开发。

什么是 JavaScript？

虽然 Python 是后端开发的绝佳选择，但 JavaScript 是首选，并且通常被称为 Web 应用程序前端开发的编程语言。

在这里了解后端和前端开发之间的区别很重要。Web 应用程序的后端是用户无法访问且用户不直接与其交互的部分。它包含 Web 应用程序的所有业务逻辑和服务器端编程。

另一方面，Web 应用程序的前端是最终用户与之交互的部分。这是用户可以访问的应用程序的一部分。即使您正在与移动应用程序交互，您也很可能正在与 React.js（一个 JavaScript 框架）进行交互，它能够开发能够适应不同平台的应用程序。

JavaScript 和 Python 的区别因素

现在，由于我们已经清楚地了解了 JavaScript 和 Python，我们可以更深入地挖掘它们的差异化因素。

我们可以根据不同的理由来区分这两种编程语言。python 和 JavaScript 都有各自的优缺点。因此，让我们立即开始吧。

人气

首先，重要的是要注意开发人员社区对这两种编程语言的看法。确定开发人员选择的最佳矩阵是评估这些编程语言的流行程度。

根据Stack Overflow 的 2020 年开发者调查，JavaScript 在最常用的编程语言列表中名列前茅。根据调查的详细信息，几乎 69.7% 的开发社区使用 JavaScript。相比之下，Python 的普及率在 41.7% 的开发者中。

JavaScript 流行的一个原因是它的工作可以广泛使用。此外，它不仅可用于 Web 开发，而且 JavaScript 还可用于移动应用程序开发，这使其成为开发社区中的热门选择。

表现

性能是开发网站时要牢记的最重要因素之一。如果应用程序不够高效，它几乎是无用的。这就是新的编程语言试图灌输尽可能多的效率和优化的原因。

然而，这并不容易，而是一项非常棘手的任务。这也取决于用于开发的编程语言。因为每种编程语言都有自己的内置规则和方法来提高效率。

Web 应用程序的速度取决于 Web 应用程序中代码的执行速度。构建 JavaScript 的目的是在 Web 浏览器上快速运行。这就是 Facebook、Google、Amazon 等应用程序使用 JavaScript 的原因。

如果将 Python Web 应用程序与 Node.js Web 应用程序进行比较，Node.js 肯定会胜过 Python。因为据专家介绍，Python 在单个流中处理请求，但 JavaScript 可以利用其先进的多线程功能一次处理多个请求。

应用程序可扩展性

对于一个人来说，Web 应用程序的可扩展性就像氧气一样是生存所必需的。考虑一个应用程序，该应用程序响应速度快、交互性强，并提供非常需要的服务。但是，它无法同时处理大量请求。这将导致网络流量下降，因为如果用户打开一个网站并且它没有按需要响应或经常崩溃，但用户最终也会寻找其他一些快速的替代方案。

因此，应用程序的可扩展性非常重要。因为可伸缩性允许应用程序一次处理大量的流量和请求。为了支持可扩展性，多线程是一个非常可行的解决方案。但是 Python 不支持多线程，因为它适用于单线程系统。相反，它使用全局解释器锁来一次处理多个请求。

相反，Node.js 纯粹是为了支持异步编程而开发的。因此，JavaScript 在 Web 应用程序可扩展性方面表现出色。但是，Python 也可以通过上述方式实现可扩展性。

内存管理

内存管理是另一个需要考虑的重要方面。如果一种编程语言不能有效地管理内存，将直接影响网站的优化。

在 Python 中，所有变量和数据结构都收集在一个堆中。Python 也有它的内部内存管理器来确保对这个堆的管理。

但是，JavaScript 使用一种称为 GC（垃圾收集器）的自动内存管理工具。但是，GC 的管理工作在一个近似算法上，因为它无法知道某个内存位置是否无用。

范围

编程语言的范围定义了它的多功能性。如果我们谈论 Python 的应用程序或用例，我们就会知道 Python 用于后端的 Web 开发。它在软件开发、计算和脚本系统中也非常有用。它在数据科学和机器学习中非常流行。

相比之下，JavaScript 也支持所有这些类型的软件开发。JavaScript 相对于 python 的最大优势在于，它不仅是一种前端语言，而且在开发应用程序的服务器端逻辑时也能工作得非常好。此外，JavaScrip 还用于开发移动应用程序，目前 Python 不支持。React.js 是流行的移动应用程序开发框架之一。

Python 与 JavaScript：2022 年选择哪种编程语言？

根据上面进行的讨论，很明显这两种语言都有自己的优缺点。几乎不可能质疑 Python 是否会取代 JavaScript，反之亦然。

对于 JavaScript 和 Python，开发人员的选择将基于所考虑平台的要求。例如，当语言的设计至关重要时，Python 是您的选择。如果需要移动开发和高度响应的网站，那么 JavaScript 是您的选择。

更全面地说，如果所需的应用程序必须具有可扩展性和高效性，那么 JavaScript 是正确的选择。而如果网站后台非常复杂，可读性好，又要求编程简单，可以选择Python。

关于是选择Python还是前端，我的建议是这样的，在学历这块，目前Python和前端这块招聘学历最低需求都是大专，所以这块问题不大，其次你最想要知道的就是选择Python还是前端，下面我从市场发展前景以及薪资待遇这两方面具体的分析一下：

先说下Python，Python这个编程语言在近两年比较火，之所以比较火，在很大程度上面要归根于培训机构，很多培训机构借助于人工智能的热潮从而进行炒作，以此招生盈利。

现在我认为Python主要的三个方向，web开发，网络爬虫，人工智能。

如果你选择做web开发，我更建议你选择Javaweb，Javaweb的发展以及提升空间更大。

其次是网络爬虫，网络爬虫我现在不建议你学，因为现在这个方向现在这方面的岗位比较少。

其次就是人工智能，这个方向就更不建议你考虑了，因为门槛比较高，最低学历需求都是硕士以上，因为涉及到很多算法方面的东西。而且现在Python这个语言的话，发展得不是很完善，相当于你现在学了出来，只能在一线城市找到合适的岗位工作，二线三线城市基本上，没有这方面的岗位。

如果你选择学习Python的话，这三个方向你最终只能选择Python web开发，刚学完技术出来，你可以考虑去一线城市发展，提升一下自己的阅历，技术，经验等等，但是万事都需要从长远考虑，目前所在的城市以后是否会具备这方面的岗位。

我们来看下目前Python的薪资待遇水平：

目前在北京等这样的一线城市Python岗位的薪资待遇水平在20k左右（有一定的水分），当然这是具备一定开发经验的，一般刚学完Python技术出来的，只要能找到相关的工作，薪资待遇大约都在5-7k左右。其次我在职友集上面搜索一下一些二线城市Python岗位，基本上没有相关的岗位招聘。基本上这个就是目前Python的一个市场行情。

下面我们来说下前端，web前端这个语言在国内流行了很多年的时间，可以说现在无论你是在一线城市，还是二线三线城市，你学了前端，都可以找到合适的岗位工作。

虽说现在前端的基数大，但是真正懂前端技术，会写代码的前端非常的少。

从现在的大企业来讲，他是不要那种单纯的只会去做机械性劳动的前端。这种竞争就比较少，所以在前端这个领域里面来看，机会非常的多。所以你们一定要成为真正的前端，而不是就成为只会切个图，做机械性劳动的前端。

我们来看下目前前端岗位的薪资待遇水平：

目前在北京等这样的一线城市，前端方面的薪资待遇在18k左右，当然这也是具备一定开发经验的前端，属于比较正常的薪资待遇水平。

刚学完前端技术出来的初级前端一般薪资待遇在5-7k左右。

这里给你提供一个web前端的系统学习路线：

web前端基础部分的HTML，CSS都比较简单，比较难的部分就是后面JavaScript部分。

总的来说，非要我建议的话我更建议你学习web前端。因为前端这个工作更加稳定，不管是二线三线都比较好找工作，而且相比起Python，前端更容易掌握。

以上就是关于PYthon和前端HTML5之间的区别，大家可以根据自身情况考虑是该选择哪个方面。