第 4 章 JavaScript 基于对象编程
JavaScript脚本是基于对象（Object-based）的编程语言，通过对象的组织层次来访问并
给对象施以相应的操作
方法
快递客服问题件处理详细方法山木方法pdf计算方法pdf华与华方法下载八字理论方法下载
，可大大简化 JavaScript程序的设计，并提供直观、模块化的方
式进行脚本程序开发。本章主要介绍 JavaScript 的基于对象编程、DOM 的模型层次以及有
关对象的基本概念等，并引导读者创建和使用自定义的对象。
4.1 面向对象编程与基于对象编程
在软件编程术语中，存在两个类似的概念：面对对象编程（Object Oriented Programming：
OPP）和基于对象编程（Object-based Programming），它们在对象创建、对象组织层次、代
码封装和复用等方面存在较大的差异。
在了解它们之间差异之前，先来了解对象的概念。
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．多态
多态指一种对象类型定义多种实现的
方案
气瓶 现场处置方案 .pdf气瓶 现场处置方案 .doc见习基地管理方案.doc关于群访事件的化解方案建筑工地扬尘治理专项方案下载
，具体实现的方案由使用的环境来决定。这样
就形成了可复用的代码和标准化的程序。广义上讲，多态指一段程序能够处理多种类型对象
的能力。仍然模拟吃饭的过程，例如有对象 Tom及其属性 HungryOrNot、ThirstyOrNot和方
法DrinkWater(CupNumber)、Drink Milk (CupNumber)、Eat(GramNumber)、FinalEat(FoodType)，
下面的类 C代码演示何为多态性：
::FinalEat(FoodType)
{
if(Tom.ThirstyOrNot==YES)
{
if(FoodType==Rice)
Tom.DrinkWater(1);
else if(FoodType==Bread)
Tom.DrinkMilk(1);
else
exit(1);
}
Tom.Eat(1);
}
Tom根据调用Tom.FinalEat(FoodType)使用的参数FoodType是米饭还是面包等其它东西
决定下一步的动作，实现了多态性。
4.1.3 基于对象编程
定位 JavaScript 脚本为基于对象的脚本编程语言而不是面向对象的编程语言，是因为
JavaScript以 DOM和 BOM中定义的对象模型及操作方法为基础，但又不具备面向对象编程
语言所必具备的显著特征如分类、继承、封装、多态、重载等，只能通过嵌入其他面向对象
编程语言如 Java生成的 Java applet组件等实现Web应用程序的功能。
JavaScript支持 DOM和 BOM提供的对象模型，用于根据其对象模型层次结构来访问目
标对象的属性并施加对象以相应的操作。
在支持对象模型预定义对象的同时，JavaScript支持Web应用程序开发者定义全新的对
象类型，并通过操作符 new 来生成该对象类型的实例。但不支持强制的数据类型，任何类
型的对象都可以赋予任意类型的数值。
注意：在 JavaScript语言中，之所以任何类型的对象都可以赋予任意类型的数值，是因为 JavaScript为弱
类型的脚本语言，即变量在使用前不需作任何声明，在浏览器解释运行其代码时才检查目标变量
的数据类型。
下面简要介绍 HTML文档的结构和文档对象模型（DOM）。
4.2 JavaScript 对象的生成
JavaScript 是基于对象的编程语言，除循环和关系运算符等语言构造之外，其所有的特
征几乎都是按照对象的处理方法进行的。JavaScript支持的对象主要包括：
z JavaScript 核心对象：包括同基本数据类型相关的对象（如 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语言基本构成，而W3C DOM规范只规定了文
档对象模型的访问层次及如何在 JavaScript脚本中实现，浏览器厂商只定义用户界面并扩展
DOM层次，基于以上原因，上述对象分类方法可能导致重叠现象出现。
本章主要初步叙述 DOM框架，而把重点放在如何创建和使用用户自定义的对象上。首
先来了解 HTML文档的结构。
4.2.1 HTML 文档结构
在 HTML 文档中，其标记如与、
与
等都是成对出现的，称为标
记对。文档内容通过这些成对出现的标记对嵌入到文档中，与 JavaScript脚本等其他代码一
起构成一个完整的 HTML文档。观察如下的简单文档：
//源程序 4.1
Frist Page!
DOM
可绘制成图 4.4所示的 HTML元素层次结构图。
图 4.4 实例的 HTML元素层次结构图
载入文档后，document 元素相对于该文档而言是唯一的，访问该层次结构图中任何元
素都以 document为根元素进行访问。同时标记元素是标记元素和标记
元素的父元素，同时又是 document元素的子元素。可见如果 HTML文档中严格使用 HTML
成对标记，则其元素是相互嵌套的，并且通过相互之间在结构图中的层次结构关系可实现相
互定位，为 DOM框架提供了理论基础。
注意：这里所说的 document 元素、标记元素等，只是在单纯的 HTML 文档背景下定义的；在后
面讲到的 DOM 框架中，元素又被称为对象；在浏览器载入该文档并根据 DOM 模型生成的节点
树中，元素又被称为节点。其实它们代表同一事物，只是定义的背景不同而已。
4.2.2 DOM 框架
由 HTML文档结构可知，文档中各个元素（标记元素、文本元素等）在 HTML元素层
次结构图中都被标记为具有一定“社会”关系的成员，并可通过这种关系来访问指定的成员，
那我们是不是可以设定这种结构模型的某种标准，以便实现元素访问方法的一致性呢？
DOM（文档结构模型）应运而生，其主要关注在浏览器解释 HTML文档时如何设定各
元素的这种“社会”关系及处理这种关系的方法。从实际应用的角度出发，HTML 文档根
据 DOM中定义的框架模型在浏览器解释后生成对象访问层次，而 JavaScript脚本经常要控
制其中的某个对象。DOM 基本框架如图 4.5 所示，其中灰色代表模型中的顶级对象，包括
window对象及其下的 frames、location、document、history、navigator、screen等对象：
图 4.5 DOM框架结构示意图
DOM中几个顶级对象及其作用如表 4.1所示。
表 4.1 DOM中的顶级对象及其作用
对象名称 作用
window 表示与当前浏览器窗口相关的最顶级对象，包含当前窗口的最小最大化、尺寸大小等信息
同时具有关闭、新建窗口等方法。
frames[] 表示Window页面中的框架数组对象，每个框架都包含一个window对象
location 以URL的形式载入当前窗口，并保存正在浏览的文档的位置及其构成，如
协议
离婚协议模板下载合伙人协议 下载渠道分销协议免费下载敬业协议下载授课协议下载
、主机名、
端口、路径、URL的查询字符串部分等
document 包含HTML文档中的HTML标记和构成文档内容的文本的对象，客户端浏览器中每个载入
的HTML文档都有一个document对象，在多框架文档中，框架集的每个成员都包含一个
document对象，按照对象包含的层次进行访问
history 包含当前窗口的历史列表对象，用于跟踪窗口中曾经使用过的URL，包括其历史表的长度、
历史表中上一个URL和下一个URL等信息。
navigator 包含当前浏览器的相关信息的对象，包括处理当前文档的客户端浏览器的版本号、商标等
只读信息，防止脚本对客户端浏览器相关信息的恶意访问和篡改。
screen 包含当前浏览器运行的物理环境信息的对象，包含如监视器的有效像数等信息。
对 DOM 框架层次及其相关顶级对象的了解有助于更好理解浏览器载入 HTML 文档时
JavaScript对象的生成过程。后面的“文档对象模型(DOM)”章节将详细讨论 DOM。
4.2.3 顶级对象之间的关系
我们来模拟浏览器载入某标准 HTML的过程来阐述 window、frames[]、location等几种
常见的顶级对象之间的关系。首先参考如下包含框架集的标准 HTML文档：
将上述代码保存为 Sample.html，鼠标双击，系统调用默认的浏览器，生成 window 对
象，打开 Sample.html文档后，生成 screen、navigator、location、history、frames[]和 document
等对象。
z window 对象包含当前浏览器窗口中的所有对象，为对象访问过程忠默认的顶级对
象，如引用该对象的 alert( )方法，可将 window.alert(msg)直接改写为 alert(msg)，
同样 window.document.forms[1]可改写为 document.forms[1]；
z screen对象包含当前浏览器运行的物理环境信息，如当前屏幕分辨率；
z navigator对象包含当前浏览器的相关信息，如浏览器版本等；
z location对象以 URL形式保存正在浏览的文档相关信息，如路径等；
z history对象包含浏览器当前窗口的访问历史列表，如单击链接进入新页面，则原始
页面地址列入当前窗口的访问历史列表中；
z frames[]对象包含当前 Window 页面中的框架数组成员，如实例中的两个框架，每
个框架都包含一个独立的 document对象；
z document对象包含 HTML文档中的 HTML标记和构成文档内容的文本的对象，在
每个单独保存的 HTML文档中都直接包含一个 document对象。
由上面的分析，可看出从浏览器打开文档至关闭文档期间，screen 和 navigator 对象不
变（用户不改变其硬件和软件设置），且与文档无关；location对象代表当前文档位置的相关
信息，与文档地址（相对地址或绝对位置）及访问方法相关；history对象则是当前文档页面
的访问列表，与文档中链接及页面跳转情况有关；frames[]和 document对象则是浏览器载入
时根据文档结构生成的对象，决定于文档。
理解这几个顶级对象的关系有助于深入了解浏览器解释运行 HTML 文档过程中各对象
的生成步骤和相互之间如何影响彼此。
4.2.4 浏览器载入文档时对象的生成
浏览器载入 HTML文档时，根据 DOM定义的结构模型层次，当遇到自身支持的 HTML
元素对象所对应的标记时，就按 HTML 文档载入的顺序在客户端内存中创建这些对象，并
按对象创建的顺序生成对象数组，而不管 JavaScript脚本是否真正运行这些对象。对象创建
后，浏览器为这些对象提供专供 JavaScript脚本使用的可选属性、方法和处理程序，Web应
用程序开发者通过这些属性、方法和处理程序就能动态操作 HTML文档内容。
下面的实例说明客户端浏览器载入 HTML 文档时将按载入时对象创建的顺序生成对象
数组：
//源程序 4.2
Sample Page!
Test!
Welcome to
DOM
World!
运行上面的程序，结果如图 4.6所示。
图 4.6 HTML文档载入时生成的对象数组顺序图
分析上述代码，浏览器载入该文档时生成对象的顺序应为、、
、
、<META>、<BODY>、<H5>、<!>、<P>、<EM>、<UL>、<LI>、< HR
>、<BR>及<SCRIPT>。图 4.6表明两点：
z 浏览器载入文档时，根据当前浏览器支持的 DOM 规范级别生成对应于 HTML 标
记的对象（object）；
z 浏览器根据其将各标记载入时的先后顺序生成对象数组的顺序。
对象生成后，浏览器将调用与对象相对应的属性、方法和事件供 JavaScript脚本根据用
户动作和页面动作进行相关处理。在本书的后续章节将详细讲解 HTML 通用元素对象，下
面简要介绍 JavaScript脚本中的核心对象。
4.3 JavaScript 核心对象
JavaScript作为一门基于对象的编程语言，以其简单、快捷的对象操作获得Web应用程
序开发者的首肯，而其内置的几个核心对象，则构成了 JavaScript脚本语言的基础。主要核
心对象如表 4.2所示。
表 4.2 JavaScript核心对象
核心对象 附加说明
Array 提供一个数组模型，用来存储大量有序的类型相同或相似的数据，将同类的数据组织在一起进
行相关操作。
Boolean 对应于原始逻辑数据类型，其所有属性和方法继承自Object对象。当值为真表示true，值为假
则表示false。
Date 提供了操作日期和时间的方法，可以表示从微秒到年的所有时间和日期。使用Date读取日期和
时间时，其结果依赖于客户端的时钟。
Function 提供构造新函数的模板，JavaScript中构造的函数是Function对象的一个实例，通过函数名实现
对该对象的引用。
Math 内置的Math对象可以用来处理各种数学运算，且定义了一些常用的数学常数，如Math对象的
实例的PI属性返回圆周率π的值。各种运算被定义为Math对象的内置方法，可直接调用。
Number 对应于原始数据类型的内置对象，对象的实例返回某数值类型。
Object 包含由所有 JavaScript 对象所共享的基本功能，并提供生成其它对象如Boolean等对象的模板
和基本操作方法。
RegExp 表述了一个正则表达式对象，包含了由所有正则表达式对象共享的静态属性，用于指定字符或
字符串的模式。
String 和原始的字符串类型相对应，包含多种方法实现字符串操作如字符串检查、抽取子串、连接两
个字符串甚至将字符串标记为HTML等。
JavaScript语言中，每种基本类型都构成了一个 JavaScript核心对象，并由 JavaScript提
供其属性和方法，Web应用程序开发者可以通过操作对象的方法来操作该基本类型的实例。
4.4 文档对象的引用
客户端浏览器载入 HTML文档时，对于所有可以编码的 HTML元素按照 DOM规范和
载入元素的顺序生成对象数组，然后进行初始化供 JavaScript脚本使用。下面讨论 JavaScript
脚本访问文档对象的方法。
4.4.1 通过对象位置访问文档对象
浏览器载入 HTML 文档后，将根据该文档的结构和 DOM 规范生成对象数组，该对象
数组中各对象之间的相对位置随着 HTML文档的确定而确定下来，JavaScript脚本可以通过
这个确定的相对位置来访问该对象。考察如下的 HTML文档：
//源程序 4.3
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
"http://www.w3.org/TR/REC-html140/strict.dtd">
<html>
<head>
<title>Sample Page!
程序运行结果如图 4.7所示。
图 4.7 通过位置访问文档对象
浏览器载入该文档时，生成 forms[]数组，第一个 form为 form[0]，第二个 form为 form[1]：
则通过它们的位置进行访问的方法如下：
document.forms[0]
document.forms[1]
而 form[1]下面还有两个文本框，可通过如下方式访问：
document.forms[1].elements[0]
document.forms[1].elements[1]
则访问第二个 form里面的第二个 text的 value属性可通过如下的方法：
document.forms[1].elements[1].value
此种方法简单明了，但对象的位置依赖于 HTML 文档的结构，如果文档结构改变而不
改变上述的访问代码，浏览器弹出“某某对象为空或无此对象”错误信息。
4.4.2 通过对象名称访问文档对象
上述通过位置访问文档对象的方法由于对象对文档结构的依赖性太大，一旦文档结构改
变，就必须改变对象访问的语句，这给脚本代码维护带来了很大的难度，可以通过给对象命
名的方法来解决。
1．通过 name属性访问文档对象
在 HTML 4版本之前，使用元素的 name属性来给 HTML文档中的元素进行标注，支持
name属性的标记有：
