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

《第20章面向对象编程—JavaScript中的.ppt》由会员分享，可在线阅读，更多相关《第20章面向对象编程—JavaScript中的.ppt（17页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

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

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

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

4、的根本区别。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”等关键字定义属性和方法的私有与公有。在JavaScript中，“类”的实现是直接通过函数

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

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

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

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

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

11、s.showSubData=function()/定义一个公共方法 alert(公共属性data的值是：+this.data);mySubClass.prototype=new myParentClass();/使用原型来模拟继承obj1=new mySubClass();/创建一个子类的实例对象obj1.showSubData();/调用子类的公共方法20.3.3 获取函数对象的调用参数已经反复提到的一个概念是，在JavaScript中，所有的组成元素都是基于对象的。因此，“函数”这种在很多语言中仅仅是一种过程编程组织形式的元素，在JavaScript中也成为了一种对象。上一小节中，实现Ja

12、vaScript继承的一种方法，就是通过调用“函数”对象的“apply”方法来实现的。函数对象除了上面提到的“apply”和“call”方法外，还有着很多很有用的属性。“arguments”属性，储存了函数被调用时提供的参数。其引用语法为：funcHandle.arguments“funcHandle”是某个函数的引用句柄。在“funcHandle”函数体中，引用此对象时，可以省略“funcHandle”部分。“arguments”属性指向一个类似于数组的对象，具有“length”属性，来标志其组成元素的长度。因此可以通过循环来获得当前函数被调用时的所有函数。20.3.4 获取函数对象的上级函

13、数函数对象具有另一个属性是“caller”。此属性指向调用此函数的上级函数对象。如果不是在函数中，而是在过程执行中调用的函数，则此属性返回“null”。例如：function main()sub_func();/调用子函数function sub_func()alert(sub_func.caller);/返回对函数“main”的引用20.4 构造一个菜单类前面的讲述对于新手来说可能有些过于抽象，下面将演示一个具体的应用例子，使用类封装和继承的方法来构造一个Web页面菜单效果。使用类的封装来实现Web页面特效，可以首先设计一个非常抽象的类，定义好其结构等，然后通过继承对其逐步扩展和完善。代码2

14、0-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-color:#D0E0F0;.menu_layer width:160px;border:1px outset buttonface;background-color:buttonface;20.5 小结本

15、章从程序设计的角度，讲解了JavaScript中，面向对象的实现方法。由于JavaScript是一种基于对象的语言，因此其面向对象的实现与传统的面向对象的语言稍有不同。在JavaScript中，没有用于实现类和继承机制的关键字，而是使用函数来实现类的构造和继承。本章讲解的知识点有：（1）面向对象编程基础。讲述了什么是面向对象，面向对象编程的优势和需要注意的要素。（2）JavaScript中类的实现。讲述了如何使用函数作为类的构造器。（3）“prototype”原型的作用。讲述了如果使用“prototype”的特性，想用户自定义的类，乃至于系统内置对象中增加新的属性和方法。（4）JavaScript中类的封装。讲述了类成员不同级别之间的访问控制。（5）JavaScript中类的继承。讲述了基于“prototype”的原型继承和基于函数对象“apply”方法的继承。（6）JavaScript函数对象的“arguments”、“callee”和“caller”属性的应用。（7）以一个构建Web页面菜单特效的实现，演示类与继承的实际应用。