什么？区区var a=1;盲点居然这么多——简单了解一下JavaScript执行机制

坐镇指挥
146 阅读6分钟

在JavaScript的世界里，每一行代码的执行都伴随着复杂的机制，这些机制确保了代码能够正确运行并高效管理资源。让我们以简单的声明赋值语句var a=1;为例，深入探讨JavaScript的执行机制。

声明与赋值语句：var a=1;

这句代码看起来简单，但它背后隐藏了JavaScript引擎的多个工作步骤。首先，我们将其分解为两部分：声明和赋值。

  • 声明：var a;

    • var 是变量声明的关键字，用于告诉JavaScript引擎我们要创建一个新的变量。
    • a 是变量的标识符，即变量的名字。

  • 赋值：a=1;

    • 这一步将值1赋给变量a。

变量存储位置：内存

变量a实际上存储在计算机的内存中。JavaScript引擎会管理内存，为变量分配适当的空间。

编译与执行阶段

JavaScript代码的执行分为编译和执行两个阶段。

  • 编译阶段：

    • 在这个阶段，JavaScript引擎会扫描代码，解析语法，构建作用域链，并识别变量和函数声明。
    • 对于var a;，引擎会在当前作用域中声明变量a，但不会为其分配具体的值。

  • 执行阶段：

    • 在这个阶段，JavaScript引擎会逐行执行代码。
    • 对于a=1;，引擎会查找变量a（根据作用域链），然后将其值设置为1。

变量与作用域

  • 作用域：作用域是变量可访问的上下文环境。JavaScript中有三种主要的作用域：全局作用域、函数作用域和块作用域（由let和const引入）。
  • 作用域链：当查找变量时，JavaScript引擎会从当前作用域开始，逐级向上查找，直到全局作用域。如果找不到变量，则返回undefined。

JS引擎与团队角色比喻

为了更好地理解这一过程，我们可以将JS引擎的工作比喻为一个团队的工作：

  • JS引擎（CEO） ：负责整体工作的协调和调度。
  • 编译器（CTO） ：负责代码的分词、解析和构建作用域链。
  • 作用域（COO） ：管理变量的声明和查找规则，确保变量在正确的作用域内访问。

变量查找过程

当执行a=1;时，JavaScript引擎会进行以下操作：

  1. LHS（Left-Hand Side）查找：确定赋值的目标。对于a=1;，a是LHS。
  2. RHS（Right-Hand Side）查找：确定赋值的值。对于a=1;，1是RHS，但在这个例子中，我们主要关注LHS。
  3. 作用域链查找：引擎会在当前作用域中查找变量a，如果找不到，则去父级作用域查找，直到全局作用域。如果仍然找不到，则返回undefined。

undefined与弱类型语言

  • undefined：在JavaScript中，undefined是一个特殊的值，表示变量已声明但未赋值。它是JavaScript的七种数据类型之一。
  • 弱类型语言：JavaScript是一种弱类型语言，变量的类型由其值决定，而不是在声明时固定。

特殊用例分析

在JavaScript中，变量作用域和赋值操作是理解代码行为的关键。下面，我们将通过函数foo中的代码示例，详细解释LHS（Left-Hand Side，左值）查找失败时如何创建一个全局变量，并介绍相关概念。

代码示例

javascript复制代码
	function foo() {

	    b = 2; // LHS 查找失败，因此会创建一个全局变量 b

	    console.log(b); // 输出 2

	}

	 

	foo();

	 

	console.log(b); // 输出 2，表明 b 已经成为全局变量

解释

  1. 函数定义与调用：

    • 定义了一个名为foo的函数，该函数内部包含一条赋值语句和一个console.log语句。
    • 调用foo()函数，执行其内部的代码。

  2. LHS 查找与全局变量创建：

    • 在foo函数内部，执行b = 2;这条赋值语句时，JavaScript引擎会进行LHS（左值）查找，以确定赋值的目标。
    • 由于在foo函数的作用域内没有找到变量b的声明，引擎会沿着作用域链向上查找。
    • 作用域链包括当前函数作用域、其父作用域（如果有的话），以及全局作用域。
    • 在本例中，由于b既未在foo函数内声明，也未在任何父作用域中声明，因此引擎最终会在全局作用域中停止查找。
    • 由于全局作用域中也没有找到b的声明，但赋值操作需要有一个目标，因此JavaScript引擎会在全局作用域中隐式地创建一个新的变量b，并将其值设置为2。

  3. 全局变量的影响：

    • 一旦在全局作用域中创建了变量b，它就可以在任何地方被访问和修改，直到页面卸载或脚本执行完毕。
    • 因此，在foo()函数调用之后，使用console.log(b);仍然可以输出2，这表明b已经成为了一个全局变量。

注意事项

  • 避免全局变量：在编程中，全局变量可能会导致代码难以理解和维护，因为它们可以在任何地方被修改。因此，建议尽量避免在函数内部创建全局变量。
  • 使用var、let、const：在ES6及更高版本中，建议使用let和const来声明变量，因为它们具有块级作用域，可以避免全局变量的意外创建。而var声明的变量具有函数作用域（或在全局作用域中声明时具有全局作用域），并且存在变量提升（hoisting）的问题。
  • 严格模式：在严格模式（'use strict';）下，尝试给未声明的变量赋值会抛出错误，这有助于避免全局变量的意外创建。

总之，理解JavaScript中的作用域和变量声明规则对于编写可维护和可理解的代码至关重要。在编写函数时，应特别注意避免在函数内部创建全局变量，而是应该使用适当的变量声明语句来限制变量的作用域。

总结

通过var a=1;这一简单的例子，我们深入了解了JavaScript的执行机制，包括变量的声明与赋值、存储位置、编译与执行阶段、作用域与作用域链、以及JS引擎如何查找变量。这些机制共同确保了JavaScript代码的高效运行和正确执行。希望这篇文章能帮助你更好地理解JavaScript的执行机制，为进一步的编程实践打下坚实基础。

avatar
文章
阅读
粉丝