文章目录回顾今日训练第一题执行上下文到底经历了什么第一步进入全局执行上下文GO第二步执行到 fn() 时第三步执行第二题作用域链问题1问题2问题3小任务非常重要菜鸟回答 —— 这里菜鸟还是没有掌握满分回答的精髓GPT 批改第一题批改GO创建阶段执行阶段AO创建阶段执行阶段查找 a第二题批改console.log(c)console.log(b)console.log(a)今日加练闭包预热问题1问题2菜鸟回答 —— 这里已经大致知道GPT想要什么答案了GPT 解析问题1fn 的 AO 会不会销毁问题2你的 GO 写错了创建阶段执行阶段AO(fn)AO(test)查找 b查找 a但是最关键的是这一句真正的作用域链验收题非常重要菜鸟回答 —— 接近满分(所以就不给GPT批改了)接前两天的文章直接让GPT每日训练我GPT训练我的第二天我表示不过如此回顾昨天你已经理解了函数提升优先于var变量提升GO/AO全局对象/执行上下文对象创建阶段和执行阶段今天继续推进两个核心知识点执行上下文Execution Context完整流程作用域链Scope Chain到底是怎么找变量的今日训练第一题执行上下文到底经历了什么看代码vara1functionfn(){varb2console.log(a)console.log(b)}fn()请不要运行按照下面顺序回答第一步进入全局执行上下文GOGO 里面有什么写出GO{}第二步执行到fn()时创建函数执行上下文AO。写出AO{}第三步执行console.log(a)JS 引擎是去 AO 找去 GO 找还是直接全局找请写出完整查找过程。第二题作用域链再看vara1functionfn(){varb2functiontest(){varc3console.log(a)console.log(b)console.log(c)}test()}fn()不要运行请回答问题1执行console.log(c)变量在哪里找到问题2执行console.log(b)查找路径是什么例如AO(test)↓AO(fn)↓GO问题3执行console.log(a)查找路径是什么小任务非常重要从现在开始每看一个函数都先在脑子里画GO↓AO(fn)↓AO(test)以后学闭包thiscall/apply/bindVue 响应式源码PiniaReact Hooks全部建立在这套执行上下文和作用域链模型之上。菜鸟回答 —— 这里菜鸟还是没有掌握满分回答的精髓第一题GO{a:1,fn:functionfn(){}}AO:{a:1,b:2}a 会现在AO找发现找不到所以去GO找到了a:1所以console.log(a)会输出1第二题 console.log(c)直接在test的AO中找并找到了输出3console.log(b)先在test的AO中找找不到就去fn的AO找找到了输出2console.log(a)先在test的AO中找找不到就去fn的AO找也找不到去GO找找到了输出1GPT 批改第一题批改代码vara1functionfn(){varb2console.log(a)console.log(b)}fn()GO你写的是GO{a:1,fn:functionfn(){}}✅ 最终执行完成后是对的。但如果按照执行上下文的完整流程创建阶段GO{a:undefined,fn:functionfn(){}}执行阶段执行a1变成GO{a:1,fn:functionfn(){}}AO你写的是AO{a:1,b:2}这里错了一点。创建阶段进入fnAO{b:undefined}因为functionfn(){varb2}函数里面只有varb并没有vara所以a不会出现在 AO 中。执行阶段执行b2变成AO{b:2}查找a你写的AO 找不到 → GO 找到完全正确。实际上 JS 引擎干的事情类似AO(fn)↓ 没有 aGO↓ 找到 a1返回1第二题批改代码vara1functionfn(){varb2functiontest(){varc3console.log(a)console.log(b)console.log(c)}test()}fn()console.log©你直接在 test 的 AO 找到输出 3✅ 正确。AO(test)↓ 找到 c3console.log(b)你test 的 AO 没有 → fn 的 AO 找到✅ 正确。AO(test)↓AO(fn)↓ 找到 b2console.log(a)你test 的 AO 没有 → fn 的 AO 没有 → GO 找到✅ 完全正确。AO(test)↓AO(fn)↓GO↓ 找到 a1今日加练闭包预热不要运行vara1functionfn(){varb2functiontest(){console.log(a)console.log(b)}returntest}varffn()f()问题1执行完varffn()以后fn 的AO会不会销毁问题2执行f()时console.log(b)是怎么找到b的菜鸟回答 —— 这里已经大致知道GPT想要什么答案了问题1不会 问题2 解析阶段GO{a:undefined,f:functionfn(){}}执行GO{a:1,f:functionfn(){}}解析阶段AO(fn){b:undefined,test:functiontest(){}}执行阶段AO(fn){b:2,test:functiontest(){}}解析阶段AO(test){}执行阶段 b找不到去AOfn中找找到了所以是2a找不到去AOfn中找还是找不到去GO中找所以是1GPT 解析问题1fn的 AO 会不会销毁你回答不会✅ 正确。但是原因你还没有说出来。因为varffn()实际上ftest也就是varftest而test函数里面console.log(b)需要访问AO(fn)JS 引擎发现虽然 fn 执行结束了但是还有一个函数test在引用它里面的变量。所以AO(fn)↑ test 引用了它因此AO(fn)不会被垃圾回收(GC)这就是闭包产生的根本原因。问题2你的 GO 写错了代码vara1functionfn(){varb2functiontest(){console.log(a)console.log(b)}returntest}varffn()f()你写GO{a:undefined,f:functionfn(){}}这里错了。创建阶段GO{a:undefined,fn:functionfn(){},f:undefined}因为varafunctionfn(){}varf都会提升。执行阶段执行a1GO{a:1,fn:functionfn(){},f:undefined}执行ffn()此时fn()返回test所以GO{a:1,fn:functionfn(){},f:functiontest(){}}AO(fn)创建阶段AO(fn){b:undefined,test:functiontest(){}}执行阶段AO(fn){b:2,test:functiontest(){}}AO(test)创建阶段AO(test){}执行阶段AO(test){}因为functiontest(){console.log(a)console.log(b)}里面没有varfunction参数所以 AO 为空。查找 b执行console.log(b)查找过程AO(test)↓ 没有 bAO(fn)↓ 找到 b2返回2查找 a执行console.log(a)查找过程AO(test)↓ 没有 aAO(fn)↓ 没有 aGO↓ 找到 a1返回1但是最关键的是这一句很多人会以为f()执行时AO(test)↓GO因为f()是在全局调用的这是错误的真正的作用域链作用域链由函数定义的位置决定词法作用域不是函数调用的位置决定所以functionfn(){varb2functiontest(){console.log(b)}returntest}test出生的时候GO↓AO(fn)↓AO(test)这个链条已经固定了。即使varffn()f()甚至setTimeout(f)obj.xxxf window.abcf调用位置变了无数次。但是AO(test)↓AO(fn)↓GO永远不会变。验收题非常重要不要运行vara100functionfn(){vara200functiontest(){console.log(a)}returntest}varffn()a300f()请你推导输出多少查找路径是什么菜鸟回答 —— 接近满分(所以就不给GPT批改了)解析阶段GO:{a:undefined,fn:functionfn(){},f:undefined}执行阶段 a100GO:{a:100,fn:functionfn(){},f:undefined}ffn()GO:{a:100,fn:functionfn(){},f:functiontest(){}}a300GO:{a:300,fn:functionfn(){},f:functiontest(){}}解析阶段AO(fn){a:undefined,test:functiontest(){}}执行阶段 a200AO(fn){a:200,test:functiontest(){}}解析阶段AO(test){}执行阶段AO(test)找不到a去AO(fn)找到a所以是200
