第4章+JavaScript基于对象编程

第4章JavaScript基于对象编程JavaScript脚本是基于对象（Object-based）的编程语言，通过对象的组织层次来访问并给对象施以相应的操作方法，可大大简化JavaScript程序的设计，并提供直观、模块化的方式进行脚本程序开发。本章主要介绍JavaScript的基于对象编程、DOM的模型层次以及有关对象的基本概念等，并引导读者创建和使用自定义的对象。4.1面向对象编程与基于对象编程在软件编程术语中，存在两个类似的概念：面对对象编程（ObjectOrientedProgramming：OPP）和基于对象编程（Object-basedProgramming），它们在对象创建、对象组织层次、代码封装和复用等方面存在较大的差异。在了解它们之间差异之前，先来了解对象的概念。4.1.1什么是对象对象是客观世界存在的人、事和物体等实体。现实生活中存在很多的对象，比如猫、自行车等。不难发现它们有两个共同特征：都有状态和行为。比如猫有自己的状态（名字、颜色、饥饿与否等）和行为（爬树、抓老鼠等）。自行车也有自己的状态（档位、速度等）和行为（刹车、加速、减速、改变档位等）。若以自然人为例，构造一个对象，可以用图4.1来表示，其中Attribute表示对象状态，Method表示对象行为。图4.1以自然人构造的对象在软件世界也存在对象，可定义为相关变量和方法的软件集。主要由两部分组成：z一组包含各种类型数据的属性z允许对属性中的数据进行操作且有相关方法以HTML文档中的document作为一个对象，如图4.2所示。图4.2以HTML文档中的document构造的对象综上所述，凡是能够提取一定度量数据并能通过某种途径对度量数据实施操作的客观存在都可以构成一个对象，且用属性来描述对象的状态，使用方法和事件来处理对象的各种行为。z属性：用来描述对象的状态。通过定义属性值，可以改变对象的状态。如图4.1中，可以定义字符串HungryOrNot来表示该自然人肚子的状态，HungryOrNot成为自然人的某个属性；z方法：由于对象行为的复杂性，对象的某些行为可用通用的代码来处理，这些通用的代码称为方法。如图4.1中，可以定义方法Eat()来处理自然人肚子很饿的情况，Eat()成为自然人的某个方法；z事件：由于对象行为的复杂性，对象的某些行为不能使用通用的代码来处理，需要用户根据实际情况爱编写处理该行为的代码，该代码称为事件。在图4.1中，可以定义事件DrinkBeforeEat()来处理自然人肚子很饿同时嘴巴很渴需要先喝水后进食的情况。了解了什么是对象，下面来看看什么是面向对象编程。4.1.2面向对象编程面向对象编程（OPP）是一种计算机编程架构，其基本原则：计算机程序由单个能够起到子程序作用的单元或对象组合而成。具有三个昀基本的特点：重用性、灵活性和扩展性。这种方法将软件程序的每个元素构成对象，同时对象的类型、属性和描述对象的方法。为了实现整体操作，每个对象都能够接收信息、处理数据和向其它对象发送信息。面向对象编程主要包含有以下重要的概念：1．继承允许在现存的组件基础上创建子组件，典型地说就是用类来对组件进行分组，而且还可以定义新类（子类）为现存的类（父类）的扩展，子类继承了父类的全部属性、方法和事件而不必重新定义；同时通过扩展，子类可以获得专属自己的属性、方法和事件（不影响父类的属性、方法和事件等），这样就可以将所有类拓扑成树形或网状结构。以动物“虎”类为例，拓扑成的树状结构如图4.3所示。图4.3通过继承形成的树形结构其中灰色框内为“虎”科共有的属性和方法，在生成子类的同时被子类继承，白色长方形框内的为经子类扩展的而特有的属性和方法，同时子类对父类的扩展并不影响父类的任何属性、方法和事件。2．封装封装就是将对象的实现过程通过函数等方式封装起来，使用户只能通过对象提供的属性、方法和事件等接口去访问对象，而不需要知道对象的具体实现过程。封装允许对象运行的代码相对于调用者来说是完全独立的，调用者通过对象及相关接口参数来访问此接口。只要对象的接口不变，而只是对象的内部结构或实现方法发生了改变，程序的其他部分不用作任何处理。模拟吃饭的过程，例如有对象Tom及其属性HungryOrNot、ThirstyOrNot和方法DrinkWater(CupNumber)、Eat(GramNumber)，下面的类C代码演示何为代码的封装：If(Tom.HungryOrNot==YES){if(Tom.ThirstyOrNot==YES){Tom.DrinkWater(1);}Tom.Eat(1);}在操作对象的过程中，用户并不需要知道DrinkWater(CupNumber)、Eat(GramNumber)方法的具体实现过程，只需知道对象的接口，然后传递相应的参数即可操作对象，实现了对象的封装。3．多态多态指一种对象类型定义多种实现的方案，具体实现的方案由使用的环境来决定。这样就形成了可复用的代码和标准化的程序。广义上讲，多态指一段程序能够处理多种类型对象的能力。仍然模拟吃饭的过程，例如有对象Tom及其属性HungryOrNot、ThirstyOrNot和方法DrinkWater(CupNumber)、DrinkMilk(CupNumber)、Eat(GramNumber)、FinalEat(FoodType)，下面的类C代码演示何为多态性：::FinalEat(FoodType){if(Tom.ThirstyOrNot==YES){if(FoodType==Rice)Tom.DrinkWater(1);elseif(FoodType==Bread)Tom.DrinkMilk(1);elseexit(1);}Tom.Eat(1);}Tom根据调用Tom.FinalEat(FoodType)使用的参数FoodType是米饭还是面包等其它东西决定下一步的动作，实现了多态性。4.1.3基于对象编程定位JavaScript脚本为基于对象的脚本编程语言而不是面向对象的编程语言，是因为JavaScript以DOM和BOM中定义的对象模型及操作方法为基础，但又不具备面向对象编程语言所必具备的显著特征如分类、继承、封装、多态、重载等，只能通过嵌入其他面向对象编程语言如Java生成的Javaapplet组件等实现Web应用程序的功能。JavaScript支持DOM和BOM提供的对象模型，用于根据其对象模型层次结构来访问目标对象的属性并施加对象以相应的操作。在支持对象模型预定义对象的同时，JavaScript支持Web应用程序开发者定义全新的对象类型，并通过操作符new来生成该对象类型的实例。但不支持强制的数据类型，任何类型的对象都可以赋予任意类型的数值。注意：在JavaScript语言中，之所以任何类型的对象都可以赋予任意类型的数值，是因为JavaScript为弱类型的脚本语言，即变量在使用前不需作任何声明，在浏览器解释运行其代码时才检查目标变量的数据类型。下面简要介绍HTML文档的结构和文档对象模型（DOM）。4.2JavaScript对象的生成JavaScript是基于对象的编程语言，除循环和关系运算符等语言构造之外，其所有的特征几乎都是按照对象的处理方法进行的。JavaScript支持的对象主要包括：zJavaScript核心对象：包括同基本数据类型相关的对象（如String、Boolean、Number）、允许创建用户自定义和组合类型的对象（如Object、Array）和其他能简化JavaScript操作的对象（如Math、Date、RegExp、Function）。该部分内容将在第6章重点叙述。z浏览器对象：包括不属于JavaScript语言本身但被绝大多数浏览器所支持的对象，如控制浏览器窗口和用户交互界面的window对象、提供客户端浏览器配置信息的Navigator对象。该部分内容将在第7章重点叙述。z用户自定义对象：由Web应用程序开发者用于完成特定任务而创建的自定义对象，可自由设计对象的属性、方法和事件处理程序，编程灵活性较大。该部分内容将在本章后续小节叙述。z文本对象：由文本域构成的对象，在DOM中定义，同时赋予很多特定的处理方法，如insertData()、appendData()等。该部分内容将在第5章详细叙述。注意：ECMA-262标准只规定JavaScript语言基本构成，而W3CDOM规范只规定了文档对象模型的访问层次及如何在JavaScript脚本中实现，浏览器厂商只定义用户界面并扩展DOM层次，基于以上原因，上述对象分类方法可能导致重叠现象出现。本章主要初步叙述DOM框架，而把重点放在如何创建和使用用户自定义的对象上。首先来了解HTML文档的结构。4.2.1HTML文档结构在HTML文档中，其标记如body与/body、p与/p等都是成对出现的，称为标记对。文档内容通过这些成对出现的标记对嵌入到文档中，与JavaScript脚本等其他代码一起构成一个完整的HTML文档。观察如下的简单文档：//源程序4.1!DOCTYPEHTMLPUBLIC-//W3C//DTDHTML4.0//EN=content-typecontent=text/html;charset=gb2312titleFristPage!/title/headbodypDOM/p/body/html可绘制成图4.4所示的HTML元素层次结构图。图4.4实例的HTML元素层次结构图载入文档后，document元素相对于该文档而言是唯一的，访问该层次结构图中任何元素都以document为根元素进行访问。同时html标记元素是head标记元素和body标记元素的父元素，同时又是document元素的子元素。可见如果HTML文档中严格使用HTML成对标记，则其元素是相互嵌套的，并且通过相互之间在结构图中的层次结构关系可实现相互定位，为DOM框架提供了理论基础。注意：这里所说的document元素、html标记元素等，只是在单纯的HTML文档背景下定义的；在后面讲到的DOM框架中，元素又被称为对象；在浏览器载入该文档并根据DOM模型生成的节点树中，元素又被称为节点。其实它们代表同一事物，只是定义的背景不同而已。4.2.2DOM框架由HTML文档结构可知，文档中各个元素（标记元素、文本元素等）在HTML元素层次结构图中都被标记为具有一定“社会”关系的成员，并可通过这种关系来访问指定的成员，那我们是不是可以设定这种结构模型的某种标准，以便实现元素访问方法的一致性呢？DOM（文档结构模型）应运而生，其主要关注在浏览器解释HTML文档时如何设定各元素的这种“社会”关系及处理这种关系的方法。从实际应用的角度出发，HTML文档根据DOM中定义的框架模型在浏览器解释后生成对象访问层次，而JavaScript脚本经常要控制其中的某个对象。DOM基本框架如图4.5所示，其中灰色代表模型中的顶级对象，包括window对象及其下的frames、location、document、history、navigator、screen等对象：图4.5DOM框架结构示意图DOM中几个顶级对象及其作用如表4.1所示。表4.1DOM中的顶级对象及其作用对象名称作用window表示与当前浏览器窗口相关的昀顶级对象，包含当前窗口的昀小昀大化、尺寸大小等信息同时具有关闭、新建窗口等方法。frames[]表示Window页面中的框架数组对象，每个框架都包含一个window对象location以URL的形式载入当前窗口，并保存正在浏览的文档的位置及其构成，如协议、主机名、端口、路径、URL的查询字符串部分等document包含HTML文档中的HTML标记和构成文档内容的文本的对象，客户端浏览器中每个载入的HTML文