第20章 面向对象编程—JavaScript中的.ppt

1、第20章 面向对象编程JavaScript中的类与继承,上一章讲述了如何使用JavaScript向HTML元素对象中添加新的属性和方法。通过综合以前章节的知识点，实现一个支持拖动、缩放、最大化和最小化的模拟窗口特效。同时还讲述了如何书写可以兼容“Fire Fox”浏览器的代码。 本章将更加深入面向对象的编程概念，讲述如何在JavaScript脚本中应用面向对象方法的编程思想。,20.1 面向对象编程简介,随着计算机应用的发展，软件正变得越来越大型化。与之相对应的，程序设计与编写的思路也在逐渐的改变着。面向对象（“Object Oriented”，简写为“OO”）的概念自上个世纪90年代开始流行

2、，直至今天，已经成为程序员编写程序的指导思想。,20.1.1 传统编程方法的不足,最初人们使用的编程方法很简单：需要执行什么过程，就按照其逻辑编写相应代码就可以了。例如需要执行一个四则运算，那么就按照四则运算的法则，逐个对操作数进行操作。这种编程方式被称作过程型编程（PP）。 但是在代码量逐渐增大后，人们发现，常常需要重复编写同样的功能模块，为了减少不必要的工作量，函数（“function”）和子例程（“sub”）诞生了。人们将某些过程编写为一个固定的功能代码段，接受固定数量的参数或者不需要参数，执行指定的过程，可能返回计算的结果或无返回值。这样的编程方式被称作函数型编程（FP）。 在源代码长

3、度超过10000行的大型应用程序中，即使是函数型编程也逐渐变得很难应用。各种函数之间错综复杂的关系使得项目的逻辑变得很难理解。在修改了其中某个模块后，造成的冲突范围很难控制。,20.1.2 面向对象的基本概念,面向对象的编程（“Object Oriented Programing”，简写为“OOP”）方法可以克服上面提到的这些问题，这也是为什么这种思想这么收到程序员欢迎的原因。 首先需要读者理解的是，面向对象编程是一种程序设计的思想，是一种实现软件工程的工具，而不是程序编写的目的。也可以说，面向对象是程序员的一种“世界观”，程序员把需要解决的问题抽象成“方法”、“模块”还是“对象”，是“PP”

4、、“FP”和“OOP”的根本区别。,20.1.3 面向对象编程的特征,面向对象编程具有一些“PP”和“FP”所没有的特征： （1）对象唯一性。每个对象都有自身唯一的标识，通过这种标识，可找到相应的对象。在对象的整个生命期中，它的标识都不改变，不同的对象不能有相同的标识。 （2）分类性。分类性是指将具有一致的数据结构（属性）和行为（操作）的对象抽象成类。 （3）继承性。继承性是子类自动共享父类数据结构和方法的机制，这是类之间的一种关系。 （4）多态性（多形性）。多态性指相同的操作或函数、过程可作用于多种类型的对象上并获得不同的结果。,20.1.4 面向对象编程的要素,面向对象编程的要素有： （1

5、）抽象。抽象是指强调实体的本质、内在的属性。在系统开发中，抽象指的是在决定如何实现对象之前的对象的意义和行为。使用抽象可以尽可能避免过早考虑一些细节。 （2）封装性（信息隐藏）。封装性是保证软件部件具有优良的模块性的基础。 （3）共享性。面向对象技术在不同级别上促进了共享： （4）.强调对象结构而不是程序结构,20.2 JavaScript中的类,JavaScript是一种基于对象的语言，其与“面向对象”有着少许的不同。在真正的面向对象的语言中，例如“C+”或“Java”，有着用于定义“类”的关键字“Class”，也有着“Private”、“Public”等关键字定义属性和方法的私有与公有。在

6、JavaScript中，“类”的实现是直接通过函数实现的。,20.2.1 JavaScript中类的构造,前面说过，类是对具体对象的抽象。在JavaScript中，使用“function”来构造类。例如： function User()/用户类 ;/用户的姓名 this.sex;/用户的性别 函数“User”就定义了一个描述用户对象的类。然后可以用： hutia = new User();,20.2.2 JavaScript类的属性和方法,在JavaScript的类构造函数中，通过“this”关键字向类中添加属性和方法。例如前面给出的“User”类中，使用“var this.

7、name;”来声明一个属性。类中方法的添加与其类似，例如： function User()/用户类 ;/用户的姓名 this.login = function(password)/用户的登录方法 /类的方法 alert(“我在执行登录操作，密码是：”+password); ,20.2.3 JavaScript类的原型“prototype”,所有的JavaScript均具有属性“prototype”。此属性指向构建对象的原型。在使用关键字“new”和类的构造函数来构造新对象实例时，可以使用“prototype”来向类中添加新的属性和方法。也就是说代码.htm是一个使用“prot

8、otype”的例子。,20.3 JavaScript的封装与继承,面向对象编程中，比较重要的概念就封装、继承与多态。封装着眼于数据的访问控制，继承使得代码的重用性大大提高，多态能够让对象在运行时决定实际调用的方法体。由于JavaScript是一种动态语言，支持运行时绑定，讨论它的多态实际上并没有太大意义。下面将讲述JavaScript封装与继承。,20.3.1 JavaScript的封装,面向对象编程中，通过封装来隐藏类内部的实现细节。因此，类中的属性和方法等成员数据的访问权限分为三类：私有成员，仅允许类内部的其他成员访问；公共成员，允许任何域的函数对其进行访问、修改或删除；特权成员，可以访问

9、私有的变量和方法，同时其对公共域可见，可以被删除或替换，但不可修改。 （1）私有变量通过“var”关键字在类的构造函数内部声明，其语法如下： function myClass() var name = “hutia”;/类的私有变量 （2）公共函数和方法主要可以通过两种方式加入类中，一种是在类的构造函数中，通过关键字“this”来向其中添加公共成员，（3）类的特权方法可以访问其私有成员，构成了沟通外部和内部的桥梁。其方式类似于公共方法的声明，在类的构造函数内部声明即可： function myClass()/类的构造函数 var data = hutia;/定义类的私有属性 this.show

10、 = function()/定义特权方法 alert(data); obj1 = new myClass();/创建实例 obj1.show();/调用特权方法,20.3.2 JavaScript的继承,继承是面向对象语言中扩展已有类型的一种有效途径，JavaScript没有提供用于实现继承的“extends”关键字或者“:”操作符，但是，作为一种动态语言，可以在需要的时候，用“prototype”向类中添加属性和方法。也就是说，JavaScript和一般真正的面向对象语言不同的是，JavaScript只能通过原型来实现模拟的继承，例如： function myParentClass()/声明

11、一个父类 this.data = hutia;/声明一个公共属性 function mySubClass()/声明一个子类 this.showSubData = function()/定义一个公共方法 alert(公共属性data的值是：+this.data); mySubCtotype = new myParentClass();/使用原型来模拟继承 obj1 = new mySubClass();/创建一个子类的实例对象 obj1.showSubData();/调用子类的公共方法,20.3.3 获取函数对象的调用参数,已经反复提到的一个概念是，在JavaScript中，所有

12、的组成元素都是基于对象的。因此，“函数”这种在很多语言中仅仅是一种过程编程组织形式的元素，在JavaScript中也成为了一种对象。上一小节中，实现JavaScript继承的一种方法，就是通过调用“函数”对象的“apply”方法来实现的。 函数对象除了上面提到的“apply”和“call”方法外，还有着很多很有用的属性。 “arguments”属性，储存了函数被调用时提供的参数。其引用语法为： funcHandle.arguments “funcHandle”是某个函数的引用句柄。在“funcHandle”函数体中，引用此对象时，可以省略“funcHandle”部分。“arguments”属性

13、指向一个类似于数组的对象，具有“length”属性，来标志其组成元素的长度。因此可以通过循环来获得当前函数被调用时的所有函数。,20.3.4 获取函数对象的上级函数,函数对象具有另一个属性是“caller”。此属性指向调用此函数的上级函数对象。如果不是在函数中，而是在过程执行中调用的函数，则此属性返回“null”。例如： function main() sub_func();/调用子函数 function sub_func() alert(sub_func.caller);/返回对函数“main”的引用 ,20.4 构造一个菜单类,前面的讲述对于新手来说可能有些过于抽象，下面将演示一个具体的应

14、用例子，使用类封装和继承的方法来构造一个Web页面菜单效果。使用类的封装来实现Web页面特效，可以首先设计一个非常抽象的类，定义好其结构等，然后通过继承对其逐步扩展和完善。 代码20-6.htm是一个Web页面的菜单特效。 20-6.htm 构造菜单类 20-6 构造菜单类 * font-size:12px; font-family:宋体, Arial; /*规定了所有的字体样式*/ body overflow:auto; .item float:left; cursor:pointer; padding:1px 6px; width:100%; .item_mover background-

15、color:#D0E0F0; .menu_layer width:160px; border:1px outset buttonface; background-color:buttonface; ,20.5 小结,本章从程序设计的角度，讲解了JavaScript中，面向对象的实现方法。由于JavaScript是一种基于对象的语言，因此其面向对象的实现与传统的面向对象的语言稍有不同。在JavaScript中，没有用于实现类和继承机制的关键字，而是使用函数来实现类的构造和继承。本章讲解的知识点有： （1）面向对象编程基础。讲述了什么是面向对象，面向对象编程的优势和需要注意的要素。 （2）JavaScript中类的实现。讲述了如何使用函数作为类的构造器。 （3）“prototype”原型的作用。