《第03章 JavaScript面向对象编程.ppt》由会员分享,可在线阅读,更多相关《第03章 JavaScript面向对象编程.ppt(28页珍藏版)》请在得力文库 - 分享文档赚钱的网站上搜索。
1、t3.1 JavaScript3.1 JavaScript内置对象内置对象 t3.2 3.2 字面量对象字面量对象 t3.3 3.3 自定义对象自定义对象 第3章 JavaScript面向对象编程2023/1/21JavaScript语言与Ajax应用3.1 JavaScript内置对象 t3.1.1 Number3.1.1 Number与与BooleanBoolean对象对象 t3.1.2 String3.1.2 String对象与字符串操作对象与字符串操作 t3.1.3 Array3.1.3 Array对象对象 t3.1.4 Date3.1.4 Date对象对象 t3.1.5 3.1.5
2、RegExpRegExp对象对象 t3.1.6 Function3.1.6 Function对象对象 t3.1.7 Object3.1.7 Object对象对象 t3.1.8 Error3.1.8 Error对象对象 2023/1/22JavaScript语言与Ajax应用3.1.1 Number3.1.1 Number与与BooleanBoolean对象对象t1 1NumberNumber对象对象lNumber Number 对象对应于原始数值类型和提供数对象对应于原始数值类型和提供数值常数的对象,可通过为值常数的对象,可通过为 Number Number 对象的对象的构造函数指定参数值的方
3、式来创建一个构造函数指定参数值的方式来创建一个 Number Number 对象的实例。对象的实例。l创建创建 NumberNumber对象实例的语法如下:对象实例的语法如下:varvar numObjnumObj=new Number();=new Number();varvar numObjnumObj=new =new Number(valueNumber(value););2023/1/23JavaScript语言与Ajax应用3.1.1 Number3.1.1 Number与与BooleanBoolean对象对象t表表3-1 Number对象常用属性和方法对象常用属性和方法类型类型项
4、目及语法项目及语法简要说明简要说明属性属性MAX_VALUE 指定脚本支持的最大值指定脚本支持的最大值MIN_VALUE 指定脚本支持的最小值指定脚本支持的最小值NaN 为为Not a Number的简写,表示一个不等于任何数的值的简写,表示一个不等于任何数的值NEGTTIVE_INFINITY 表示负无穷大的特殊值,溢出时返回该值表示负无穷大的特殊值,溢出时返回该值POSITIVE_INFINITY 表示正无穷大的特殊值,溢出时返回该值表示正无穷大的特殊值,溢出时返回该值prototype 允许在允许在Number对象中增加新的属性和方法对象中增加新的属性和方法方法方法toSource()返
5、回表示当前返回表示当前Number对象实例的字符串对象实例的字符串toString()得到当前得到当前Number对象实例的字符串表示对象实例的字符串表示toFixed(num)返回四舍五入为指定小数位数的数字。小数点后有固定的返回四舍五入为指定小数位数的数字。小数点后有固定的 num 位数字。如果必要,该数字会被舍入,也可以用位数字。如果必要,该数字会被舍入,也可以用 0 补足,补足,以便它达到指定的长度。以便它达到指定的长度。valueOf()得到一个得到一个Number对象实例的原始值对象实例的原始值2023/1/24JavaScript语言与Ajax应用3.1.1 Number3.1.
6、1 Number与与BooleanBoolean对象对象t2 2Boolean Boolean 对象对象lBoolean Boolean 对象是对应于原始逻辑数据类型的内置对象是对应于原始逻辑数据类型的内置对象,它具有原始的对象,它具有原始的 Boolean Boolean 值,只有值,只有truetrue和和 falsefalse两个状态,在两个状态,在 JavaScriptJavaScript脚本中,脚本中,1 1 代表代表 true true 状态,状态,0 0 代表代表 false false 状态。状态。lBoolean Boolean 对象的实例可通过使用对象的实例可通过使用 Bo
7、olean Boolean 对象的对象的构造函数、构造函数、newnew操作符或操作符或 Boolean()Boolean()函数来创建:函数来创建:varvar boolObjboolObj=new Boolean();=new Boolean();varvar boolObjboolObj=new =new Boolean(valueBoolean(value););2023/1/25JavaScript语言与Ajax应用3.1.1 Number3.1.1 Number与与BooleanBoolean对象对象tBoolean Boolean 对象为对象为 JavaScript JavaSc
8、ript 脚本语言的封装对象,表示原始脚本语言的封装对象,表示原始的逻辑状态的逻辑状态 true true 和和 falsefalse,表,表3-23-2列出了其常用的属性和方法。列出了其常用的属性和方法。t表表3-2 Boolean对象常用属性和方法对象常用属性和方法类型类型项目及语法项目及语法简要说明简要说明属性属性prototype 允许在允许在Boolean对象中增加新的属性和方法对象中增加新的属性和方法方法方法toSource()返回表示当前返回表示当前Boolean对象实例创建代码的字符串对象实例创建代码的字符串toString()返回当前返回当前Boolean对象实例的字符串(对
9、象实例的字符串(true或或false)valueOf()得到一个得到一个Boolean对象实例的原始对象实例的原始Boolean值值2023/1/26JavaScript语言与Ajax应用3.1.2 String3.1.2 String对象与字符串操作对象与字符串操作 tString String 对象是和原始字符串数据类型相对应的对象是和原始字符串数据类型相对应的 JavaScript JavaScript 脚本内置对象,属于脚本内置对象,属于 JavaScriptJavaScript核核心对象之一,主要提供诸多方法实现字符串检查、心对象之一,主要提供诸多方法实现字符串检查、抽取子串、字符
10、串连接、字符串分割等字符串相抽取子串、字符串连接、字符串分割等字符串相关操作。关操作。l语法如下:语法如下:varvar MyStringMyString=new String();=new String();varvar MyStringMyString=new=new String(stringString(string););2023/1/27JavaScript语言与Ajax应用3.1.2 String3.1.2 String对象与字符串操作对象与字符串操作 t在在 JavaScript JavaScript 脚本程序编写过程中,脚本程序编写过程中,String String 对象对象
11、是最为常见的处理目标,用于存储较短的数据。是最为常见的处理目标,用于存储较短的数据。JavaScriptJavaScript语言提供了丰富的属性和方法支持,方便语言提供了丰富的属性和方法支持,方便 Web Web 应用程序开发者灵活地操纵应用程序开发者灵活地操纵 String String 对象的实例。对象的实例。t1 1获取目标字符串长度获取目标字符串长度l字符串的长度字符串的长度 length length 作为作为 String String 对象的唯一属性,且为对象的唯一属性,且为只读属性,它返回目标字符串(包含字符串里面的空格)所只读属性,它返回目标字符串(包含字符串里面的空格)所包
12、含的字符数。包含的字符数。2023/1/28JavaScript语言与Ajax应用3.1.2 String3.1.2 String对象与字符串操作对象与字符串操作 t2 2使用使用StringString对象方法操作字符串对象方法操作字符串l使用使用 StringString对象的方法来操作目标对象并不操作对象的方法来操作目标对象并不操作对象本身,而只是返回包含操作结果的字符串。对象本身,而只是返回包含操作结果的字符串。l例如下面调用方法将字符串转换为大写:例如下面调用方法将字符串转换为大写:MyString.toUpperCaseMyString.toUpperCase();();t要使用要
13、使用 StringString对象的对象的 toUpperCasetoUpperCase()()方法改变字符串方法改变字符串 MyStringMyString 的内容,必须将使用的内容,必须将使用toUpperCasetoUpperCase()()方法操方法操作字符串的结果返回给原字符串:作字符串的结果返回给原字符串:MyStringMyString=MyString.toUpperCaseMyString.toUpperCase();();2023/1/29JavaScript语言与Ajax应用3.1.2 String3.1.2 String对象与字符串操作对象与字符串操作 t3 3连接两个
14、字符串连接两个字符串lString String 对象的对象的 concatconcat()()方法能将作为参方法能将作为参数传入的字符串加入到调用该方法的字符数传入的字符串加入到调用该方法的字符串的末尾并将结果返回给新的字符串,语串的末尾并将结果返回给新的字符串,语法如下:法如下:newStringnewString=targetString.concat(anotherStringtargetString.concat(anotherString););2023/1/210JavaScript语言与Ajax应用3.1.2 String3.1.2 String对象与字符串操作对象与字符串操作
15、 t4 4返回指定位置的字符串返回指定位置的字符串String String 对象提供几种方法用于获取指定位置的字符串。对象提供几种方法用于获取指定位置的字符串。l第一种方法第一种方法slice()slice()有如下两种参数形式:有如下两种参数形式:slice(num1,num2);slice(num1,num2);slice(numslice(num););l第二种方法第二种方法substrsubstr()()的两种参数形式如下:的两种参数形式如下:substr(num1,num2);substr(num1,num2);substr(numsubstr(num););l第三种方法第三种方法
16、substring()substring()的两种参数形式如下:的两种参数形式如下:substring(num1,num2);substring(num1,num2);substring(numsubstring(num););2023/1/211JavaScript语言与Ajax应用3.1.3 Array3.1.3 Array对象对象 t数组是包含基本和组合数据类型的有序序列,数组是包含基本和组合数据类型的有序序列,在在 JavaScript JavaScript 脚本语言中实际指脚本语言中实际指 Array Array 对对象。数组可用构造函数象。数组可用构造函数 Array()Array
17、()产生,主要产生,主要有三种构造方法:有三种构造方法:varvar myArraymyArray=new Array();=new Array();varvar myArraymyArray=new Array(4);=new Array(4);varvar myArraymyArray=new Array(arg1,arg2,.,=new Array(arg1,arg2,.,argNargN););2023/1/212JavaScript语言与Ajax应用3.1.3 Array3.1.3 Array对象对象 t1 1创建数组并访问其特定位置元素创建数组并访问其特定位置元素lJavaScri
18、pt JavaScript 脚本中,使用脚本中,使用 newnew操作符来创操作符来创建新数组,并可通过数组元素的下标实现建新数组,并可通过数组元素的下标实现对任意元素的访问。对任意元素的访问。l数组元素下标从数组元素下标从 0 0 开始顺序递增,可通过开始顺序递增,可通过数组元素的下标实现对它的访问,例如:数组元素的下标实现对它的访问,例如:varvar data=data=myArrayimyArrayi;2023/1/213JavaScript语言与Ajax应用3.1.3 Array3.1.3 Array对象对象 t2 2数组中元素的顺序问题数组中元素的顺序问题lArrayArray对象
19、提供相关相关方法实现数组中元素的顺序操作,对象提供相关相关方法实现数组中元素的顺序操作,如颠倒元素顺序、按如颠倒元素顺序、按WebWeb应用程序开发者制定的规则进行排应用程序开发者制定的规则进行排列等,主要有列等,主要有 ArrayArray对象的对象的 reverse()reverse()和和 sort()sort()方法。方法。lreverse()reverse()方法将按照数组的索引号的顺序将数组中元素完方法将按照数组的索引号的顺序将数组中元素完全颠倒,语法如下:全颠倒,语法如下:arrayName.reversearrayName.reverse();();lsort()sort()方
20、法较之方法较之 reverse()reverse()方法复杂,它基于某种顺序重新方法复杂,它基于某种顺序重新排列数组的元素,语法如下:排列数组的元素,语法如下:arrayName.sortarrayName.sort();();t该调用方式不指定排列顺序,该调用方式不指定排列顺序,JavaScript JavaScript 脚本将数组元素转脚本将数组元素转化为字符串,然后按照字母顺序进行排序。化为字符串,然后按照字母顺序进行排序。2023/1/214JavaScript语言与Ajax应用3.1.3 Array3.1.3 Array对象对象 t3 3修改修改length length 属性更改数
21、组属性更改数组lArrayArray对象的对象的 length length 属性保存目标数组的长度:属性保存目标数组的长度:varvar arrayLengtharrayLength=arrayName.lengtharrayName.length;lArrayArray对象的对象的 length length 属性检索的是数组末尾的下属性检索的是数组末尾的下一个可及(未被填充)的位置的索引值,即使前一个可及(未被填充)的位置的索引值,即使前面有些索引没被使用,面有些索引没被使用,length length 属性也返回最后一属性也返回最后一个元素后面第一个可及位置的索引值。个元素后面第一个可
22、及位置的索引值。l同时,当脚本动态添加、删除数组元素时,数组同时,当脚本动态添加、删除数组元素时,数组的的 lengthlength属性会自动更新。属性会自动更新。2023/1/215JavaScript语言与Ajax应用3.1.3 Array3.1.3 Array对象对象 t4 4连接数组连接数组lArray Array 对象提供对象提供 concatconcat()()方法将以参数传入的数方法将以参数传入的数组连接到目标数组的后面,并将结果返回新数组,组连接到目标数组的后面,并将结果返回新数组,从而实现数组的连接。从而实现数组的连接。concatconcat()()方法的语法如下:方法的语
23、法如下:varvar myNewArraymyNewArray=myArray.concat(arg1,arg2,=myArray.concat(arg1,arg2,argNargN););l该方法将按照参数的顺序将它们添加到目标数组该方法将按照参数的顺序将它们添加到目标数组 myArraymyArray 的后面,并将最终的结果返回新数组的后面,并将最终的结果返回新数组 myNewArraymyNewArray。2023/1/216JavaScript语言与Ajax应用3.1.4 Date对象 tJavaScriptJavaScript脚本内置了核心对象脚本内置了核心对象DateDate,该对
24、象可以表示从毫秒,该对象可以表示从毫秒到年的所有时间和日期,并提供了一系列操作时间和日期的方到年的所有时间和日期,并提供了一系列操作时间和日期的方法。法。tDate Date 对象的构造函数通过可选的参数,可生成表示过去、现在对象的构造函数通过可选的参数,可生成表示过去、现在和将来的和将来的 Date Date 对象。其构造方式有四种,分别如下:对象。其构造方式有四种,分别如下:varvar myDatemyDate=new Date();=new Date();varvar myDatemyDate=new=new Date(millisecondsDate(milliseconds););
25、varvar myDatemyDate=new=new Date(stringDate(string););varvar myDatemyDate=new=new Date(year,month,day,hours,minutes,seconds,millisecondsDate(year,month,day,hours,minutes,seconds,milliseconds););2023/1/217JavaScript语言与Ajax应用3.1.5 RegExp对象 tRegExpRegExp 对象用于存储检索模式,它的作用是对象用于存储检索模式,它的作用是对字符串执行模式匹配。对字符串执
26、行模式匹配。l创建创建 RegExpRegExp 对象的语法如下:对象的语法如下:varvar myPatternmyPattern=new =new RegExp(patternRegExp(pattern,attributes);,attributes);l其中:其中:t参数参数 pattern pattern 是一个字符串,指定了正则表达式的是一个字符串,指定了正则表达式的模式或其他正则表达式;模式或其他正则表达式;t参数参数 attributes attributes 是一个可选的字符串,包含属性是一个可选的字符串,包含属性 “g”g”、“i”i”和和“m”m”;t返回值返回一个新的返
27、回值返回一个新的 RegExpRegExp 对象,具有指定的模式对象,具有指定的模式和标志。和标志。2023/1/218JavaScript语言与Ajax应用3.1.6 Function对象 t在在 JavaScript JavaScript 中声明一个函数本质上为创建中声明一个函数本质上为创建 FunctionFunction对象的对象的一个实例,而函数名则为实例名。先看如下的函数:一个实例,而函数名则为实例名。先看如下的函数:function function sayHello(usernamesayHello(username)console.logconsole.log(Hello+n
28、ame);(Hello+name);l调用该函数,输入参数调用该函数,输入参数“Kitty”Kitty”,输出结果为,输出结果为“Hello Kitty”Hello Kitty”。l如果通过创建如果通过创建 FunctionFunction对象的实例的方式来实现该功能,代码如对象的实例的方式来实现该功能,代码如下:下:varvar sayHellosayHello=new =new Function(nameFunction(name,console.logconsole.log(Hello (Hello+name);+name);2023/1/219JavaScript语言与Ajax应用3.
29、1.7 Object对象 tObject Object 对象的实例构造方法如下:对象的实例构造方法如下:varvar myObjectmyObject=new=new Object(stringObject(string););l上述语句构造上述语句构造objectobject对象的实例对象的实例myObjectmyObject,同时用以参数传入的,同时用以参数传入的stringstring初始化对象实例,该实例能继承初始化对象实例,该实例能继承 object object 对象提供的几个对象提供的几个方法进行相关处理。参数方法进行相关处理。参数 string string 为要转为对象的数字
30、、布尔值为要转为对象的数字、布尔值或字符串,此参数可选,若无此参数,则构建一个未定义属性的或字符串,此参数可选,若无此参数,则构建一个未定义属性的新对象。新对象。tJavaScript JavaScript 脚本支持另外一种构造脚本支持另外一种构造 Object Object 对象实例的方法:对象实例的方法:varvar myObjectmyObject=name1:value1,name2:value2,.,=name1:value1,name2:value2,.,nameN:valueNnameN:valueN;2023/1/220JavaScript语言与Ajax应用3.1.8 Erro
31、r对象 tError Error 对象用来保存有关错误的信息。对象用来保存有关错误的信息。ErrorError对象的对象的实例构造方法如下:实例构造方法如下:varvar newErrorObjnewErrorObj=new Error();=new Error();varvar newErrorObjnewErrorObj=new =new Error(numberError(number););varvar newErrorObjnewErrorObj=new =new Error(numberError(number,description);,description);l其中的参数其中
32、的参数numbernumber是与错误相联的数字值,如果省略则为零;是与错误相联的数字值,如果省略则为零;参数参数descriptiondescription用于描述错误的简短字符串,如果省略则用于描述错误的简短字符串,如果省略则为空字符串。为空字符串。2023/1/221JavaScript语言与Ajax应用3.2 字面量对象 t字面量对象提供了一种非常方便地创建新对字面量对象提供了一种非常方便地创建新对象值的表示方法。使用如下语法创建字面量象值的表示方法。使用如下语法创建字面量对象,并给对象添加属性和方法:对象,并给对象添加属性和方法:varvar customerObjectcustom
33、erObject=customerPropertycustomerProperty:value,:value,customerMethodcustomerMethod:function:function;2023/1/222JavaScript语言与Ajax应用3.2 字面量对象t一个字面量对象就是包含在一对花括号中的一个字面量对象就是包含在一对花括号中的0 0个或多个或多个个“键键:值值”对,属性或方法声明之间用逗号隔开,对,属性或方法声明之间用逗号隔开,键的名字在内部会被转换成字符串。键的名字在内部会被转换成字符串。t字面量对象的局限是不能把它当作一个类来实例化新字面量对象的局限是不能把它
34、当作一个类来实例化新的对象。的对象。t定义一个字面量对象仅仅是定义了一个对象。定义一个字面量对象仅仅是定义了一个对象。2023/1/223JavaScript语言与Ajax应用3.3 自定义对象 t3.3.1 3.3.1 自定义对象实现方式自定义对象实现方式 t3.3.2 3.3.2 自定义对象实现方式选择与实例自定义对象实现方式选择与实例 2023/1/224JavaScript语言与Ajax应用3.3.1 自定义对象实现方式 t JavaScript JavaScript 作为基于对象的编程语言,其对象实例作为基于对象的编程语言,其对象实例采用构造函数来创建。每一个构造函数包括一个对象采用
35、构造函数来创建。每一个构造函数包括一个对象原型,定义了每个对象包含的属性和方法。对象是动原型,定义了每个对象包含的属性和方法。对象是动态的,表明对象实例的属性和方法是可以动态添加、态的,表明对象实例的属性和方法是可以动态添加、删除或修改的。删除或修改的。tJavaScript JavaScript 脚本中创建自定义对象的方法主要有两脚本中创建自定义对象的方法主要有两种:通过定义对象的构造函数的方法和原型方式。种:通过定义对象的构造函数的方法和原型方式。2023/1/225JavaScript语言与Ajax应用3.3.1 自定义对象实现方式t1 1构造函数方式构造函数方式l在构造函数方式中,用户
36、必须先定义一个对象的构造函数,在构造函数方式中,用户必须先定义一个对象的构造函数,然后再通过然后再通过 new new 关键字来创建该对象的实例。关键字来创建该对象的实例。l定义对象的构造函数的方式如下面的示例:定义对象的构造函数的方式如下面的示例:function function Car(sColorCar(sColor,iDoorsiDoors)this.colorthis.color=sColorsColor;this.doorsthis.doors=iDoorsiDoors;this.showColorthis.showColor=function()=function()conso
37、le.log(Carsconsole.log(Cars color is+color is+this.colorthis.color););2023/1/226JavaScript语言与Ajax应用3.3.1 自定义对象实现方式t2 2原型方式原型方式lJavaScript JavaScript 语言中所有对象都由语言中所有对象都由 Object Object 对象派生,每个对象派生,每个对象都有指定了其结构的原型(对象都有指定了其结构的原型(prototypeprototype)属性,该属性)属性,该属性描述了该类型对象共有的代码和数据,可以通过对象的描述了该类型对象共有的代码和数据,可以通
38、过对象的 prototypeprototype属性为对象动态添加属性和方法。属性为对象动态添加属性和方法。l重写前面的例子,代码如下所示:重写前面的例子,代码如下所示:function Car()function Car()Car.prototype.colorCar.prototype.color=red;=red;Car.prototype.doorsCar.prototype.doors=4;=4;Car.prototype.showColorCar.prototype.showColor=function()=function()console.log(colorconsole.log
39、(color:+:+this.colorthis.color););2023/1/227JavaScript语言与Ajax应用3.3.2 自定义对象实现方式选择与实例 t从前面两种自定义对象的实现方式上看,使用构造函数的方式从前面两种自定义对象的实现方式上看,使用构造函数的方式会重复生成函数,为每个对象都创建独立的函数版本;而原型会重复生成函数,为每个对象都创建独立的函数版本;而原型方式不能通过构造函数传递参数初始化属性的值来创建不同的方式不能通过构造函数传递参数初始化属性的值来创建不同的对象,是否有种合理的创建对象的方法呢?答案是有,需要联对象,是否有种合理的创建对象的方法呢?答案是有,需要联合使用构造函数和原型方式。合使用构造函数和原型方式。t联合使用构造函数和原型方式,就可以像用其他程序设计语言联合使用构造函数和原型方式,就可以像用其他程序设计语言一样创建对象。这种概念即用构造函数定义对象的所有属性,一样创建对象。这种概念即用构造函数定义对象的所有属性,用原型方式定义对象的方法。这样,所有的函数都只创建一次,用原型方式定义对象的方法。这样,所有的函数都只创建一次,而每个对象都具有自己的对象属性实例。而每个对象都具有自己的对象属性实例。2023/1/228JavaScript语言与Ajax应用
限制150内