剖析JS函数创建与执行的底层算法，揭秘普通函数和箭头函数的区别
2023-11-13 14:53:35
- 底层算法：JS函数的创建与执行
在这一节，我们将从底层算法的角度，探究JavaScript函数的创建与执行过程，并深入理解普通函数与箭头函数的区别。最后，我们还将揭秘一种特殊的函数——ECMAScript内置函数。
14.1 函数的创建
在标准中，函数的创建过程主要分为两个阶段：解析阶段和执行阶段。
14.1.1 解析阶段
在解析阶段，浏览器或JavaScript引擎会将源代码解析成一个抽象语法树（AST）。AST是一棵树状结构，它了代码的语法结构和语义关系。在解析函数时，引擎会将函数的声明或表达式提取出来，并将其添加到AST中。例如，对于以下代码：
function add(a, b) {
return a + b;
}
引擎会将它解析成如下的AST：
Program
FunctionDeclaration
Identifier: add
Parameters: [Identifier: a, Identifier: b]
Body: BlockStatement
ReturnStatement
Expression: BinaryExpression
Left: Identifier: a
Operator: +
Right: Identifier: b
14.1.2 执行阶段
在执行阶段，引擎会根据AST来执行代码。当遇到函数声明或表达式时，引擎会首先创建一个函数对象。函数对象包含了函数的代码、作用域和参数列表等信息。例如，对于上面的代码，引擎会创建一个名为add的函数对象，该对象包含了如下信息：
- 函数的代码：
return a + b; - 函数的作用域：全局作用域
- 函数的参数列表：[a, b]
14.2 函数的执行
当函数被调用时，引擎会创建一个新的执行上下文（Execution Context）。执行上下文包含了函数的调用信息、局部变量和函数参数等信息。例如，当调用add(1, 2)时，引擎会创建一个新的执行上下文，该上下文包含了如下信息：
- 函数的调用信息：add(1, 2)
- 局部变量：无
- 函数参数：a = 1, b = 2
引擎会将执行上下文压入执行上下文栈（Execution Context Stack）中，然后开始执行函数代码。函数代码会逐行执行，当遇到return语句时，引擎会将函数的返回值压入执行上下文栈中，然后将执行上下文弹出栈。例如，对于add(1, 2)的调用，引擎会执行如下步骤：
- 创建新的执行上下文，并将其压入执行上下文栈。
- 将参数a和b的值分别赋给局部变量a和b。
- 执行函数代码，并计算出a + b的值为3。
- 将3压入执行上下文栈。
- 将执行上下文弹出栈。
- 返回3。
14.3 普通函数与箭头函数的区别
普通函数和箭头函数是JavaScript中的两种不同的函数类型。它们之间最主要的区别在于箭头函数没有自己的this、没有自己的arguments对象、不能作为构造函数使用，并且不能使用yield关键字。此外，箭头函数的语法更加简洁，不需要使用function关键字和return关键字。
14.4 ECMAScript内置函数
ECMAScript内置函数是JavaScript语言中预定义的函数。它们可以在任何地方使用，不需要任何声明或导入。例如，Math.max()函数用于返回给定数字中的最大值，String.prototype.split()方法用于将字符串分割成数组。
ECMAScript内置函数非常丰富，它们可以帮助我们完成各种各样的任务，如数学运算、字符串操作、数组操作、日期处理等等。
14.5 总结
在这一节中，我们从底层算法的角度，探究了JavaScript函数的创建与执行过程，并深入理解了普通函数与箭头函数的区别。最后，我们还揭秘了一种特殊的函数——ECMAScript内置函数。
