掘金 人工智能 06月01日 15:03
JS 执行机制,其实也没那么复杂 ——拿日常来打打比方你就懂了
index_new5.html
../../../zaker_core/zaker_tpl_static/wap/tpl_guoji1.html

 

本文用生活化的例子解释了JavaScript的运行原理,旨在帮助开发者更好地理解代码的执行过程。文章将调用栈比作待办事项清单,作用域比作门禁系统,作用域链比作找东西的路线图,词法作用域比作出生地的归属感,闭包比作一段难以忘怀的记忆。通过这些类比,读者可以更容易地理解JavaScript中的抽象概念,从而更好地掌握编程技能。

🧑‍💼**调用栈:** JS的调用栈就像上班族的待办事项清单,用于管理函数的调用顺序。函数执行时会被压入调用栈,执行完毕后弹出,类似于完成任务从清单中划掉。

🏡**作用域与作用域链:** 作用域决定了变量的可访问范围,可以理解为房间的门禁。作用域链则是在查找变量时,从当前作用域逐级向上查找的路径,就像在家中寻找物品一样,先在自己房间找,再去其他房间,最后到客厅。

🧱**词法作用域:** 词法作用域指的是函数定义时所处的作用域,它决定了函数可以访问哪些变量。即使函数在其他作用域中被调用,它仍然访问的是定义时所在作用域的变量,类似于一个人的籍贯不会因为搬家而改变。

🎁**闭包:** 闭包是指函数与其周围状态(词法环境)的捆绑。即使外部函数执行完毕,闭包仍然可以访问外部函数的变量,就像一段难以忘怀的记忆,即使时间流逝,仍然清晰地存在。

引言

你有没有过这样的经历?

别担心,这些看似高深的概念,其实都能用我们生活中常见的场景来类比。今天我们就用“日常逻辑”来聊聊 JS 是怎么运行你的代码的。


🧑‍💼 调用栈:JS 的“任务清单”

想象一下你是个上班族,每天早上打开电脑的第一件事就是列个待办事项清单:

    回复邮件 ✅开会 ⏳写报告 📝

这个清单就是你的 调用栈(Call Stack) ,它是 JS 用来管理函数调用顺序的一个“任务清单”。

比如:

function 做早餐() {  console.log("煎蛋");}function 上班() {  console.log("开会");  做早餐();}上班();

JS 的调用栈是这样工作的:

就像你先开始上班流程,中途临时去煎了个蛋,吃完再回来继续上班。


🏡 作用域:你家的门禁

你可以把每个函数看作是一个房间,房间里有私人物品(变量),不是谁都能随便拿。

function 房间A() {  let 杯子 = "在床头";}function 房间B() {  console.log(杯子); // ❌ 找不到!}

这就是 作用域(Scope) :决定一个变量在哪里能被访问。

作用域链:找东西从近到远

如果你在一个房间里找遥控器,你会怎么做?

JS 查找变量也是这样:

let 零花钱 = 50;function 外层() {  let 存款 = 10000;  function 内层() {    let 收入 = 8000;    console.log(零花钱); // 找到了!去外层找  }  内层();}外层();

这个查找路径就叫做 作用域链(Scope Chain)


🧱 词法作用域:你出生在哪,决定了你能看到什么

这个词听起来很专业,但其实很好理解:

你在哪写的函数,它能看到哪些变量,就已经定下来了。

举个例子:

let 地点 = "兴国";function 打印地点() {  console.log(地点);}function 外层() {  let 地点 = "抚州";  打印地点(); // 输出的是兴国,不是抚州!}

虽然 打印地点() 是在“外层”里被调用的,但它是在全局作用域中被定义的,所以它看到的还是“兴国”。

就像你出生在兴国,不管以后搬到哪生活,身份证上的籍贯是不会变的。


🎁 闭包:记住你曾经拥有的一切

终于说到“闭包”了。这可是很多人觉得最难懂的部分,但我们用隔壁老张的故事来解释它。

故事:

你一直记得一个女孩,你们曾经在一起三年,很相爱,一起经历过很多事,开心,难过,距离,矛盾。可是后来你们分开了,再也没有续集了,但你一直记得那个女孩。直到有一天你去到你们常去的酒馆,你恍惚了,想知道她还在吗,可是她已经不在了,可是只要你还记得她,她就一直在你心里,这个她,就是闭包里的变量。

看代码:

function 创建女孩() {  let 回忆 = ["散步", "喝酒"];  return function () {    console.log(回忆);  };}let 记忆 = 创建女孩();记忆(); // 输出: ["散步", "喝酒"]

即使 创建女孩() 已经执行完了,里面的变量 回忆 并没有被销毁,因为还有一个函数(闭包)还记着它。

💡 闭包的本质:函数 + 它能记住的词法作用域


🔚 总结一句话:

JavaScript 的执行机制,就像你的生活:

理解了这些,你就不再只是写代码的人,而是真正懂得代码为什么会这样运行的开发者啦!


Fish AI Reader

Fish AI Reader

AI辅助创作,多种专业模板,深度分析,高质量内容生成。从观点提取到深度思考,FishAI为您提供全方位的创作支持。新版本引入自定义参数,让您的创作更加个性化和精准。

FishAI

FishAI

鱼阅,AI 时代的下一个智能信息助手,助你摆脱信息焦虑

联系邮箱 441953276@qq.com

相关标签

JavaScript 调用栈 作用域 闭包
相关文章