《JavaScript程序设计》课件第5章.ppt

1、第5章JavaScript对象,JavaScript是一种基于对象的程序设计语言，使用该语言可以以直观、模块化和可复用的方式进行程序开发。本章将对JavaScript对象的基本概念和基础知识进行介绍。,在JavaScript中，对象是一种数据类型。 JavaScript能够将变量和相关处理函数封装成 对象。原始数据类型保留的是单个的数值，如 单个数字、字符串或布尔值，而对象是一种复 合数据类型，可以将多个数据值集中在一个单 元中，并允许使用名称来存取这些值。,第5章JavaScript对象,5.1 JavaScript对象简介,5.1.1对象的定义 简单地说，对象是一个数据和处理数据的函数的综

2、合 体。例如，“人”是一个对象，既包含身高、体重等特 征，又包含吃饭、睡觉等动作。在程序中使用对象时，不用考 虑对象内部的处理方式，而是将其视为一个黑盒子，只需要知 道对象提供哪些属性（数据）和方法（处理数据的对象），以 及如何使用这些属性和方法。 对象是由运算符new创建的，在这个运算符之后必须有用于初 始化对象的构造函数名。例如，可以使用以下方式创建一个空 对象（没有属性的对象）： var o=new Object();,第5章JavaScript对象,5.1 JavaScript对象简介,作为一个实体，对象包含以下两个要素： （1）用来描述对象特征的一组数据，即若干变量，通常称为属性。

3、（2）用来操作对象的若干动作，也就是若干函数，通常称为方法。 在JavaScript中，对象就是属性和方法的集合。方法是作为对象成 员的函数，表明对象所具有的行为；属性是作为对象成员的变量，表 明对象的状态。通过访问或设置对象的属性，调用对象的方法，就可 以对对象进行各种操作，从而获得需要的功能。 在程序设计中，可以使用JavaScript对象的属性访问对象保存的数 据，如使用String对象的length属性，可以获取字符串的长度。访问对 象属性是通过对象名称和其属性名称来实现的，其语法格式如下： objNpertyName; 对象的名称.对象属性的名称 参看例5-1,第5章J

4、avaScript对象,5.1 JavaScript对象简介,JavaScript对象的方法主要是处理对象的动作，即一 些函数，如String对象的substr方法就是处理字符串的函 数。对象方法的调用是通过对象名称加上方法名称来 实现的，其语法格式如下： objName.methodName(); 对象的名称.对象属性的名称 JavaScript中的toString方法可以返回当前数值的字符 串值。如果初始值不是十进制数，默认将其转换为十 进制数或指定基数的值（二进制的基数为2，十六进制 的基数为16）。 参看例5-2,第5章JavaScript对象,5.1 JavaScript对象简介,5

5、.1.3面向对象的JavaScript 有些程序语言之所以称为面向对象语言（Object Oriented Language，OOL），主要是因为这个程序语言 支持以下3种特性： （1）封装 （2）继承 （3）多态,第5章JavaScript对象,5.1 JavaScript对象简介,5.1.4创建和删除对象 从JavaScript 1.2开始，可以用对象初始化程序创建对象。另外， 用户也可以首先创建一个构造函数，然后用new运算符来创建对 象。 1.对象初始化程序 在JavaScript中，可以用对象初始化程序来创建对象，其语法格 式如下： objectName=property1:valu

6、e1,property2:value2,propertyn:valuen； 其中，objectName是对象的名称，每个property是一个标识符 （可以是一个数字或字符串），value是赋予property属性的值。 需要注意的是，property和value均为可选项。,第5章JavaScript对象,5.1 JavaScript对象简介,5.1.4创建和删除对象 2.使用构造函数 在JavaScript中，可以使用构造函数来创建对象。假设需要创建 的对象的构造函数为car，它的属性有make、model和year，可以 按照以下方法来定义这个构造函数： Function car(mak

7、e,model,year) this.make=make; this.model=model; this.year=year; ,第5章JavaScript对象,5.1 JavaScript对象简介,5.1.4创建和删除对象 3.引用对象的属性和方法 在JavaScript中，数组也是一个对象。用户可以使用名称引 用数组对象的属性和方法，也可以使用数组下标来引用。 例如，下面两种对表单的引用方法是等价的（表单名称为 myForm）： 第一种引用方法： document.myForm; 第二种引用方法： document.forms1; document.formsmyForm;,第5章Java

8、Script对象,5.1 JavaScript对象简介,5.1.4创建和删除对象 4.扩展对象属性 使用JavaScript中的prototype对象，可以扩展对象的属性。 例如，下面的代码为car类的所有对象添加一个color属性， 并为car1的color属性赋值： totype.color=null; car1.color=black; 参看例5-3.,第5章JavaScript对象,5.1 JavaScript对象简介,5.1.4创建和删除对象 5.定义方法 可以像定义函数一样定义方法。例如： function displayCar() var result=A Beau

9、tiful+this.year+this.make+this.model; pretty_print(result); 下面是调用car类的对象的displayCar方法的语句： car1.displayCar(); car2.displayCar(); 另外,可以在构造函数中使用prototype对象新增方法。参看例5-4.,第5章JavaScript对象,5.1 JavaScript对象简介,5.1.4创建和删除对象 6.this关键字 JavaScript有一个特殊的关键字this，可以用它在一个方法中 引用当前对象。当用于form对象时，this关键字引用当前对 象的父系表单。 thi

10、s关键字一般只在用作对象成员方法的函数中出现， 代表某个成员方法执行时引用此方法的当前对象实例。 参看例5-5.,第5章JavaScript对象,5.1 JavaScript对象简介,5.1.4创建和删除对象 7.删除对象 在JavaScript中，可以用delete运算符来删除一个对象。如下 面的代码所示： myobj=new Number(); delete myobj; 删除对象,第5章JavaScript对象,5.1 JavaScript对象简介,与其他程序设计语言一样，JavaScript也有数组， JavaScript中的数组其实就是一种特殊的对象。下面介 绍JavaScript数

11、组的相关知识。,第5章JavaScript对象,5.2 JavaScript中的数组,5.2.1数组和数组元素 数组包含或者存储了具有编码的数据段，每个编码 对应的数据段都可以称为该数组的一个元素，每个元 素的编码称为下标。由于JavaScript是一种无类型语 言，所以数组的元素可以是任何数据类型，甚至可以 是其他数组。同一数组的不同元素可以具有不同的类 型，这样可以创建出更为复杂的数据结构。,第5章JavaScript对象,5.2 JavaScript中的数组,5.2.1数组和数组元素 1.创建数组 在JavaScript中，可以用Array构造函数和new运算符来创建数 组。调用Arra

12、y构造函数的方法有以下3种： （1）无参数的调用。用这种方法创建的是一个没有任何元素的 空数组，其语法格式如下： var a=new Array(); （2）允许用户明确指定数组的若干个元素的值。这种形式的构 造函数带有一个参数列表，每个参数都指定一个元素值，该元 素可以为任何数据类型。给数组赋值时，对应的数组元素的下 标是从0开始的。例如： var a=new Array(1,2,3,abc);,第5章JavaScript对象,5.2 JavaScript中的数组,5.2.1数组和数组元素 （3）给对象传递一个用于指定数组长度的数值类型 的参数。用此方法创建的数组指定了元素的个数，每 个元素

13、的值都未定义，其语法格式如下： var new Array(7);,第5章JavaScript对象,5.2 JavaScript中的数组,在JavaScript中，直接显示的数据值称为直接量。直接量可以 直接复制给变量。下面简单介绍JavaScript中的函数直接量、对 象直接量和数组直接量。 （1）对象直接量： 正常创建对象 var point=new object(); point.x=2.3; point.y=-1.3; 对象直接量写法 var point=x:2.3,y:-1.3;,第5章JavaScript对象,5.2 JavaScript中的数组,（2）函数直接量： 正常函数写法

14、function square(x) return x*x; 函数直接量写法，用变量调用 var square=function(x)return x*x; （3）数组直接量： 创建数组直接量，只需将一个用“，”分隔的值列表放入“ ” 中即可，代码如下： var pri=1,3,5,9; var pr=v,true,3,57; 数组直接量还可以包含对象直接量或其他数据直接量，如以下代码所示： var a=2,x:1,y:2,3,m:3,n:5;,第5章JavaScript对象,5.2 JavaScript中的数组,2.数组下标与数组元素 在JavaScript中，数组元素的下标从0开始，可以通

15、过使用“ ” 中的下标来存取数组元素。下面的写法都是合法的： value=a1; a2=3.1415; ai=4; ai+1=goodd; aai=a3; JavaScript中的数组可以具有任意个数的元素。对于空数组而 言，可以在任何时候改变该数组中的元素数量。要给一个数组 添加新的元素，只需对其赋值即可，例如： var a=new Array(); 没有定义数组的长度 a11=10;,第5章JavaScript对象,5.2 JavaScript中的数组,在JavaScript中，只有那些真正存储数据的数组元素才能分配到 内存。例如，在执行下面的代码时，JavaScript只会给数组下标 为

16、0和1000的元素分配内存，而不会给下标在01 000之间的999 个元素分配内存： a0=2; a1000=abcdefghijk; 说明：JavaScript支持二维数组的使用，即数组的元素也是数 组。例如，数组matrix的每个元素都是一个数值数组，数组元素 写成martrixxy即可。,第5章JavaScript对象,5.2 JavaScript中的数组,3.数组的length属性 不管是由Array构造函数创建的数组，还是由数组直接量创建 的数组，都有一个用来说明这个数组包含的元素个数的特殊属 性Length，其值总比数组的元素个数大1。与一般对象的length属 性不同，数组的le

17、ngth属性总是自动更新的，以便在给数组添加 新元素时能够保持与数组元素个数相符。 参看例5-6、例5-7、例5-8。,第5章JavaScript对象,5.2 JavaScript中的数组,4.删除数组元素 定义一个数组： var arr=a,b,c; 若要删除其中的“b”元素，有以下两种方法： 1）delete方法 使用“delete arr1”语句可以删除arr数组中的元素“b”，此时arr1 （即元素“b”）的值变为undefined。用这种方法删除数组元素时，只会 使删除的元素变成未定义的，数组索引不变，数组长度也不变。 2）splice方法 使用数组对象的splice方法删除arr数

18、组中的元素“b”的语句是： arr.splice(1,1);其中，第一个参数表示要删除的元素中起始元素的下 标，第二个参数表示要删除的元素的个数。用这种方法删除数组元素 时，数组索引改变，数组长度也改变。参看例5-9。,第5章JavaScript对象,5.2 JavaScript中的数组,5.2.2几种常用的数组对象的方法 在JavaScript中，可以通过调用数组对象的各种方法对数组进行 排序、删除及合并等操作。 下面对数组对象的常用方法进行简单介绍。 1.join方法 join方法将一个数组的所有元素转换为字符串，并把这些字符 串连接起来，可以任意指定一个字符来分隔结果字符串中的元 素，若

19、未指定分隔字符，默认使用英文的逗号来分隔。 参看例5-10,第5章JavaScript对象,5.2 JavaScript中的数组,2.reverse方法：是对已有数组中的数组元素进行重排，用来颠倒 数组元素的顺序。参看例5-11 3.sort方法：用来对数组元素进行排序，如果不带参数，输出结果将 按照字母顺序排列。如果要按照其他顺序排序，需要将一个比较函数 作为参数传递给sort方法。在使用sort方法时，不同浏览器的显示结果 会有所不同。参看例5-12 4.alice方法：返回的是指定数组的一个子数组。alice方法带有两个参 数，分别表示要返回的子数组的起止点，返回的子数组从第一个参数 对

20、应的字符处开始，至第二个参数对应的字符的前一个字符处结束。 如果只有一个参数，则返回的子数组包含从起始位置开始到原始数组 结束处的所有元素。如果第二个参数是负数，则表示从最后一个元素 开始向前查找。参看例5-13,第5章JavaScript对象,5.2 JavaScript中的数组,在JavaScript中，按照使用方式的不同可以将内部对象分为动 态对象和静态对象。在引用动态对象的属性和方法时，必须使 用new关键字来创建一个对象实例，然后才能使用“对象实例名. 成员”的方式访问其属性和方法；引用静态对象的属性和方法 时，不需要用new关键字创建对象实例，直接使用“对象名.成员” 的方式来访问

21、其属性和方法即可。 5.3.1Object对象 Object对象提供了所有JavaScript对象通用的功能，以及创建 自定义对象的简单方式。 参看例5-14,第5章JavaScript对象,5.3JavaScript内部对象,5.3.2String对象 String对象是动态对象，需要创建对象实例后才能引用其属性和方法。 可以把用单引号或双引号括起来的字符串作为字符串String）对象，并 通过直接在与其对应的变量后加上“.”来调用其属性和方法。 1.length属性 String对象中最常用的属性是length，用来表明字符串包含的 字符个数。 2.anchor方法 anchor方法可以将

22、字符串用HTML锚点显示。参看例5-15 3.big方法 使用big方法可以为字符串中的内容加上标签对。 参看例5-16,第5章JavaScript对象,5.3 JavaScript内部对象,4.将字符串转换为HTML代码的方法 在JavaScript中，可以使用以下几种方法将字符串转换为HTML代码： （1）bold方法：为字符串加上标签对。 （2）charAt方法：返回字符串对象中指定位置的字符。若指定位置超 出字符串长度，此方法返回一个空串。 （3）charCodeAt方法：返回字符串对象中指定位置处字符的Unicode 编码的整数值。 （4）fontcolor方法：为字符串对象加上标签

23、对，并设置 其color属性。其中，color可以是颜色的十六进制值，也可以是颜色的 预定义名称。 参看例5-17,第5章JavaScript对象,5.3 JavaScript内部对象,5.字符串搜索方法 indexOf方法返回某字符串在一个字符串对象中第一次出现的 位置。搜索按照从左到右的顺序进行，如果没有找到字符串， 则返回-1。lastIndexOf方法的作用和indexOf方法类似，只是搜索 顺序为从右到左。参看例5-18 6.link方法 使用link方法可以为字符串加上HTML超级链接。参看例5-19 7.正则表达式相关方法 1）match方法：使用正则表达式对字符串进行搜索，并返

24、回一个包含 搜索结果的数组。参看例5-20 2）replace方法：使用正则表达式对字符串进行搜索，并用指定的字符 串替换搜索到的内容。参看例5-21 3）search方法：返回使用正则表达式进行搜索时第一个匹配的字符串 在被搜索字符串中的位置（从0开始计数）。参看例5-22,第5章JavaScript对象,5.3 JavaScript内部对象,8.字符串匹配与转换方法 （1）slice方法：返回一个字符串中的两个指定位置之间的子字符串。 若未指定结束位置，或者结束位置用-1表示，则返回开始位置之后的 所有字符。 （2）substr方法：返回从指定位置开始，由指定个数的字符组成的字 符串。 （3）substring方法：返回从开始位置到结束位置前的所有字符组成的 字符串。 （4）toLowerCase方法：返回一个字符串，该字符串中的字母都转换 为小写形式。 （5）toUpperCase方法：返回一个字符串，该字符串中的字母都转换 为大写形式。 参看例5-23,第5章JavaScript对象,5.3 JavaScript内部对象,5.3.3Date对象 在JavaScript中，可以使用Date对象获取当前计