《Vue企业开发实战》电子教案3-箭头函数与Map

《网站开发技术（VUE）》·教案3第页一、基本信息课程名称网站开发技术（VUE）授课教材《Vue企业开发实战》授课项目项目2大觅项目中ES6的使用授课教师XXX授课对象高等职业教育专科软件技术专业授课方式讲授+演示+上机课时2课时（1次课，理实一体）授课地点Web开发实训室二、教学内容本课对应课程标准项目2的任务3、任务4。理解箭头函数的this绑定与不适用场景，掌握Map的常用方法，为后续异步与模块化做准备。一次课完成讲授、演示与上机，不拆分课时。任务教学内容课件任务3箭头函数this指向问题；箭头函数语法；与普通函数区别；不适用场景（对象方法、构造函数、原型方法）教材2.3任务4Map任意类型作键、size、set/get/has/delete、keys/values/entries/forEach教材2.4三、学情分析学生已能用let/const和解构取值，但对回调里this丢失仍模糊，习惯用对象字面量当字典，不清楚Map与普通对象的差别。本课要求能改写this问题，并能用Map存取键值。四、教学目标（一）知识目标1.理解箭头函数this在定义时绑定，以及没有arguments。2.知道箭头函数不适合作为对象方法、构造函数和原型方法。3.熟悉Map的特点及size、set、get、has、delete和遍历方法。（二）能力目标1.能用箭头函数改写setInterval中this丢失的示例。2.能判断一段代码是否适合用箭头函数。3.能创建Map并完成增删改查与遍历。（三）素质目标1.养成规范操作、爱护实训设备、按步骤验证的习惯。2.培养严谨的编码意识和精益求精的态度。3.在分组排错中培养沟通协作。五、教学重点与难点类型内容突破办法重点箭头函数this绑定先普通函数报错，再箭头函数对照重点Map的set/get与遍历当场建一张表走一遍增删查难点箭头函数不适用场景对象方法里用箭头导致this不对，让学生看输出六、教学方法与准备方法：问题导入、正误对照、理实一体。导入用“定时器里打印不到姓名”，新授按“箭头函数→Map”推进。教师准备：课件；已验证可运行的Node环境与dm工程；教材；上机任务清单。学生准备：实训机可访问外网或内网镜像；VSCode；已保存的dm工程；笔记本记录命令。七、教学过程环节教师活动学生活动设计意图组织教学与导入演示对象方法里setInterval用普通函数，this不是该对象。提问：如何在不保存self的前提下改写？观察输出，讨论原因。用this丢失把箭头函数的价值说清楚。明确学习目标出示目标：会写箭头函数、知道何时不用、会用Map。对照目标勾画。明确本课不是把所有function都改成箭头。任务3箭头函数讲语法、剩余参数。对照普通函数演示this绑定。列出不适用场景并各举一例。跟写改写，判断三道“能不能用箭头”的小题。既教写法，也教边界，避免滥用。上机练习1把this丢失示例改为箭头函数，输出正确姓名和年龄。再尝试把对象方法本身改成箭头，观察失败。完成改写并记录不适用结论。正反各做一次，把边界做实。任务4Map对比对象只能用字符串键。演示创建、size、set/get/has/delete和四种遍历。口述Map相对对象的三个优点。为作业中用Map筛选数组铺路。上机练习2创建Map，完成写入、读取、判断、删除和forEach打印。独立完成并展示控制台。短流程覆盖常用API。小结与作业回扣：箭头函数解决this，但不能当对象方法；Map用来管键值。预告Module与Promise。整理笔记。收口并衔接下节异步与模块。课堂检测：①箭头函数的this在何时绑定？②对象方法为何不宜用箭头函数？③Map如何判断某个键是否存在？八、上机任务与评价练习任务要求合格标准常见问题上机1用箭头函数改写this丢失；验证对象方法不宜用箭头定时器能读到对象属性；反例输出异常可解释内外层都改成箭头、未保存工程上机2Map增删改查与forEach遍历size与遍历结果正确当成普通对象用点语法取值过程评价建议：出勤与操作规范20%；上机完成情况50%；课堂口述10%；作业与技能点口述20%。本项目以形成性评价为主，不单独安排纸笔测验。九、作业1.简述箭头函数的起因、应用场景和使用方法。2.简述Map的常用属性及方法。书面作业：列出至少两种不适合使用箭头函数的场景；下次课抽查。十、教学反思1.上机完成率：________%；主要卡点：______________________________2.目标达成情况：______________________________3.2课时一次课的容量是否合适，下轮拟调整：________________________________4.其他：_________________