Manon.icu

I'm here to make you a better developer by teaching you everything I know about building for the web.

Published 2020-05-19

理解函数的执行过程

JavaScript 中的函数执行过程可以分为两个阶段:函数定义和函数调用。

函数定义阶段:

在 JavaScript 中,函数可以通过函数声明或函数表达式的方式进行定义。在函数定义阶段,JavaScript 解析器会扫描代码,将函数声明和函数表达式提升到作用域的顶部。这意味着函数可以在其定义之前被调用。 例如:

foo() // 函数调用在函数定义之前

function foo() {
  console.log('Hello, world!')
}

在上述代码中,函数 foo 在被定义之前就被调用了,这是因为函数定义在代码执行之前被提升到了作用域的顶部。

函数调用阶段:

在函数调用阶段,JavaScript 解释器会执行函数体中的代码。当函数被调用时,会创建一个新的执行上下文(Execution Context),并且将该执行上下文推入执行上下文栈(Execution Context Stack)中。

执行上下文包含了函数的作用域、参数、变量以及函数内部的代码执行位置等信息。在函数执行过程中,JavaScript 解释器根据代码的执行顺序逐行执行函数内部的语句。

函数执行过程中涉及以下几个重要的步骤:

  • 创建函数的作用域链:在函数执行前,JavaScript 解释器会创建一个作用域链,该链包含了函数自身作用域以及所有外部作用域。作用域链的顶部是全局作用域。
  • 创建函数的活动对象(Activation Object):活动对象是函数执行过程中的一个内部对象,用于存储函数的参数、局部变量和内部函数的引用。活动对象会被添加到作用域链的顶部,成为当前执行上下文的变量对象。
  • 解析和执行函数的代码:JavaScript 解释器会逐行解析和执行函数体中的代码。在执行过程中,变量会根据作用域链进行查找和访问。
  • 返回结果或继续执行:函数执行过程中可能会返回一个值,也可能不返回任何值。当函数执行完毕或遇到 return 语句时,会将结果返回给调用者,并将当前执行上下文从执行上下文栈中弹出,恢复到上一个执行上下文继续执行。

总结起来,JavaScript 中的函数执行包括函数定义阶段和函数调用阶段。在函数定义阶段,函数声明和函数表达式被提升到作用域的顶部。在函数调用阶段,创建执行上下文,建立作用域链和活动对象,执行函数体中的代码,最后返回结果或继续执行其他代码。理解函数的执行过程对于编写和调试 JavaScript 代码非常重要。

Comments

No Comments!