JS宗门入门记:小白师妹的对答如流(从JS环境到函数作用域)

晨光熹微,JS宗门的演武场上已传来阵阵键盘敲击声。我------一个刚入门三天的女弟子,正蹲在角落盯着卷轴上的《V8心法》发呆。

"喂,新来的!"一个身影挡在我面前,是内门弟子李师兄,人称"闭包剑客"。他居高临下地看着我手中的卷轴,语气带着审视:"听说你刚入门三天,就敢看《V8心法》?那你告诉我,我宗功法靠何物运转?"我站起身,拍拍衣摆,不慌不忙答道:

"回师兄,我宗功法运行,倚仗两大'引擎':一为'浏览器'秘境,二为'Node'灵台。其中V8引擎,乃是一段庞大而精妙的'函数',它能读懂JS咒语并予以执行。"
(v8 引擎, 也是一段函数(庞大),它可以读懂 js 并执行)

李师兄眉毛一挑:"哦?那你说说,一段JS咒语被V8读取后,是直接生效吗?""并非如此。"我摇头,"咒语入引擎,首经三重梳理:一曰'分词',解构咒语为词元;二曰'解析',筑成'抽象语法树',辨明有效标识符;三曰'生成代码',方可使咒语具现。"

(# js的执行

  1. 代码被 v8 读取到的第一时间,并不是执行,而是会先编译(梳理)
  • 梳理:
  1. 分词/词法分析:将代码一个一个拆分解析成v8引擎可以识别的字符
  2. 解析/语法分析 -- AST(抽象语法树) 获取有效标识符
  3. 生成代码)
    旁边渐渐围拢了几位外门弟子,李师兄抱臂又问:"那你可知,我宗为何要创'函数'之术?"我微微一笑:"函数如术法封装,可将一段逻辑代码封存其中。未调用时,如剑在鞘中,隐而不发;一旦调用,则如剑出鞘,代码方得执行。"

(形如 function foo() {},就是一个函数体,函数存在的意义就是让我们可以将某一段逻辑代码,写在函数中,最后调用函数,这段代码才会执行)

JS 复制代码
var a = 10
function foo() {
console.log(a);
}
foo()

此时一位师姐插话:"听说你昨日便参透了'作用域'之境?"我转向她,拱手道:"师姐明鉴。我宗作用域分三重天:一为'全局',如宗门广场,人人可见;二为'函数',如各自厢房,内物不外露;三为'块级',需以let、const符咒配合{}结界而成。且作用域之规,乃'由内向外'单向可见,外层不可窥探内层之秘。"

(# 作用域

  1. 全局作用域
  2. 函数作用域 (参数也是该作用域的一个有效标识)
  3. 块级作用域 (let,const 和 {} 语法配合使用会导致声明的变量处在一个作用域中)

(宗门广场上,众多弟子往来穿梭,广场中央立着 "全局" 石碑,清晰可见,象征全局作用域人人可访问。)

(一间独立厢房内,一位弟子正在桌前研读典籍,厢房门窗紧闭,门外有 "函数" 牌匾,示意厢房内物品仅限内部使用,不向外暴露。)

(一间密室中,地面用 {} 符号绘制出结界,结界内有 let、const 符咒悬浮,一位弟子在结界内修炼,结界外之人无法看清内部情况,体现块级作用域需特定符咒配合结界形成。一间密室中,地面用 {} 符号绘制出结界,结界内有 let、const 符咒悬浮,一位弟子在结界内修炼,结界外之人无法看清内部情况,体现块级作用域需特定符咒配合结界形成。)

(从内到外依次绘制着密室、厢房、宗门广场,箭头从密室指向厢房再指向广场,示意作用域 "由内向外" 单向可见的规则,外层无法反向窥探内层。)

李师兄忽然目光一凝,抛出最后一问:"那'let结界术'中,有一特殊禁制,你可知是何?"我深吸一口气,清晰答道:"此乃'暂时性死区'------当{}结界中存let声明,结界之内凡寻此变量,必先寻境内之身。纵境内无获,亦不可越界外求,此禁直至结界畅通方解。"

(当一个{} 语句中存在 let x 时,在该{}中访问x,永远都只能访问{}内部的 x,就算内部访问不到,也不能访问外部的x。这种规则称为 --- 暂时性死区)

(举个栗子

js 复制代码
let a = 1
if (true) { 
  console.log(a);  // 暂时性死区
  let a = 2
}

代码结果是'不能在声明变量a之前输出',就算内部访问不到a来输出,也不能访问外部的a,这称为暂时性死区)

场中静默片刻。李师兄忽然大笑,从怀中掏出一枚铜牌:"好!基础扎实,悟性不凡。这是我内门听讲牌,明日'事件循环论剑',你可来旁听。"后来才知,李师兄那日其实是奉长老之命,试探新弟子根基。而我------这个通宵啃完《JavaScript高级程序设计》还做了三套笔记的"小白",不过是把书上的字,背得熟了些。毕竟在JS宗门,哪有什么天才,不过是把别人喝咖啡的时间,用来......写bug和debug罢了。

相关推荐
一心赚狗粮的宇叔14 小时前
VScode常用扩展包&Node.js安装及npm包安装
vscode·npm·node.js·web
花间相见14 小时前
【AI开发】—— Ubuntu系统使用nvm管理Node.js多版本,版本切换一键搞定(实操完整版)
linux·ubuntu·node.js
嘿是我呀15 小时前
【用npm安装node时报错“npm 无法加载文件”】
前端·npm·node.js
西门吹-禅2 天前
prisma
node.js
怪兽毕设2 天前
基于SpringBoot的选课调查系统
java·vue.js·spring boot·后端·node.js·选课调查系统
心.c2 天前
Vue3+Node.js实现文件上传分片上传和断点续传【详细教程】
前端·javascript·vue.js·算法·node.js·哈希算法
roamingcode2 天前
我是如何 Vibe Coding,将 AI CLI 工具从 Node.js 迁移到 Rust 并成功发布的
人工智能·rust·node.js·github·claude·github copilot
Stream_Silver3 天前
【Node.js 安装报错解决方案:解决“A later version of Node.js is already installed”问题】
node.js
Anthony_2313 天前
基于 Vue3 + Node.js 的实时可视化监控系统实现
node.js
说给风听.4 天前
解决 Node.js 版本冲突:Windows 系统 nvm 安装与使用全指南
windows·node.js