JavaScript语言与Ajax应用第03章 JavaScript面向对象编程.ppt

JavaScript语言与Ajax应用（第二版）,主编 董宁 陈丹中国水利水电出版社,第3章 JavaScript面向对象编程,3.1 JavaScript内置对象 3.2 字面量对象 3.3 自定义对象,2023年9月28日星期四,JavaScript语言与Ajax应用（第二版）,2,3.1 JavaScript内置对象,3.1.1 Number与Boolean对象 3.1.2 String对象与字符串操作 3.1.3 Array对象 3.1.4 Date对象 3.1.5 RegExp对象 3.1.6 Function对象 3.1.7 Object对象 3.1.8 Error对象,2023年9月28日星期四,JavaScript语言与Ajax应用（第二版）,3,3.1.1 Number与Boolean对象,1Number对象Number 对象对应于原始数值类型和提供数值常数的对象，可通过为 Number 对象的构造函数指定参数值的方式来创建一个 Number 对象的实例。创建 Number对象实例的语法如下：var numObj=new Number();var numObj=new Number(value);,2023年9月28日星期四,JavaScript语言与Ajax应用（第二版）,4,3.1.1 Number与Boolean对象,2023年9月28日星期四,JavaScript语言与Ajax应用（第二版）,5,表3-1 Number对象常用属性和方法,3.1.1 Number与Boolean对象,2Boolean 对象Boolean 对象是对应于原始逻辑数据类型的内置对象，它具有原始的 Boolean 值，只有true和 false两个状态，在 JavaScript脚本中，1 代表 true 状态，0 代表 false 状态。Boolean 对象的实例可通过使用 Boolean 对象的构造函数、new操作符或 Boolean()函数来创建：var boolObj=new Boolean();var boolObj=new Boolean(value);,2023年9月28日星期四,JavaScript语言与Ajax应用（第二版）,6,3.1.1 Number与Boolean对象,Boolean 对象为 JavaScript 脚本语言的封装对象，表示原始的逻辑状态 true 和 false，表3-2列出了其常用的属性和方法。,2023年9月28日星期四,JavaScript语言与Ajax应用（第二版）,7,表3-2 Boolean对象常用属性和方法,3.1.2 String对象与字符串操作,String 对象是和原始字符串数据类型相对应的 JavaScript 脚本内置对象，属于 JavaScript核心对象之一，主要提供诸多方法实现字符串检查、抽取子串、字符串连接、字符串分割等字符串相关操作。语法如下：var MyString=new String();var MyString=new String(string);,2023年9月28日星期四,JavaScript语言与Ajax应用（第二版）,8,3.1.2 String对象与字符串操作,在 JavaScript 脚本程序编写过程中，String 对象是最为常见的处理目标，用于存储较短的数据。JavaScript语言提供了丰富的属性和方法支持，方便 Web 应用程序开发者灵活地操纵 String 对象的实例。1获取目标字符串长度字符串的长度 length 作为 String 对象的唯一属性，且为只读属性，它返回目标字符串（包含字符串里面的空格）所包含的字符数。,2023年9月28日星期四,JavaScript语言与Ajax应用（第二版）,9,3.1.2 String对象与字符串操作,2使用String对象方法操作字符串使用 String对象的方法来操作目标对象并不操作对象本身，而只是返回包含操作结果的字符串。例如下面调用方法将字符串转换为大写：MyString.toUpperCase();要使用 String对象的 toUpperCase()方法改变字符串 MyString 的内容，必须将使用toUpperCase()方法操作字符串的结果返回给原字符串：MyString=MyString.toUpperCase();,2023年9月28日星期四,JavaScript语言与Ajax应用（第二版）,10,3.1.2 String对象与字符串操作,3连接两个字符串String 对象的 concat()方法能将作为参数传入的字符串加入到调用该方法的字符串的末尾并将结果返回给新的字符串，语法如下：newString=targetString.concat(anotherString);,2023年9月28日星期四,JavaScript语言与Ajax应用（第二版）,11,3.1.2 String对象与字符串操作,4返回指定位置的字符串String 对象提供几种方法用于获取指定位置的字符串。第一种方法slice()有如下两种参数形式：slice(num1,num2);slice(num);第二种方法substr()的两种参数形式如下：substr(num1,num2);substr(num);第三种方法substring()的两种参数形式如下：substring(num1,num2);substring(num);,2023年9月28日星期四,JavaScript语言与Ajax应用（第二版）,12,3.1.3 Array对象,数组是包含基本和组合数据类型的有序序列，在 JavaScript 脚本语言中实际指 Array 对象。数组可用构造函数 Array()产生，主要有三种构造方法：var myArray=new Array();var myArray=new Array(4);var myArray=new Array(arg1,arg2,.,argN);,2023年9月28日星期四,JavaScript语言与Ajax应用（第二版）,13,3.1.3 Array对象,1创建数组并访问其特定位置元素JavaScript 脚本中，使用 new操作符来创建新数组，并可通过数组元素的下标实现对任意元素的访问。数组元素下标从 0 开始顺序递增，可通过数组元素的下标实现对它的访问，例如：var data=myArrayi;,2023年9月28日星期四,JavaScript语言与Ajax应用（第二版）,14,3.1.3 Array对象,2数组中元素的顺序问题Array对象提供相关相关方法实现数组中元素的顺序操作，如颠倒元素顺序、按Web应用程序开发者制定的规则进行排列等，主要有 Array对象的 reverse()和 sort()方法。reverse()方法将按照数组的索引号的顺序将数组中元素完全颠倒，语法如下：arrayName.reverse();sort()方法较之 reverse()方法复杂，它基于某种顺序重新排列数组的元素，语法如下：arrayName.sort();该调用方式不指定排列顺序，JavaScript 脚本将数组元素转化为字符串，然后按照字母顺序进行排序。,2023年9月28日星期四,JavaScript语言与Ajax应用（第二版）,15,3.1.3 Array对象,3修改length 属性更改数组Array对象的 length 属性保存目标数组的长度：var arrayLength=arrayName.length;Array对象的 length 属性检索的是数组末尾的下一个可及（未被填充）的位置的索引值，即使前面有些索引没被使用，length 属性也返回最后一个元素后面第一个可及位置的索引值。同时，当脚本动态添加、删除数组元素时，数组的 length属性会自动更新。,2023年9月28日星期四,JavaScript语言与Ajax应用（第二版）,16,3.1.3 Array对象,4连接数组Array 对象提供 concat()方法将以参数传入的数组连接到目标数组的后面，并将结果返回新数组，从而实现数组的连接。concat()方法的语法如下：var myNewArray=myArray.concat(arg1,arg2,argN);该方法将按照参数的顺序将它们添加到目标数组 myArray 的后面，并将最终的结果返回新数组 myNewArray。,2023年9月28日星期四,JavaScript语言与Ajax应用（第二版）,17,3.1.4 Date对象,JavaScript脚本内置了核心对象Date，该对象可以表示从毫秒到年的所有时间和日期，并提供了一系列操作时间和日期的方法。Date 对象的构造函数通过可选的参数，可生成表示过去、现在和将来的 Date 对象。其构造方式有四种，分别如下：var myDate=new Date();var myDate=new Date(milliseconds);var myDate=new Date(string);var myDate=new Date(year,month,day,hours,minutes,seconds,milliseconds);,2023年9月28日星期四,JavaScript语言与Ajax应用（第二版）,18,3.1.5 RegExp对象,RegExp 对象用于存储检索模式，它的作用是对字符串执行模式匹配。创建 RegExp 对象的语法如下：var myPattern=new RegExp(pattern,attributes);其中：参数 pattern 是一个字符串，指定了正则表达式的模式或其他正则表达式；参数 attributes 是一个可选的字符串，包含属性“g”、“i”和“m”；返回值返回一个新的 RegExp 对象，具有指定的模式和标志。,2023年9月28日星期四,JavaScript语言与Ajax应用（第二版）,19,3.1.6 Function对象,在 JavaScript 中声明一个函数本质上为创建 Function对象的一个实例，而函数名则为实例名。先看如下的函数：function sayHello(username)console.log(Hello+name);调用该函数，输入参数“Kitty”，输出结果为“Hello Kitty”。如果通过创建 Function对象的实例的方式来实现该功能，代码如下：var sayHello=new Function(name,console.log(Hello+name);,2023年9月28日星期四,JavaScript语言与Ajax应用（第二版）,20,3.1.7 Object对象,Object 对象的实例构造方法如下：var myObject=new Object(string);上述语句构造object对象的实例myObject，同时用以参数传入的string初始化对象实例，该实例能继承 object 对象提供的几个方法进行相关处理。参数 string 为要转为对象的数字、布尔值或字符串，此参数可选，若无此参数，则构建一个未定义属性的新对象。JavaScript 脚本支持另外一种构造 Object 对象实例的方法：var myObject=name1:value1,name2:value2,.,nameN:valueN;,2023年9月28日星期四,JavaScript语言与Ajax应用（第二版）,21,3.1.8 Error对象,Error 对象用来保存有关错误的信息。Error对象的实例构造方法如下：var newErrorObj=new Error();var newErrorObj=new Error(number);var newErrorObj=new Error(number,description);其中的参数number是与错误相联的数字值，如果省略则为零；参数description用于描述错误的简短字符串，如果省略则为空字符串。,2023年9月28日星期四,JavaScript语言与Ajax应用（第二版）,22,3.2 字面量对象,字面量对象提供了一种非常方便地创建新对象值的表示方法。使用如下语法创建字面量对象，并给对象添加属性和方法：var customerObject=customerProperty:value,customerMethod:function;,2023年9月28日星期四,JavaScript语言与Ajax应用（第二版）,23,3.2 字面量对象,一个字面量对象就是包含在一对花括号中的0个或多个“键:值”对，属性或方法声明之间用逗号隔开，键的名字在内部会被转换成字符串。字面量对象的局限是不能把它当作一个类来实例化新的对象。定义一个字面量对象仅仅是定义了一个对象。,2023年9月28日星期四,JavaScript语言与Ajax应用（第二版）,24,3.3 自定义对象,3.3.1 自定义对象实现方式 3.3.2 自定义对象实现方式选择与实例,2023年9月28日星期四,JavaScript语言与Ajax应用（第二版）,25,3.3.1 自定义对象实现方式,JavaScript 作为基于对象的编程语言，其对象实例采用构造函数来创建。每一个构造函数包括一个对象原型，定义了每个对象包含的属性和方法。对象是动态的，表明对象实例的属性和方法是可以动态添加、删除或修改的。JavaScript 脚本中创建自定义对象的方法主要有两种：通过定义对象的构造函数的方法和原型方式。,2023年9月28日星期四,JavaScript语言与Ajax应用（第二版）,26,3.3.1 自定义对象实现方式,1构造函数方式在构造函数方式中，用户必须先定义一个对象的构造函数，然后再通过 new 关键字来创建该对象的实例。定义对象的构造函数的方式如下面的示例：function Car(sColor,iDoors)this.color=sColor;this.doors=iDoors;this.showColor=function()console.log(Cars color is+this.color);,2023年9月28日星期四,JavaScript语言与Ajax应用（第二版）,27,3.3.1 自定义对象实现方式,2原型方式JavaScript 语言中所有对象都由 Object 对象派生，每个对象都有指定了其结构的原型（prototype）属性，该属性描述了该类型对象共有的代码和数据，可以通过对象的 prototype属性为对象动态添加属性和方法。重写前面的例子，代码如下所示：function Car()Car.prototype.color=red;Car.prototype.doors=4;Car.prototype.showColor=function()console.log(color:+this.color);,2023年9月28日星期四,JavaScript语言与Ajax应用（第二版）,28,3.3.2 自定义对象实现方式选择与实例,从前面两种自定义对象的实现方式上看，使用构造函数的方式会重复生成函数，为每个对象都创建独立的函数版本；而原型方式不能通过构造函数传递参数初始化属性的值来创建不同的对象，是否有种合理的创建对象的方法呢？答案是有，需要联合使用构造函数和原型方式。联合使用构造函数和原型方式，就可以像用其他程序设计语言一样创建对象。这种概念即用构造函数定义对象的所有属性，用原型方式定义对象的方法。这样，所有的函数都只创建一次，而每个对象都具有自己的对象属性实例。,2023年9月28日星期四,JavaScript语言与Ajax应用（第二版）,29,