第03章-JavaScript面向对象编程

JavaScript语言与Ajax应用（第二版）主编董宁陈丹中国水利水电出版社第3章

JavaScript面向对象编程3.1JavaScript内置对象

3.2字面量对象

3.3自定义对象

30九月2024JavaScript语言与Ajax应用（第二版）23.1JavaScript内置对象3.1.1Number与Boolean对象3.1.2String对象与字符串操作3.1.3Array对象3.1.4Date对象3.1.5RegExp对象3.1.6Function对象3.1.7Object对象3.1.8Error对象30九月2024JavaScript语言与Ajax应用（第二版）33.1.1Number与Boolean对象1．Number对象Number对象对应于原始数值类型和提供数值常数的对象，可通过为Number对象的构造函数指定参数值的方式来创建一个Number对象的实例。创建Number对象实例的语法如下：varnumObj=newNumber();varnumObj=newNumber(value);30九月2024JavaScript语言与Ajax应用（第二版）43.1.1Number与Boolean对象30九月2024JavaScript语言与Ajax应用（第二版）5表3-1Number对象常用属性和方法类型项目及语法简要说明属性MAX_VALUE指定脚本支持的最大值MIN_VALUE指定脚本支持的最小值NaN为NotaNumber的简写，表示一个不等于任何数的值NEGTTIVE_INFINITY表示负无穷大的特殊值，溢出时返回该值POSITIVE_INFINITY表示正无穷大的特殊值，溢出时返回该值prototype允许在Number对象中增加新的属性和方法方法toSource()返回表示当前Number对象实例的字符串toString()得到当前Number对象实例的字符串表示toFixed(num)返回四舍五入为指定小数位数的数字。小数点后有固定的

num位数字。如果必要，该数字会被舍入，也可以用

0补足，以便它达到指定的长度。valueOf()得到一个Number对象实例的原始值3.1.1Number与Boolean对象2．Boolean对象Boolean对象是对应于原始逻辑数据类型的内置对象，它具有原始的Boolean值，只有true和false两个状态，在JavaScript脚本中，1代表true状态，0代表false状态。Boolean对象的实例可通过使用Boolean对象的构造函数、new操作符或Boolean()函数来创建：varboolObj=newBoolean();varboolObj=newBoolean(value);30九月2024JavaScript语言与Ajax应用（第二版）63.1.1Number与Boolean对象Boolean对象为JavaScript脚本语言的封装对象，表示原始的逻辑状态true和false，表3-2列出了其常用的属性和方法。30九月2024JavaScript语言与Ajax应用（第二版）7表3-2Boolean对象常用属性和方法类型项目及语法简要说明属性prototype允许在Boolean对象中增加新的属性和方法方法toSource()返回表示当前Boolean对象实例创建代码的字符串toString()返回当前Boolean对象实例的字符串（"true"或"false"）valueOf()得到一个Boolean对象实例的原始Boolean值3.1.2String对象与字符串操作

String对象是和原始字符串数据类型相对应的JavaScript脚本内置对象，属于JavaScript核心对象之一，主要提供诸多方法实现字符串检查、抽取子串、字符串连接、字符串分割等字符串相关操作。语法如下：varMyString=newString();varMyString=newString(string);30九月2024JavaScript语言与Ajax应用（第二版）83.1.2String对象与字符串操作

在JavaScript脚本程序编写过程中，String对象是最为常见的处理目标，用于存储较短的数据。JavaScript语言提供了丰富的属性和方法支持，方便Web应用程序开发者灵活地操纵String对象的实例。1．获取目标字符串长度字符串的长度length作为String对象的唯一属性，且为只读属性，它返回目标字符串（包含字符串里面的空格）所包含的字符数。30九月2024JavaScript语言与Ajax应用（第二版）93.1.2String对象与字符串操作

2．使用String对象方法操作字符串使用String对象的方法来操作目标对象并不操作对象本身，而只是返回包含操作结果的字符串。例如下面调用方法将字符串转换为大写：MyString.toUpperCase();要使用String对象的toUpperCase()方法改变字符串MyString的内容，必须将使用toUpperCase()方法操作字符串的结果返回给原字符串：MyString=MyString.toUpperCase();30九月2024JavaScript语言与Ajax应用（第二版）103.1.2String对象与字符串操作

3．连接两个字符串String对象的concat()方法能将作为参数传入的字符串加入到调用该方法的字符串的末尾并将结果返回给新的字符串，语法如下：newString=targetString.concat(anotherString);

30九月2024JavaScript语言与Ajax应用（第二版）113.1.2String对象与字符串操作

4．返回指定位置的字符串String对象提供几种方法用于获取指定位置的字符串。第一种方法slice()有如下两种参数形式：slice(num1,num2);slice(num);第二种方法substr()的两种参数形式如下：substr(num1,num2);substr(num);第三种方法substring()的两种参数形式如下：substring(num1,num2);substring(num);30九月2024JavaScript语言与Ajax应用（第二版）123.1.3Array对象

数组是包含基本和组合数据类型的有序序列，在JavaScript脚本语言中实际指Array对象。数组可用构造函数Array()产生，主要有三种构造方法：varmyArray=newArray();varmyArray=newArray(4);varmyArray=newArray(arg1,arg2,...,argN);30九月2024JavaScript语言与Ajax应用（第二版）133.1.3Array对象

1．创建数组并访问其特定位置元素JavaScript脚本中，使用new操作符来创建新数组，并可通过数组元素的下标实现对任意元素的访问。数组元素下标从0开始顺序递增，可通过数组元素的下标实现对它的访问，例如：vardata=myArray[i];30九月2024JavaScript语言与Ajax应用（第二版）143.1.3Array对象

2．数组中元素的顺序问题Array对象提供相关相关方法实现数组中元素的顺序操作，如颠倒元素顺序、按Web应用程序开发者制定的规则进行排列等，主要有Array对象的reverse()和sort()方法。reverse()方法将按照数组的索引号的顺序将数组中元素完全颠倒，语法如下：arrayName.reverse();sort()方法较之reverse()方法复杂，它基于某种顺序重新排列数组的元素，语法如下：arrayName.sort();该调用方式不指定排列顺序，JavaScript脚本将数组元素转化为字符串，然后按照字母顺序进行排序。30九月2024JavaScript语言与Ajax应用（第二版）153.1.3Array对象

3．修改length属性更改数组Array对象的length属性保存目标数组的长度：vararrayLength=arrayName.length;Array对象的length属性检索的是数组末尾的下一个可及（未被填充）的位置的索引值，即使前面有些索引没被使用，length属性也返回最后一个元素后面第一个可及位置的索引值。同时，当脚本动态添加、删除数组元素时，数组的length属性会自动更新。30九月2024JavaScript语言与Ajax应用（第二版）163.1.3Array对象

4．连接数组Array对象提供concat()方法将以参数传入的数组连接到目标数组的后面，并将结果返回新数组，从而实现数组的连接。concat()方法的语法如下：varmyNewArray=myArray.concat(arg1,arg2,…,argN);该方法将按照参数的顺序将它们添加到目标数组myArray的后面，并将最终的结果返回新数组myNewArray。30九月2024JavaScript语言与Ajax应用（第二版）173.1.4Date对象JavaScript脚本内置了核心对象Date，该对象可以表示从毫秒到年的所有时间和日期，并提供了一系列操作时间和日期的方法。Date对象的构造函数通过可选的参数，可生成表示过去、现在和将来的Date对象。其构造方式有四种，分别如下：varmyDate=newDate();varmyDate=newDate(milliseconds);varmyDate=newDate(string);varmyDate=newDate(year,month,day,hours,minutes,seconds,milliseconds);30九月2024JavaScript语言与Ajax应用（第二版）183.1.5RegExp对象RegExp对象用于存储检索模式，它的作用是对字符串执行模式匹配。创建RegExp对象的语法如下：varmyPattern=newRegExp(pattern,attributes);其中：①参数pattern是一个字符串，指定了正则表达式的模式或其他正则表达式；②参数attributes是一个可选的字符串，包含属性“g”、“i”和“m”；③返回值返回一个新的RegExp对象，具有指定的模式和标志。30九月2024JavaScript语言与Ajax应用（第二版）193.1.6Function对象在JavaScript中声明一个函数本质上为创建Function对象的一个实例，而函数名则为实例名。先看如下的函数：functionsayHello(username){ console.log("Hello"+name);}调用该函数，输入参数“Kitty”，输出结果为“HelloKitty”。如果通过创建Function对象的实例的方式来实现该功能，代码如下：varsayHello=newFunction("name","console.log('Hello'+name)");30九月2024JavaScript语言与Ajax应用（第二版）203.1.7Object对象Object对象的实例构造方法如下：varmyObject=newObject(string);上述语句构造object对象的实例myObject，同时用以参数传入的string初始化对象实例，该实例能继承object对象提供的几个方法进行相关处理。参数string为要转为对象的数字、布尔值或字符串，此参数可选，若无此参数，则构建一个未定义属性的新对象。JavaScript脚本支持另外一种构造Object对象实例的方法：varmyObject={name1:value1,name2:value2,...,nameN:valueN};30九月2024JavaScript语言与Ajax应用（第二版）213.1.8Error对象Error对象用来保存有关错误的信息。Error对象的实例构造方法如下：varnewErrorObj=newError();varnewErrorObj=newError(number);varnewErrorObj=newError(number,description);其中的参数number是与错误相联的数字值，如果省略则为零；参数description用于描述错误的简短字符串，如果省略则为空字符串。30九月2024JavaScript语言与Ajax应用（第二版）223.2字面量对象字面量对象提供了一种非常方便地创建新对象值的表示方法。使用如下语法创建字面量对象，并给对象添加属性和方法：varcustomerObject={customerProperty:value,customerMethod:function};30九月2024JavaScript语言与Ajax应用（第二版）233.2字面量对象一个字面量对象就是包含在一对花括号中的0个或多个“键:值”对，属性或方法声明之间用逗号隔开，键的名字在内部会被转换成字符串。字面量对象的局限是不能把它当作一个类来实例化新的对象。定义一个字面量对象仅仅是定义了一个对象。30九月2024JavaScript语言与Ajax应用（第二版）243.3自定义对象3.3.1自定义对象实现方式3.3.2自定义对象实现方式选择与实例30九月2024JavaScript语言与Ajax应用（第二版）253.3.1自定义对象实现方式

JavaScript作为基于对象的编程语言，其对象实例采用构造函数来创建。每一个构造函数包括一个对象原型，定义了每个对象包含的属性和方法。对象是动态的，表明对象实例的属性和方法是可以动态添加、删除或修改的。JavaScript脚本中创建自定义对象的方法主要有两种：通过定义对象的构造函数的方法和原型方式。30九月2024JavaScript语言与Ajax应用（第二版）263.3.1自定义对象实现方式1．构造函数方式在构造函数方式中，用户必须先定义一个对象的构造函数，然后再通过new关键字来创建该对象的实例。定义对象的构造函数的方式如下面的示例：functionCar(sColor,iDoors){this.color=sCo