JavaScript中的执行上下文和变量提升

本文转载自微信公众号「新钛云服」，作者林泓辉 翻译。转载本文请联系新钛云服公众号。

让客户满意是我们工作的目标，不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户，将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴，公司提供的服务项目有：主机域名、网络空间、营销软件、网站建设、梁园网站维护、网站推广。

与许多同类语言相比，JavaScript 是一种易于学习的编程语言。但是，如果您想理解、调试和编写更好的代码，则需要多加注意一些基本概念。

在本文中，我们将了解两个这样的概念：

  • 执行上下文
  • 变量提升

作为一个初学者的JavaScript，了解这些概念将有助于您了解this关键字，作用域和闭包。

JavaScript 中的执行上下文

一般来说，一个 JavaScript 源文件会有多行代码。作为开发人员，我们将代码组织成变量、函数、数据结构(如对象和数组)等等。

语法环境决定了我们如何以及在何处编写代码。看看下面的代码：

 
 
 
 
      
  
  
  
  1. function doSomething() { 
    2.   
  
  
  
  2.  var age= 7; 
    3.   
  
  
  
  3.  // Some more code 
    4.   
  
  
  
  4. } 
    5.

在上面的代码中，变量age在语法上位于函数内部doSomething。

请注意，我们的代码不会按原样运行。它必须由编译器翻译成计算机可理解的字节码。通常，语法环境在您的代码中会有多个。然而，并不是所有的环境都会同时执行。

帮助代码执行的环境称为执行上下文。它是当前正在运行的代码，以及有助于运行它的一切。可以有很多语法环境，但当前运行的代码只能有一个执行上下文。

查看下图以了解语法环境和执行上下文之间的区别：

语法环境与执行上下文

那么在执行上下文中到底发生了什么?代码被逐行解析，生成可执行的字节码，分配内存并执行。

让我们采用我们在上面看到的相同函数。您认为执行以下行时可能会发生什么?

 
 
 
 
      
  
  
  
  1. var age = 7; 
    2.

这段源代码在最终执行之前经历了以下阶段：

  • 标记：在此阶段，源代码字符串分解为多个有意义的块，称为Tokens. 例如，代码var age = 7;标记为var , age , = , 7和, ; .
  • 解析：下一个阶段是解析，在这个阶段，一个标记数组变成一个由语言语法理解的嵌套元素树。这棵树被称为AST(抽象语法树)。
  • 代码生成：在这个阶段，在解析阶段创建的 AST 变成可执行的字节码。该可执行字节码随后由 JIT(即时)编译器进一步优化。

下面的动画图片显示了源代码到可执行字节码的转换。

可执行字节码的源代码

所有这些事情都发生在一个执行上下文中。所以执行上下文是代码的特定部分的执行环境。

有两种类型的执行上下文：

  • 全局执行上下文 (GEC)
  • 函数执行上下文 (FEC)

每个执行上下文都有两个阶段：

  • 创建阶段
  • 执行阶段

让我们详细看看它们中的每一个，并更好地理解它们。

JavaScript 中的全局执行上下文 (GEC)

每当我们执行 JavaScript码时，它都会创建一个全局执行上下文(也称为基本执行上下文)。全局执行上下文有两个阶段。

创建阶段

在创建阶段，创建了两个独特的东西：

  • 调用的全局对象window(用于客户端 JavaScript)。
  • 一个名为this的变量。

如果代码中声明了任何变量，则会为该变量分配内存。该变量使用唯一key进行初始化，并赋值为undefined。

如果代码中有function ，它会被直接放入内存中。我们将在Hoisting后面的部分中详细了解这部分。

执行阶段

代码执行在这个阶段开始。在这里进行全局变量的赋值。请注意，这里没有调用函数，因为它发生在函数执行上下文中。我们将在后面讨论这个问题。

让我们通过几个例子来理解这两个阶段。

示例 1：加载空脚本

创建一个名为index.js的空 JavaScript 文件及一个包含以下内容的 HTML 文件：

 
 
 
 
      
  
  
  
  1.  
    2.   
  
  
  
  2.  
    3.   
  
  
  
  3.  
    4.   
  
  
  
  4.     
    5.   
  
  
  
  5.     
    6.   
  
  
  
  6.     
    7.   
  
  
  
  7.    Document 
    8.   
  
  
  
  8.     
    9.   
  
  
  
  9.  
    10.   
  
  
  
  10.  
    11.   
  
  
  
  11.   I'm loading an empty script 
    12.   
  
  
  
  12.  
    13.   
  
  
  
  13.  
    14.

我们使用