JavaScript 调用栈：为什么它的深度会影响代码执行？

最新推荐文章于 2024-10-02 08:30:00 发布

阿珊和她的猫

最新推荐文章于 2024-10-02 08:30:00 发布

阅读量469

点赞数 9

文章标签： javascript 状态模式开发语言

本文链接：https://blog.csdn.net/weixin_42554191/article/details/142645539

版权

在这里插入图片描述

🤍 前端开发工程师、技术日更博主、已过CET6
🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1
🕠 牛客高级专题作者、打造专栏《前端面试必备》、《2024面试高频手撕题》
🍚 蓝桥云课签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》
💬 前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。点击跳转到网站。

文章目录

背景

在 JavaScript 的执行机制中，调用栈（Call Stack）是一个重要的概念，它用于管理函数的调用和执行过程。通过理解调用栈的工作原理，开发者可以更好地优化代码、调试问题，以及理解异步编程的行为。本文将深入探讨调用栈的结构、工作原理、特点，并提供代码示例以帮助读者理解。

原理

1. 什么是调用栈

调用栈是一个用于跟踪当前执行上下文的结构。每当 JavaScript 引擎执行一段代码时，都会将当前的执行上下文推入栈中。相应的，当函数执行完成后，其上下文被弹出栈。调用栈遵循后进先出（LIFO）的原则，每次只允许访问最顶部的上下文。

2. 执行上下文与调用栈的关系

每个函数的执行都会创建一个新的执行上下文。当函数被调用时，它的执行上下文会被推入调用栈。当函数返回时，这个执行上下文被从栈中弹出。调用栈确保了 JavaScript 的同步执行特性，使其能够按顺序执行代码。

3. 异步编程与调用栈

虽然 JavaScript 是单线程的，但它也支持异步编程。当调用的函数是异步操作时（例如，setTimeout、Promise 等），其上下文不会立即推入调用栈，而是会被放入消息队列。当调用栈空闲时，事件循环会将消息队列中的操作推入调用栈，这样就实现了非阻塞的功能。

特点

后进先出（LIFO）：调用栈遵循后进先出的原则，最后调用的函数最先返回。
单线程性：JavaScript 是单线程的，只有一个调用栈，意味着同一时刻只能执行一个代码块。
控制执行顺序：通过调用栈，JavaScript 能够有效地管理函数调用的执行顺序。
深度限制：调用栈的深度是有限的，过多的函数调用会导致栈溢出（stack overflow）错误。

代码案例

以下是一个简单的代码示例，展示了调用栈的工作过程：

function greeting() {
    return "Hello!";
}

function displayGreeting() {
    const message = greeting();  // 调用 greeting 函数
    console.log(message);        // 输出: Hello!
}

function main() {
    displayGreeting();  // 调用 displayGreeting 函数
}

main();  // 程序的入口，开始执行

在这里插入图片描述

执行过程分析

当 main() 被调用时，创建 main 的执行上下文并推入调用栈。
然后，displayGreeting() 被调用，displayGreeting 的执行上下文被推入栈。
接着，greeting() 被调用，greeting 的执行上下文被推入栈。
在 greeting() 函数中，返回字符串 "Hello!"，此时其上下文被弹出栈。
返回到 displayGreeting() 中，输出 "Hello!"，该上下文也被弹出。
最后，返回到 main() 中，main 的上下文被弹出，程序执行完成。

输出结果为：

Hello!

复杂示例

为了更好地理解调用栈，以下是一个更复杂的示例，涉及多个函数调用：

function first() {
    second();
    console.log('first');
}

function second() {
    third();
    console.log('second');
}

function third() {
    console.log('third');
}

first();  // 程序的入口