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罢了。

相关推荐
谢尔登25 分钟前
a 标签的跳转机制
前端·javascript·webpack·node.js
小皮虾2 小时前
搞全栈还在纠结 POST、GET、RESTful?试试这个,像调用本地函数一样写接口
前端·node.js·全栈
程序员爱钓鱼2 小时前
Node.js 编程实战:路由与中间件
前端·后端·node.js
程序员爱钓鱼2 小时前
Node.js 编程实战:Express 基础
前端·后端·node.js
亮子AI3 小时前
【node.js】node.js 两种模块规范 CommonJS 和 ESM 如何选择?
node.js
孟祥_成都3 小时前
nest.js / hono.js 一起学!日志功能/统一返回格式/错误处理
前端·node.js
亮子AI4 小时前
【node.js MySQL】node.js 如何连接 MySQL?
数据库·mysql·node.js
亮子AI5 小时前
【node.js】如何使用 node.js 来制作命令行应用?
node.js
大布布将军5 小时前
⚡️编排的艺术:BFF 的核心职能——数据聚合与 HTTP 请求
前端·网络·网络协议·程序人生·http·node.js·改行学it
大布布将军1 天前
⚡️ 后端工程师的护甲:TypeScript 进阶与数据建模
前端·javascript·程序人生·typescript·前端框架·node.js·改行学it