第03章-JavaScript面向对象编程.ppt

单击此处编辑母版标题样式,编辑母版文本样式,第二级,第三级,第四级,第五级,*,JavaScript,语言与,Ajax,应用（第二版）,*,JavaScript,语言与,Ajax,应用（第二版,）,主编 董宁 陈,丹,中国水利水电,出版社,第,3,章,JavaScript,面向对象编程,3.1 JavaScript,内置对象,3.2,字面量对象,3.3,自定义对象,08 五月 2025,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,对象,08 五月 2025,JavaScript,语言与,Ajax,应用（第二版）,3,3.1.1 Number,与,Boolean,对象,1,Number,对象,Number,对象对应于原始数值类型和提供数值常数的对象，可通过为,Number,对象的构造函数指定参数值的方式来创建一个,Number,对象的实例。,创建,Number,对象实例的语法如下：,var numObj=new Number();,var numObj=new Number(value);,08 五月 2025,JavaScript,语言与,Ajax,应用（第二版）,4,3.1.1 Number,与,Boolean,对象,08 五月 2025,JavaScript,语言与,Ajax,应用（第二版）,5,表,3-1 Number,对象常用属性和方法,类型,项目及语法,简要说明,属性,MAX_VALUE,指定脚本支持的最大值,MIN_VALUE,指定脚本支持的最小值,NaN,为,Not a Number,的简写，表示一个不等于任何数的值,NEGTTIVE_INFINITY,表示负无穷大的特殊值，溢出时返回该值,POSITIVE_INFINITY,表示正无穷大的特殊值，溢出时返回该值,prototype,允许在,Number,对象中增加新的属性和方法,方法,toSource(),返回表示当前,Number,对象实例的字符串,toString(),得到当前,Number,对象实例的字符串表示,toFixed(num),返回四舍五入为指定小数位数的数字。小数点后有固定的,num,位数字。如果必要，该数字会被舍入，也可以用,0,补足，以便它达到指定的长度。,valueOf(),得到一个,Number,对象实例的原始值,3.1.1 Number,与,Boolean,对象,2,Boolean,对象,Boolean,对象是对应于原始逻辑数据类型的内置对象，它具有原始的,Boolean,值，只有,true,和,false,两个状态，在,JavaScript,脚本中，,1,代表,true,状态，,0,代表,false,状态。,Boolean,对象的实例可通过使用,Boolean,对象的构造函数、,new,操作符或,Boolean(),函数来创建：,var boolObj=new Boolean();,var boolObj=new Boolean(value);,08 五月 2025,JavaScript,语言与,Ajax,应用（第二版）,6,3.1.1 Number,与,Boolean,对象,Boolean,对象为,JavaScript,脚本语言的封装对象，表示原始的逻辑状态,true,和,false,，表,3-2,列出了其常用的属性和方法。,08 五月 2025,JavaScript,语言与,Ajax,应用（第二版）,7,表,3-2 Boolean,对象常用属性和方法,类型,项目及语法,简要说明,属性,prototype,允许在,Boolean,对象中增加新的属性和方法,方法,toSource(),返回表示当前,Boolean,对象实例创建代码的字符串,toString(),返回当前,Boolean,对象实例的字符串（,true,或,false,）,valueOf(),得到一个,Boolean,对象实例的原始,Boolean,值,3.1.2 String,对象与字符串操作,String,对象是和原始字符串数据类型相对应的,JavaScript,脚本内置对象，属于,JavaScript,核心对象之一，主要提供诸多方法实现字符串检查、抽取子串、字符串连接、字符串分割等字符串相关操作。,语法如下：,var MyString=new String();,var MyString=new String(string);,08 五月 2025,JavaScript,语言与,Ajax,应用（第二版）,8,3.1.2 String,对象与字符串操作,在,JavaScript,脚本程序编写过程中，,String,对象是最为常见的处理目标，用于存储较短的数据。,JavaScript,语言提供了丰富的属性和方法支持，方便,Web,应用程序开发者灵活地操纵,String,对象的实例。,1,获取目标字符串长度,字符串的长度,length,作为,String,对象的唯一属性，且为只读属性，它返回目标字符串（包含字符串里面的空格）所包含的字符数。,08 五月 2025,JavaScript,语言与,Ajax,应用（第二版）,9,3.1.2 String,对象与字符串操作,2,使用,String,对象方法操作字符串,使用,String,对象的方法来操作目标对象并不操作对象本身，而只是返回包含操作结果的字符串。,例如下面调用方法将字符串转换为大写：,MyString.toUpperCase();,要使用,String,对象的,toUpperCase(),方法改变字符串,MyString,的内容，必须将使用,toUpperCase(),方法操作字符串的结果返回给原字符串：,MyString=MyString.toUpperCase();,08 五月 2025,JavaScript,语言与,Ajax,应用（第二版）,10,3.1.2 String,对象与字符串操作,3,连接两个字符串,String,对象的,concat(),方法能将作为参数传入的字符串加入到调用该方法的字符串的末尾并将结果返回给新的字符串，语法如下：,newString=targetString.concat(anotherString);,08 五月 2025,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);,08 五月 2025,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);,08 五月 2025,JavaScript,语言与,Ajax,应用（第二版）,13,3.1.3 Array,对象,1,创建数组并访问其特定位置元素,JavaScript,脚本中，使用,new,操作符来创建新数组，并可通过数组元素的下标实现对任意元素的访问。,数组元素下标从,0,开始顺序递增，可通过数组元素的下标实现对它的访问，例如：,var data=myArrayi;,08 五月 2025,JavaScript,语言与,Ajax,应用（第二版）,14,3.1.3 Array,对象,2,数组中元素的顺序问题,Array,对象提供相关相关方法实现数组中元素的顺序操作，如颠倒元素顺序、按,Web,应用程序开发者制定的规则进行排列等，主要有,Array,对象的,reverse(),和,sort(),方法。,reverse(),方法将按照数组的索引号的顺序将数组中元素完全颠倒，语法如下：,arrayName.reverse();,sort(),方法较之,reverse(),方法复杂，它基于某种顺序重新排列数组的元素，语法如下：,arrayName.sort();,该调用方式不指定排列顺序，,JavaScript,脚本将数组元素转化为字符串，然后按照字母顺序进行排序。,08 五月 2025,JavaScript,语言与,Ajax,应用（第二版）,15,3.1.3 Array,对象,3,修改,length,属性更改数组,Array,对象的,length,属性保存目标数组的长度：,var arrayLength=arrayName.length;,Array,对象的,length,属性检索的是数组末尾的下一个可及（未被填充）的位置的索引值，即使前面有些索引没被使用，,length,属性也返回最后一个元素后面第一个可及位置的索引值。,同时，当脚本动态添加、删除数组元素时，数组的,length,属性会自动更新。,08 五月 2025,JavaScript,语言与,Ajax,应用（第二版）,16,3.1.3 Array,对象,4,连接数组,Array,对象提供,concat(),方法将以参数传入的数组连接到目标数组的后面，并将结果返回新数组，从而实现数组的连接。,concat(),方法的语法如下：,var myNewArray=myArray.concat(arg1,arg2,argN);,该方法将按照参数的顺序将它们添加到目标数组,myArray,的后面，并将最终的结果返回新数组,myNewArray,。,08 五月 2025,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);,08 五月 2025,JavaScript,语言与,Ajax,应用（第二版）,18,3.1.5 RegExp,对象,RegExp,对象用于存储检索模式，它的作用是对字符串执行模式匹配。,创建,RegExp,对象的语法如下：,var myPattern=new RegExp(pattern,attributes);,其中：,参数,pattern,是一个字符串，指定了正则表达式的模式或其他正则表达式；,参数,attributes,是一个可选的字符串，包含属性“,g”,、“,i”,和“,m”,；,返回值返回一个新的,RegExp,对象，具有指定的模式和标志。,08 五月 2025,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);,08 五月 2025,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;,08 五月 2025,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,用于描述错误的简短字符串，如果省略则为空字符串。,08 五月 2025,JavaScript,语言与,Ajax,应用（第二版）,22,3.2,字面量对象,字面量对象提供了一种非常方便地创建新对象值的表示方法。使用如下语法创建字面量对象，并给对象添加属性和方法：,var customerObject=,customerProperty:value,customerMethod:function,;,08 五月 2025,JavaScript,语言与,Ajax,应用（第二版）,23,3.2,字面量对象,一个字面量对象就是包含在一对花括号中的,0,个或多个“键,:,值”对，属性或方法声明之间用逗号隔开，键的名字在内部会被转换成字符串。,字面量对象的局限是不能把它当作一个类来实例化新的对象。,定义一个字面量对象仅仅是定义了一个对象。,08 五月 2025,JavaScript,语言与,Ajax,应用（第二版）,24,3.3,自定义对象,3.3.1,自定义对象实现方式,3.3.2,自定义对象实现方式选择与实例,08 五月 2025,JavaScript,语言与,Ajax,应用（第二版）,25,3.3.1,自定义对象实现方式,JavaScript,作为基于对象的编程语言，其对象实例采用构造函数来创建。每一个构造函数包括一个对象原型，定义了每个对象包含的属性和方法。对象是动态的，表明对象实例的属性和方法是可以动态添加、删除或修改的。,JavaScript,脚本中创建自定义对象的方法主要有两种：通过定义对象的构造函数的方法和原型方式。,08 五月 2025,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);,08 五月 2025,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);,08 五月 2025,JavaScript,语言与,Ajax,应用（第二版）,28,3.3.2,自定义对象实现方式选择与实例,从前面两种自定义对象的实现方式上看，使用构造函数的方式会重复生成函数，为每个对象都创建独立的函数版本；而原型方式不能通过构造函数传递参数初始化属性的值来创建不同的对象，是否有种合理的创建对象的方法呢？答案是有，需要联合使用构造函数和原型方式。,联合使用构造函数和原型方式，就可以像用其他程序设计语言一样创建对象。这种概念即用构造函数定义对象的所有属性，用原型方式定义对象的方法。这样，所有的函数都只创建一次，而每个对象都具有自己的对象属性实例。,08 五月 2025,JavaScript,语言与,Ajax,应用（第二版）,29,