JS 底层探究-- 调用栈(Call Stack)

1. 一句话定义

调用栈 = JS 引擎用来记录「当前正在执行谁」「接下来要执行谁」的栈结构

遵循规则:后进先出(LIFO)

2. 执行规则

  1. 代码一开始运行全局执行上下文 先入栈
  2. 调用函数 :该函数的执行上下文入栈,JS 立刻执行它
  3. 函数执行完 :该函数上下文出栈,回到上一层
  4. 整个程序结束:全局上下文最后出栈,调用栈清空

例子

TypeScript 复制代码
// 全局上下文
console.log("全局开始");

function a() {
  console.log("函数 a 执行");
  b(); // 调用函数 b
}

function b() {
  console.log("函数 b 执行");
}

a(); // 调用函数 a
console.log("全局结束");

4. 调用栈的作用

  • 保证 JS 单线程、同步执行
  • 追踪函数执行位置
  • 报错时能看到调用栈轨迹(Chrome 控制台里的 stack trace)

总结

  • 调用栈 :管理执行上下文的后进先出栈结构
  • 执行流程:全局入栈 → 函数入栈 → 函数出栈 → 全局最后出栈
  • 核心意义 :决定 JS 代码谁先执行、谁后执行
相关推荐
GuWenyue12 小时前
放弃云端API!5套技术栈实战WebGPU端侧AI,前端独立跑本地大模型,省成本还保隐私
前端·数据库·人工智能
胡萝卜术20 小时前
当大模型遇上浏览器:用 React + WebGPU 在前端跑通 DeepSeek-R1 的实战笔记
前端·javascript·面试
不好听61320 小时前
Tailwind CSS 原子化 CSS 完全入门:为什么现代前端开发都在用?
前端·css
人间凡尔赛20 小时前
Next.js 16 生产级实战:Cache Components + View Transitions 完整指南
开发语言·javascript·ecmascript
触底反弹20 小时前
🔥 React 零基础入门(上):环境搭建 + JSX 深度解析
前端·react.js·typescript
why技术20 小时前
分享一套我一直在使用的 AICoding 组合拳,小而美的典范。
前端·后端·ai编程
朦胧之21 小时前
AI应用-消费流式输出
前端·javascript·ai编程
小林ixn21 小时前
在浏览器跑通 15 亿参数大模型:我用 React + WebGPU 复刻了 DeepSeek-R1
前端·react.js·前端框架
Csvn21 小时前
容器查询 @container 实战:告别无休止的媒体查询
前端
谷哥的小弟1 天前
TypeScript对象类型
javascript·typescript