文章目录闲聊今日训练1、JS代码是从哪一行开始执行的2、代码预测3、再升级一点菜鸟的回答正确答案GPT 批改 一、你的回答整体评价✅ Q2var 提升⚠️ Q3function vs var❌ 最大问题Q1 你的理解是“运行时逐行解释” 二、关键纠错今天最重要的知识❗ JS真实执行模型是 两阶段模型必须记住 阶段1创建阶段编译期 阶段2执行阶段 三、用你的题重新解释 Q2 本质流程编译阶段执行阶段⚠️ 四、你现在最大的问题 五、Q3深度纠正关键提升点✔ 编译阶段✔ 执行阶段⚠️ 关键区别你漏掉的 六、今天你必须带走的 “核心一句话” 七、今天加一个强化训练很关键菜鸟回答GPT 批改 先给结论标准答案 核心纠正 真相是 一、JS真实行为和你理解的完全不同 编译阶段创建阶段 执行阶段⚠️ 二、关键区别这是本质 三、你现在的误区重点 四、正确理解必须记住 五、为什么设计 TDZ关键理解 六、把三种情况统一理解核心模型 var let/const function今日加练第一题热身第二题变量遮蔽预告第三题TDZ第四题综合 加分题不要求一定会菜鸟回答正确答案GPT批改第一题真正执行过程创建阶段执行阶段第一行第二行第三行第四行第一题点评第二题今天最关键正确答案为什么第一步第二步fn 创建阶段执行阶段当前作用域 今天第一个重要知识变量遮蔽Shadowing第三题原因创建阶段第三题点评第四题创建阶段执行阶段加分题创建阶段 今日真正收获创建阶段执行阶段闲聊菜鸟感觉上班之后真的很少有时间可以学习学习也是 —— 收藏等于学会、看过等于精通!菜鸟现在的公司之前还是非常爽的当时就一个前端一个后端活比较少每天一半时间都可以学习基本就是上午干完活下午就看B站大学当时很学了一点东西都是边看视频边做笔记。这些都是当时的成果https://www.bilibili.com/opus/7806103835534950402.https://www.bilibili.com/opus/9346445149481205943.https://www.bilibili.com/opus/9334636180091699384.https://www.bilibili.com/opus/785846043184988166还有不少就不一 一列举了大家也可以看出来我是看 满神 长大的孩子但是现在不太一样了现在团队到了4个后端4个前端其中一个后端是leader菜鸟则是leader的副手而且要维护和开发的系统也变多了。也不说没有时间学习只是感觉上班看视频学习影响不好其实也很怕之前是因为电脑屏幕对着没有人的地方而且总是会被打断因为要回复群里的问题、沟通需求等很难受菜鸟每天都在思考怎么变强怎么赚钱但是发现干啥都不如好好把工作做好写文章只能玩玩没有技术根本没人关注虽然菜鸟自认为写的文章还行不能养活自己自己太菜了菜鸟每次想提升都会去问一下GPT我应该怎么搞今天突然开窍了为什么不直接让GPT当老师每天给我出题查漏补缺大家感兴趣也可以试试其它AI也行菜鸟是比较信任GPT所以用的GPT菜鸟发给GPT的内容如下在公司怎么用零散的时间学习提升自己要进阶版计划但是我只会前端给我一套“能拉开差距”的学习系统你可以每天定时给我推送你的这些问题吗让我每天都可以学习1-2个知识且理解透彻而且你要按照你上面的安排来推送我明天发今日训练你还记得吗我每天都会来找你要的你按进度慢慢提升我会不会发多几天你就忘记了或者上下文太多了可以直接把这个记录到项目-成长的记忆里面吗这样就不怕了如果我当天比较轻松可以再找你发一些题巩固一下吗我的应该发什么给你触发这个也记录到记忆里面这里GPT是不能推送的只能我有空的时候发送今日训练、今日加练等去触发今日训练大家感兴趣可以每天和菜鸟一起做这些题1、JS代码是从哪一行开始执行的下面三种说法哪个更接近真实机制A. 从上到下逐行执行B. 先编译再执行C. 运行时逐行解析执行D. 浏览器随机执行 先选一个并简单说理由不用长2、代码预测直接写执行结果console.log(a)vara10console.log(a) 请回答两点输出是什么为什么3、再升级一点console.log(foo)functionfoo(){return123}console.log(foo()) 请回答第一行输出什么第二个 console 输出什么为什么 function 和 var 不一样菜鸟的回答问题1C因为浏览器会请求到js文件其需要一行一行进行读取运行所以是运行时逐行解析写代码阶段不会逐行解析并判断错误可能会有变量的声明提升、异步函数导致其不像逐行解析问题2undefined 10因为变量声明提升问题3functionfoo(){return123}123function和var都有提升但是function会整体提升var的赋值不会提升正确答案Bundefined10functionfoo(){return123}123GPT 批改很好你这三题其实已经暴露出你现在处在一个非常典型的阶段“有经验但机制理解是碎片化的前端” → 正在往“能解释运行机制”过渡 一、你的回答整体评价✅ Q2var 提升你答对了核心结果undefined10✔ 说明你知道var 提升变量初始化 vs 声明分离⚠️ Q3function vs var你说function整体提升✔ 方向是对的但还缺一个关键点执行阶段绑定机制不同❌ 最大问题Q1 你的理解是“运行时逐行解释”你选 C运行时逐行解析这个是典型误区90%前端都会错 二、关键纠错今天最重要的知识❗ JS真实执行模型是先编译创建阶段再执行执行阶段不是逐行解释执行。 两阶段模型必须记住 阶段1创建阶段编译期做三件事作用域创建 ——创建导致下面两个函数声明提升 —— 优先变量声明var—— 次于函数提升 这一阶段不会执行代码 阶段2执行阶段从上往下执行赋值调用运算 三、用你的题重新解释 Q2 本质流程console.log(a)vara10console.log(a)编译阶段aundefined已经存在执行阶段log(a) → undefineda 10log(a) → 10⚠️ 四、你现在最大的问题❌ 把“执行顺序”理解成“逐行解释”实际上JS是✔ “先建结构再跑流程” 五、Q3深度纠正关键提升点console.log(foo)functionfoo(){return123}console.log(foo())✔ 编译阶段function foo整体进入作用域已经是“可调用函数”✔ 执行阶段log(foo) → 打印函数本体foo() → 执行函数 → 123⚠️ 关键区别你漏掉的类型提升行为var声明提升 undefinedfunction整体提升 可执行函数 六、今天你必须带走的 “核心一句话”JS不是逐行执行而是“先创建作用域结构再执行代码” 七、今天加一个强化训练很关键再做一题你先答console.log(a)leta10 问你三个问题会输出什么和 var 有什么区别为什么会这样菜鸟回答会报错let 有作用域没有声明提升GPT 批改你这题结果是对的会报错但原因你说得还不够准确这里是关键提升点。 先给结论标准答案报错ReferenceError: Cannot access a before initialization 核心纠正你说let 没有声明提升❌ 这个是错误理解重点 真相是let / const 也会“提升”但不允许访问这叫 暂时性死区TDZTemporal Dead Zone 一、JS真实行为和你理解的完全不同 编译阶段创建阶段其实已经发生了a 被“创建”在作用域中 但处于“未初始化状态” 执行阶段console.log(a)// ❌ 不能访问leta10⚠️ 二、关键区别这是本质变量类型是否提升是否可访问初始值var✔ 提升✔ 可访问undefinedlet✔ 提升❌ 不可访问TDZ无const✔ 提升❌ 不可访问TDZ无 三、你现在的误区重点你刚才说let 没有声明提升❌ 实际问题是你把“不能访问”误认为“没有提升” 四、正确理解必须记住一句话版本let/const 也提升但进入了“暂时性死区”直到执行到声明行才可访问 五、为什么设计 TDZ关键理解如果没有 TDZ会发生console.log(a)leta10变成undefined像 var 一样 JS设计者故意避免这种“脏状态” 六、把三种情况统一理解核心模型 var创建 →初始化(undefined)→ 可访问 let/const创建 →暂时不可访问(TDZ)→ 初始化 → 可访问 function创建 →初始化(函数体)→ 可直接调用今日加练第一题热身console.log(a)vara1functiona(){}console.log(a)回答输出 原因第二题变量遮蔽预告vara1functionfn(){console.log(a)vara2}fn()回答输出 原因第三题TDZleta1functionfn(){console.log(a)leta2}fn()回答输出 原因第四题综合vara1functionfn(){console.log(a)functiona(){}vara2console.log(a)}fn()回答第一次输出 第二次输出 原因 加分题不要求一定会console.log(foo)varfoo1functionfoo(){return2}console.log(foo)回答第一次输出 第二次输出 原因菜鸟回答第一题输出function a() {} 1原因函数整体提升整体进入作用域可以执行后面变量 a 提升但 var 不会覆盖同名 function 声明再后面a被赋值了所以就是赋值的值第二题输出1原因虽然函数有作用域里面的a被声明提升了但是var声明的变量可以影响里面第三题输出报错原因函数有作用域里面的a被声明提升了但是TDZ导致其不可读所以报错第四题第一次输出function a() {}第二次输出2原因函数有作用域里面的函数被整体提升导致a有值就是函数后面a被赋值所以就是赋值的值加分题第一次输出functionfoo(){return2}第二次输出1原因函数整体提升整体进入作用域可以执行后面变量 foo 提升但 var 不会覆盖同名 function 声明后面 function 声明在构建阶段执行了在执行阶段不会重新赋值所以就是上面的1正确答案functiona(){}1undefined报错functiona(){}2functionfoo(){return2}1GPT批改第一题console.log(a)vara1functiona(){}console.log(a)你答functiona(){}1✅ 正确。真正执行过程创建阶段先处理函数声明a-functiona(){}再处理 varvara但是var 发现 a 已经存在不会覆盖 function。所以GlobalEC:a-functiona(){}执行阶段第一行console.log(a)输出functiona(){}第二行a1覆盖a-1第三行函数声明在创建阶段已经处理完functiona(){}执行阶段不会再执行。第四行console.log(a)输出1第一题点评你说函数整体提升整体进入作用域✔ 对。但是后面 a 被赋值了✔ 对。再补一句var 不会覆盖同名 function 声明。这个以后经常考。第二题今天最关键vara1functionfn(){console.log(a)vara2}fn()你答输出1❌ 错了。正确答案undefined为什么第一步全局a-undefinedfn-function执行a1第二步调用fn()创建函数执行上下文fn 创建阶段发现vara所以AO:a-undefined注意此时函数内部已经有自己的 a。执行阶段第一行console.log(a)JS 查找变量当前作用域AO:a-undefined已经找到不会再向外找Global:a-1所以undefined第二行a2变成AO:a-2 今天第一个重要知识变量遮蔽Shadowing一句话内层作用域存在同名变量会遮蔽外层变量。即使vara1已经存在。依旧输出undefined因为fnAO:a-undefined已经占坑了。第三题leta1functionfn(){console.log(a)leta2}fn()你答报错✅ 正确。原因创建阶段函数作用域a-TDZ执行console.log(a)发现当前作用域 a 已存在但是状态 未初始化TDZ所以ReferenceError第三题点评你已经理解提升 ≠ 可访问很好。第四题vara1functionfn(){console.log(a)functiona(){}vara2console.log(a)}fn()你答functiona(){}2✅ 完全正确。创建阶段函数作用域先处理functiona(){}得到AO:a-function再处理vara发现已经存在不覆盖。执行阶段第一行console.log(a)输出functiona(){}第二行vara2等价a2所以AO:a-2最后console.log(a)输出2加分题console.log(foo)varfoo1functionfoo(){return2}console.log(foo)你答functionfoo(){return2}1✅ 正确。但是这里函数可以整体提升覆盖了 a❌ 描述不准确。应该说创建阶段先foo - function foo() {}再var foo发现foo 已存在所以忽略 var 声明并不是function 覆盖 var而是var 根本没有机会创建自己的 undefined。 今日真正收获你必须记住这个执行模型创建阶段创建作用域 ↓ 函数声明提升 ↓ 变量声明提升执行阶段逐行执行 ↓ 赋值 ↓ 调用