JavaScript 引擎如何“拆解”代码？深入解析编译与执行的奥秘！

JavaScript 引擎执行代码时并非直接运行，而是首先将代码进行编译、解析，最终转化为一系列 token（词法单元）。理解这个过程不仅能够帮助我们优化代码，还能为解决调试难题提供宝贵思路。

一、什么是 Token？

Token 是 JavaScript 引擎将源代码分解成的最小语法元素。每个 token 都代表一个独立的语法片段。编译过程的第一步就是将源代码拆解成一系列的 token，接下来引擎会对这些 token 进行语法解析，并生成执行计划。

二、Token 的分类

在 JavaScript 中，token 大致分为以下几类：

• 关键字：例如 if, else, function, return, let 等，构成了语言的基本控制结构。
• 标识符：如变量名、函数名，任何自定义的命名元素。
• 操作符：包括 +, -, *, /, === 等，构成运算逻辑。
• 字面量：如数字、字符串、布尔值、对象字面量 {} 等。
• 分隔符：例如 (), {}, [], ;, , 等，用于分隔代码块或表达式。
• 注释：如 // 单行注释和 /* */ 多行注释，虽然不会被执行，但在解析时也被视为 token。

三、空白字符和换行符是 Token 吗？

JavaScript 引擎在解析时，空白字符 和 换行符 通常不会直接参与语法分析，但它们作为 分隔符 和 代码结构 的一部分至关重要：

1. 空白字符：用于分隔标识符与关键字、操作符等元素。例如，let a = 1; 中的空格用于将 let 与 a 分开。
2. 换行符与自动分号插入（ASI）：换行符在某些情况下会触发 自动分号插入 机制，这意味着换行符可能影响语句的结束位置。

四、代码中的两个经典问题

• 这个函数会返回什么？

function abc() {
  return
    42;
}

答案： 返回 undefined 原因： 根据 JavaScript 的自动分号插入机制，return 之后的换行被视为语句结束，因此实际上函数在 return 后已经结束了，42 并没有被返回。

• 在 JavaScript 中 12.toString() 会抛出 SyntaxError: Invalid or unexpected token。 原因： 单个 . 在 JavaScript 中被视为小数点，只有在加上第二个 . 后才可以当作访问属性的操作符。 解决方法： 可以通过以下几种方式避免错误：

12..toString();  // 使用两个点，第一点作为小数点
(12).toString(); // 使用括号包裹数字
12 .toString();  // 增加一个空格作为数字和.的分割

五、总结

JavaScript 引擎在执行代码前会通过词法分析和语法分析，生成一系列的 token。掌握这背后的执行机制，有助于我们编写更加高效、可读的代码，同时避免常见的自动分号插入和语法解析问题。

如果这篇文章对你有所帮助，希望能点个关注或分享给更多的小伙伴。这对我来说是极大的鼓励，也能让我继续产出更多有趣的技术内容。如果觉得有价值，随手赞赏一下也是对我莫大的支持！感谢大家的阅读和支持🚀