第5章 对象 教学设计

第3章面向对象（上）《JavaScript前端开发案例教程》教学设计课程名称：JavaScript前端开发案例教程授课年级：年级授课学期：学年第一学期教师姓名：年月日课题名称第5章对象计划学时8学时内容分析面向对象是软件开发领域中非常重要的一种编程思想，通过面向对象可以使程序的灵活性、健壮性、可重用性、可扩展性、可维护性得到提升，尤其在大型项目设计中可以发挥巨大的作用。面向对象思想是计算机编程技术发展到一定阶段后的产物，已经日趋成熟，并被广泛应用到数据库系统、交互式界面、应用平台、分布式系统、网络管理结构、人工智能等其他领域。本章将围绕JavaScript开发中的面向对象设计思想，以及对象相关的一些原理和应用进行详细讲解。教学目标及基本要求理解面向对象思想，能够说出面向对象与面向过程的区别掌握JavaScript常用内置对象的使用方法掌握自定义对象的定义和基本操作，理解构造函数的概念掌握封装、继承、多态的设计思想，理解原型链机制熟悉错误的处理，掌握如何在浏览器中调试JavaScript程序教学重点构造函数、String对象、Math对象、Date对象、原型、继承教学难点深拷贝与浅拷贝、构造函数、原型、继承、原型链教学方式教学采用教师课堂讲授为主概念性知识点：提出为什么，将抽象具体化，配合教学PPT、图例辅助讲解。功能性知识点：提需求，并上机演示如何应用，重点内容总结运行原理。综合实战操作：分析整体的设计思路和步骤，对具体操作进行上机演练。教学过程第一学时（面向对象概述、面向对象的特征、对象的定义、访问对象成员、对象成员遍历、深拷贝与浅拷贝）一、回顾上节课内容（1）对上节课布置的作业以及学生提出的问题进行答疑解惑。（2）回顾前面学过的内容，引出本节课主题。在第1章已经介绍过面向对象的基本概念，本章将对JavaScript面向对象进行更深入和细致地讲解。（3）明确学习方向。理解面向对象思想出现的原因。能够说出面向对象与面向过程的区别。掌握对象的定义语法。掌握对象成员的访问方法。掌握对象成员的遍历。理解对象的深拷贝与浅拷贝机制。二、知识讲解为什么学习面向对象当软件开发规模达到一定程度时，面向对象思想可以更好的解决问题。面向对象可以应用到许多领域，这里学习的重点是面向对象编程。区分面向过程与面向对象面向过程：注重具体步骤，凡事都靠自己完成。面向对象：注重具体对象，指挥对象去完成任务。注意：如果对象一开始不存在，那就需要手动创造一个对象，将面向过程的代码封装起来，形成对象。创造对象的意义：当第一次用到某个功能的时候，将代码封装成对象，下次再需要用到这个功能时，直接调用对象就能完成任务，不需要重复编写代码。面向对象的特征封装性：隐藏内部实现，对外开放接口。继承性：不改变另一个对象的前提下进行扩展。多态性：为不同的对象提供相同的接口（归一化设计），降低使用难度。对象的定义使用“{}”来定义一个对象。对象的成员以键值对的形式保存，多个成员用逗号分隔。对象的成员可以是属性或方法，相当于变量和函数。对象的字面量语法，还常用于数据交互，称为JSON数据格式。访问对象成员创建对象后，通过“.”来访问对象的成员。如果一个对象没有成员，可以手动赋值来添加成员。对象成员访问支持使用“[]”语法，相比“.”语法其命名可更加随意。通过例5-1演示如何在HTML页面中动态为对象增加成员。对象成员遍历回顾数组的遍历，利用for…in语法对数组进行遍历。使用for…in语法可以遍历对象，其代码与遍历数组类似。使用“obj[k]”语法来访问对象中的元素，可以用“obj[k]()”调用方法。判断对象成员是否存在使用“in”可以判断对象中是否存在某个成员。深拷贝与浅拷贝对于基本数据类型，在进行赋值时，执行的是拷贝（复制）操作。对于复合数据类型（如数组、对象），在进行赋值时，执行的是浅拷贝操作。通过代码演示浅拷贝的情况，分析为什么会出现这种情况。通过文件夹、快捷方式的例子，来比较对象与普通数据的区别。分析为什么会出现浅拷贝机制：节省内存开销。对象可以保存大量的数据，因此更加占用内存。当在程序中操作对象时，（如将对象放入函数参数中传递），如果直接创建副本，会多占用一份内存空间。在实际开发中，也会遇到完全复制一个对象的需求，即深拷贝，这就需要自己动手来实现深拷贝的效果。动手编写deepCopy()函数实现对象的深拷贝。三、知识巩固（1）回顾上课前的学习目标，对本节课知识点进行总结。（2）使用博学谷系统下发课后作业。第二学时（为什么使用构造函数，内置构造函数、自定义构造函数、私有成员、函数中的this指向）一、回顾上节课内容（1）对上节课布置的作业以及学生提出的问题进行答疑解惑。（2）回顾上节课内容，引出本节课主题。（3）明确学习方向。理解为什么使用构造函数。掌握如何使用JavaScript内置构造函数实例化对象。掌握如何自定义构造函数。理解私有成员的概念。理解在不同情况下函数中this的指向性。掌握如何根据实际需求更改this指向。二、知识讲解为什么使用构造函数介绍传统面向对象编程语言中的类与对象的概念。类的作用：创建对象的模板，用来创建一些具有相同特征的对象。通过类创建对象的过程，称为实例化，创建对来的对象称为类的实例。JavaScript一开始没有class关键字（ES6新增了该语法），若要以模板的方式实例化对象，可以将创建对象的过程封装成函数，通过函数创建对象。分析这种方式的缺点：无法区分对象的类型。引出：利用构造函数来创建对象。使用JavaScript内置的构造函数在学习自定义构造函数前，先来看一下内置构造函数如何使用。演示如何通过“new构造函数名()”来创建对象。通过constructor查看对象是由哪个构造函数创建的。字面量“{}”创建的对象，实际上是Object对象的实例。自定义构造函数通过代码演示如何自定义一个构造函数。总结自定义构造函数的注意事项。注意在构造函数中，this在成员方法内，和成员方法外的区别。ES6新增的class关键字为什么新增class关键字：该关键字是Java、PHP等编程语言中有的，而JavaScript一开始没有。为了方便Java、PHP等Web开发程序员更方便地使用JavaScript来进行面向对象编程，因此加入了该关键字的支持。注意class关键字本质上是一个语法糖，可以用构造函数语法替代。私有成员在一些使用class关键字的编程语言中，可以用public、private关键字设定对象成员的可访问性，即划分公有成员和私有成员。在JavaScript中没有这些关键字，其实现方法是，在构造函数中使用this添加的成员相当于公有成员，而直接用var定义的变量相当于私有成员。什么情况下使用公有成员，什么情况下使用私有成员：为了体现面向对象的封装性，隐藏程序内部实现细节，仅对外开放接口，防止内部成员被外界随意访问。在函数中使用return关键字在构造函数中可以用return关键字，在使用时与普通函数有一定区别。在构造函数中使用return关键字时，有两种情况，一种是返回复合类型数据，一种是返回基本类型数据，这两种方式对返回的处理有区别。通过代码对比演示两种情况的具体区别。函数中的this指向分析this指向，分3种情况：①使用“new构造函数”实例化对象时；②直接通过函数名调用函数时；③将函数作为对象方法调用时。通过代码演示不同情况下this指向的具体是哪个对象。更改this指向（演示apply()、call()方法的使用，并对比两个方法的区别）。补充讲解ES5新增的bind()方法。三、知识巩固（1）回顾上课前的学习目标，对本节课知识点进行总结。（2）使用博学谷系统下发课后作业。第三学时（String对象、Number对象、Math对象、Date对象）一、回顾上节课内容（1）对上节课布置的作业以及学生提出的问题进行答疑解惑。（2）回顾上节课内容，引出本节课主题。（3）明确学习方向。掌握String对象的使用。掌握Number对象的使用。掌握Math对象的使用。掌握Date对象的使用。二、知识讲解String对象演示String对象常用方法的使用。通过用户名验证的案例，将String对象应用到实际需求中。Number对象演示Number对象常用方法的使用。注意区分哪些属于静态成员，在使用时与普通成员的区别。Math对象注意Math对象不是一个构造函数，不需要实例化就能使用。演示Math对象常用方法的使用。讲解利用Math对象生成指定范围的随机数。Date对象讲解Date对象的作用。演示Date对象常用方法的使用。区分Date对象构造函数的参数形式，可以用字符串或数值来传参。注意月份的取值范围，以及使用0或负数的情况。演示如何获取相对时间。三、知识巩固（1）回顾上课前的学习目标，对本节课知识点进行总结。（2）使用博学谷系统下发课后作业。第四学时（案例：制作年历）一、回顾上节课内容（1）对上节课布置的作业以及学生提出的问题进行答疑解惑。（2）回顾上节课内容，引出本节课主题。（3）明确学习方向。掌握编程实现年历的制作，能够根据指定年份生成年历。熟练掌握Date对象的使用。二、知识讲解输入需要生成的年份通过输入框提示用户输入年份。编写calendar()函数生成指定年份的年历提供参数y表示指定的年份。返回生成的HTML结果。编写for循环遍历12个月份利用<table>进行页面布局，每个月份用一个<table>实现。利用CSS实现根据页面宽度进行排版，表格可以自动换到下一行。获取指定年份1月1日的星期值通过Date()实例化对象并调用getDay()方法来实现。获取每个月共有多少天通过Date()实例化对象并调用getDate()获得最大天数利用for循环从第1天遍历到最后1天。在循环中，控制星期值在0~6范围内变动。将每一天的数字拼接到表格中根据当前月份的第1天是星期几，来填充几个空白单元格。利用<td>单元格的colspan来实现填充空白单元格。遍历到星期六时，如果不是该月最后一天，则需要换行。如果到达该月最后一天，则闭合标签。测试程序通过浏览器访问，观察程序运行结果是否正确。三、知识巩固（1）回顾上课前的学习目标，对本节课知识点进行总结。（2）使用博学谷系统下发课后作业。第五学时（错误处理、错误对象、错误类型、代码调试）一、回顾上节课内容（1）对上节课布置的作业以及学生提出的问题进行答疑解惑。（2）回顾上节课内容，引出本节课主题。（3）明确学习方向。理解学习错误处理与代码调试的必要性。掌握JavaScript如何进行错误处理。了解错误对象的具体使用细节。了解常见的错误类型。能够区分语法错误与普通错误。掌握如何在Chrome浏览器中调试JavaScript。二、知识讲解为什么学习错误处理可以更好地解决程序中发生的错误。演示发生错误的情况如调用了不存在的方法、引用了不存在的变量。通过代码演示发生错误时的情况，并在控制台中查看错误信息。阅读错误信息，了解其具体含义。利用try…catch进行错误处理通过代码演示如何利用try…catch来进行错误处理。观察捕获并输出错误信息后的运行结果。注意try中如果有多行代码时，只要某一行出现错误，后面的代码将不执行。推荐try中的代码量尽量少，从而避免错误发生时造成的影响。补充：Java等语言中的异常处理，与这里讲的错误处理类似。错误对象的传递错误对象的作用：当发生错误时，用来获取错误的具体信息，如错误出现的位置、错误的类型，错误信息等。通过catch(e)来接收错误对象。注意当try中的代码调用了其他函数时，分析错误对象的传递机制。通过代码演示不同情况错误的传递情况，以及后面的代码是否会执行。手动抛出错误对象错误对象由JavaScript自动抛出。用户可以使用throw关键字可以手动抛出错误对象，用于处理一些自定义的错误。例如，输入的用户名格式不合法等。通过代码演示如何手动抛出错误对象，并获取错误信息。错误类型认识JavaScript中的7种标准错误类型。理解Error类型与其他几种类型的关系。注意语法错误无法进行错误处理。为什么学习代码调试可以方便地跟踪程序的运行流程。可以监听变量的值在运行过程中的改变。在控制台中执行JavaScript代码演示如何在控制台中执行JavaScript代码。讲解控制台的输出结果，默认情况下它会自动输出表达式的值。演示如何在控制台中查看对象的成员。单步调试讲解开发者工具中的Sources面板的基本组成。演示如何对JavaScript程序进行单步调试。讲解单步调试按钮的功能含义。调试工具简单介绍Sources面板提供的一些其他调试工具的作用。演示Watch查看器的使用，观察for循环中变量的变化过程。三、知识巩固（1）回顾上课前的学习目标，对本节课知识点进行总结。（2）使用博学谷系统下发课后作业。第六学时（原型、继承、静态成员、原型链）一、回顾上节课内容（1）对上节课布置的作业以及学生提出的问题进行答疑解惑。（2）回顾上节课内容，引出本节课主题。（3）明确学习方向。理解原型在JavaScript中的作用。掌握如何利用原型实现继承。掌握实现继承的多种方式。掌握静态成员的概念和使用。理解JavaScript中的原型链机制。二、知识讲解为什么使用原型对象之前产生联系，实现继承关系。通过代码演示什么场景下使用原型。原型对象的使用方法介绍prototype属性，该属性指向原型对象。通过代码演示原型对象的使用。利用原型对象实现继承回顾继承的概念。演示如何利用原型对象实现继承。替换原型对象实现继承通过代码演示如何替换原型对象。分析替换原型对象前后，创建的对象会继承哪个原型对象。利用Object.create()实现继承通过代码演示如何利用Object.create()实现继承。思考这种继承方式的原理。混入继承介绍混入继承的概念。通过代码演示如何实现简单的混入继承。编写extend()函数专门用来实现混入继承。利用混入继承，将实例化构造函数时传入的参数对象，自动转换成创建后的实例对象的成员。静态成员介绍静态成员的概念，回顾之前用过的哪些属于静态成员。通过代码演示如何为对象添加静态成员。比较静态成员与实例成员的区别。思考静态成员的应用场景。属性搜索原则通过代码演示对象成员属性的搜索原则。总结规律，对于访问属性时，如果对象不存在，会到原型对象中查找，一直向上查找。而对于添加或修改操作，都是在当前对象中进行的。原型链分析对象的构造函数。分析对象的原型对象。分析函数的构造函数分析原型对象的原型对象总结分析结果，画出原型链结构图。对比“__proto__”和“对象.totype”的区别补充instanceof运算符的使用以及注意事项。三、知识巩固（1）回顾上课前的学习目标，对本节课知识点进行总结。（2）使用博学谷系统下发课后作业。第七学时（动手实践：表单生成器）一、回顾上节课内