JavaScript 程序设计基础-对象

1、JavaScript程序设计基础第八章 对象教学课件培训讲师： 培训时间：知识架构对象1对象的基本概念2创建对象3对象的属性内置对象4回顾JavaScript的数据类型有哪些？如何来存储多个数据？window、document是什么？案例引入连续输入10个学生的姓名、学号、性别、出生日期，保存到数组中。并完成以下操作：以表格形式输出；点击添加按钮，可添加一个学生；每个学生后面有一个删除按钮，点击可删除该学生；【案例思考】每个学生信息都包含了姓名、学号、性别、出生日期，我们如何来描述和存储多个学生信息呢？上一章所学二维数组可以用来存储，但是通过索引来存和取都容易出错，那如何存储？这就需要我们利用

2、JavaScript中的复合数据类型对象来描述学生信息，再用一维数组来存储了。面向对象概述本节内容主要有：面向对象基本概念 面向对象基本特征一切都是对象5/38面向对象基本概念面向对象方法(Object-Oriented Method)是一种把面向对象的思想应用于软件开发过程中，指导开发活动的系统方法，简称OO(Object-Oriented)方法对象是由数据和容许的操作组成的封装体，与客观实体有直接对应关系，一个对象类定义了具有相似性质的一组对象面向对象就是基于对象概念，以对象为中心，以类和继承为构造机制，来认识、理解、刻画客观世界和设计、构建相应的软件系统6/38面向对象基本概念对象（ob

3、ject）可以指具体的事物也可以指抽象的事物，是要研究的任何事物。每个对象皆有自己的内部状态和运动规律，在面向对象概念中我们把对象的内部状态称为属性、运动规律成为方法。对象有以下特点：对象具有属性和行为。对象具有变化的状态。对象具有唯一性。一切皆为对象，真实世界中的所有事物都可以视为对象。7/38面向对象基本概念8/38对象属性方法 = Fiatcar.model = 500car.weight = 850kgcar.color = whitecar.start()car.drive()car.brake() car.stop()面向对象基本概念属性：属性是对象的特征数据，它

4、是对客观世界实休所具有的性质的抽象。对象都有自己特有的属性值。比如姓名、性别就可以作为员工的属性而出现。方法：方法就是对象所能执行的操作，也就是类中所定义的服务。方法描述了对象执行操作的算法，响应消息的方法。9/38面向对象的特征面向对象有3大基本特征：封装、继承、多态封装，就是指把内部的实现隐藏起来，然后只暴露必要的方法让外部调用继承，就是子类继承父类，拥有父类所定义的属性和行为多态，外部直接调用一个方法接口，然后具体实现的内容由实际处理的类来决定使用基类或者子类的方法10/38面向对象的特征JavaScript可以模拟实现继承和封装，但是无法模拟实现多态，所以我们说JavaScript是一

5、门基于对象的语言，而非是面向对象的语言11/38一切都是对象在 JavaScript中，几乎所有的事物都是对象JavaScript对值进行任意区分：原始值和对象。原始值包括布尔值，数字，字符串，null和undefined。JavaScript中的其他所有内容都被认为是一个对象，这意味着window，JSON，Math甚至函数和数组都是对象。12/38一切都是对象原始值和对象的比较：对象是引用类型，变量名中存储的是具体数据存放在内存中的地址。原始值，变量名中存储的具体数据。13/38var number1=10;var number2=10;alert(number1=number2);/输出

6、truevar obj1=;var obj2=;alert(obj1=obj2); /输出false一切都是对象对象属性是可变的，即它们可以被改变。可以添加，删除或更改对象的属性。原始值类型属性是不可变的，即它们不能被更改，只能读取。14/38一切都是对象在JavaScript中对象包括数组，函数，内置对象和用户定义的对象。但有趣的是，原始值也像对象一样！这就是为什么JavaScript中几乎所有东西都是对象！如下示例，当我们访问length属性时stringVariable，它将被转换为Object并length访问该属性。访问属性后，它将返回原始值string。15/38var strin

7、gVar=”hello”;console.log(stringVar.length); /返回5console.log(stringVar.substring(0,2); /返回he自定义对象本节内容主要有：对象的定义 访问对象成员遍历对象深拷贝和浅拷贝16/38定义对象对象是引用数据类型，引用数据类型就相当于一个模板！当我们想要用某个引用类型的时候，就需要用这个模版来生成一个对象来使用。产生对象的过程，称为对象的定义或创建。创建对象方式有：new 构造函数字面量17/38定义对象字面量，使用var 对象名=属性名:属性值,.或18/38var person = ; =

8、jiangshui;person.sayName = function() console.log();var person = name:”jiangshui”,sayName:function() console.log(); ;定义对象构造函数，用于创建对象的函数利用Object()创建对象19/38var person = new Object(); = jiangshui;person.sayName = function() console.log();定义对象利用自定义构造函数创建对象20/38funct

9、ion Techer(name,sex,age,say) =name; this.sex=sex; this.age=age; this.say=say;var say=function() alert(“我是教师”);var techer=new Teacher(“张三”,”男”,35,say);对象成员对象的属性和方法统称为对象的成员在JavaScript中，可以使用“ . ”和“ ”来访问对象的属性二者区别：“ . ”表示法一般作为静态对象使用时来存取属性。而“ ”表示法在动态存取属性（变量）时就非常有用。在JavaScript中，只能用“ . ”来访问对象的方法21/

10、38var object = name:xiaoming,age:29;var name1 = ;var name2 = objectname;对象成员案例1：判断一个字符串中出现次数最多的字符，统计这个次数。案例2：编写arraysSimilar函数，实现判断传入的两个数组是否相似22/38演示示例1：出现次数最多的字符演示示例2：相似数组遍历对象JavaScript使用for in语句来遍历对象的属性和方法。for in 语句循环遍历 JavaScript 对象，每循环一次，都会取得对象的一个属性或方法。语法：其中，valueName 是变量名，保存着属性或方法的名称

11、，每次循环，valueName 的值都会改变23/38for(valueName in ObjectName) / 代码遍历对象案例3：判断一个字符串中出现次数最多的字符，统计这个次数。案例4：编写arraysSimilar函数，实现判断传入的两个数组是否相似24/38演示示例3：for in遍历对象属性演示示例4：统计字符出现次数构造函数本节内容主要有：为什么需要构造函数 内置构造函数自定构造函数私有成员25/38为什么需要构造函数创建对象的方式包括两种：对象字面量和使用new表达式。对象字面量是一种灵活方便的书写方式。但每创建一个新的对象都需要写出完整的定义语句，不便于创建大量相同类型的对

12、象，不利于使用继承等高级特性。26/38为什么需要构造函数new表达式是配合构造函数使用。如：在使用new操作符来调用一个构造函数的时候，发生了什么呢？27/38function CO() this.p = “Im in constructed object”; this.alertP = function() alert(this.p); var o2 = newCO();为什么需要构造函数使用new操作符来调用一个构造函数的时候，发生了如下四件事：第一行，创建一个空对象obj。第二行，将这个空对象的_proto_成员指向了构造函数对象的prototype成员对象，这是最关键的一步，具体细节

13、将在下文描述。第三行，将构造函数的作用域赋给新对象，因此CO函数中的this指向新对象obj，然后再调用CO函数。于是我们就给obj对象赋值了一个成员变量p，这个成员变量的值是” Imin constructed object”。第四行，返回新对象obj28/38var obj =;obj._proto_ = CO.prototype;CO.call(obj);return obj;为什么需要构造函数同一个构造函数创建的所有对象都继承自一个相同的对象。new表达式不仅仅是对这四个步骤的简化，也是要实现继承的必经之路。29/38内置构造函数JavaScript中包含九个原生（或内置）对象构造函数

14、。1，Number()2，String()3，Boolean()4，Object()5，Array()6，Function()7，Date()8，RegExp()9，Error()30/38自定义构造函数JavaScript的构造函数并不是作为类的一个特定方法存在的。当任意一个普通函数用于创建一类对象时，它就被称作构造函数，或构造器。一个函数要作为一个真正意义上的构造函数，需要满足下列条件：1、 在函数内部对新对象（this）的属性进行设置，通常是添加属性和方法。2、 构造函数可以包含返回语句（不推荐），但返回值必须是this，或者其它非对象类型的值。31/38自定义构造函数示例：可以正确返回

15、一个对象对象o1的原型是函数C1内部定义的对象o的原型不便于创建大量相同类型的对象，不利于使用继承等高级特性32/38function C1() var o = p:hello world return o;var o1 = new C1();alert(o1.p); / hello world自定义构造函数示例：既可以用作构造函数来构造一个对象，也可以作为普通的函数来使用作普通函数时，它接收两个参数，并返回两者的相加的结果不便于创建大量相同类型的对象，不利于使用继承等高级特性33/38function C2(a, b) this.p = a + b; this.alertP = functi

16、on() alert(this.p); return this.p;/此返回语句在C2作为构造函数时没有意义var c2 = new C2(2,3);c2.alertP(); /结果为5alert(C2(2, 3); /结果为5自定义构造函数建议：为了代码的可读性和可维护性，建议作为构造函数的函数不要掺杂除构造作用以外的代码；同样的，一般的功能函数也不要用作构造对象34/38私有成员1. 基于编码规范约定实现方式以下划线_开头的变量约定为私有成员，便于同团队开发人员的协同工作很容易被打破，且并没有实现私有属性，上述代码中的实例person可以直接访问到_name属性35/38function

17、Person(name) this._name = name;var person = new Person(Joe);私有成员2. 基于闭包的实现方式以下划线_开头的变量约定为私有成员，便于同团队开发人员的协同工作很容易被打破，且并没有实现私有属性，上述代码中的实例person可以直接访问到_name属性36/38function Person(name) var _name = name; this.getName = function() return _name; var person = new Person(Joe);私有成员3. 基于强引用散列表的实现方式37/38var Per

18、son = (function() var privateData = , privateId = 0; function Person(name) Object.defineProperty(this, _id, value: privateId+ ); privateDatathis._id = name: name ; Ptotype.getName = function() return privateDatathis._; ; return Person;();私有成员3. 基于强引用散列表的实现方式使用自执行函数创建Person类，变量private

19、Data和privateId被所有实例共享privateData用来储存每个实例的私有属性name的key-value，privateId用来分配每个实例的唯一标识符_id方法getName存在于prototype上，被所有实例共享散列表privateData对每个实例都是强引用，导致实例不能被垃圾回收处理38/38私有成员4. 基于ES6的WeakMap的实现方式39/38var Person = (function() var privateData = new WeakMap(); function Person(name) privateData.set(this, name: nam

20、e ); Ptotype.getName = function() return privateData.get(this).name; ; return Person;();私有成员4. 基于ES6的WeakMap的实现方式支持使用对象类型作为key值弱引用不必为每个实例都创建一个唯一标识符，因为实例本身便可以作为WeakMap的key如果没有其他引用和该键引用同一个对象,这个对象将会被当作垃圾回收掉目前浏览器对WeakMap的支持率并不理想，投入生产环境仍然需要等待40/38this在使用中出错的机率也非常大它不是固定不变的，而是随着它的执行环境的改变而改变this总是指

21、向调用它所在方法的对象，即谁调用就是谁41/38this1. 全局的函数调用this为window42/38 var name = global this; function globalTest() console.log(); globalTest(); /global thisthis2. 对象方法的调用this为obj43/38 function showName() console.log(); var obj = ; = ooo; obj.show = showName; obj.show(); /ooothis3. 构造函数的

22、调用this为obj44/38function showName() = showName function; var obj = new showName(); console.log(); /showName function内置对象本节内容主要有：String对象 Math对象Date对象Number对象RegExp对象45/38String对象String对象通过特有的属性和方法来操作或获取有关文本的信息String对象只有一个常用属性length，不能修改，只能读取，表示该字符串的长度46/38var str=”hello world”;alert

23、(str.toUpperCase();alert(str.length);String对象常用方法47/38语法功能String()构造函数，用来构建一个字符串对象charAt()返回指定索引位置的字符，索引从0开始。indexOf()返回指定字符串首次出现的索引位置。没有找到，则返回-1。第2个参数表示从该索引位置开始查询，可无。split()以指定字符串进行分隔，返回分隔后的字符串数组。第2个参数表示分隔的字符串个数，可无substring()截取字符串中的一部分。第一个参数代表截取的开始索引，第二个参数代表结束索引，不含该索引的字符，省略则到结尾。String对象常用方法48/38语法功

24、能substr()提取指定数目的字符。第一个参数代表截取的开始索引，第二个参数代表提取字符个数，省略则到结尾。第一个参数为负数，则从字符串结尾开始，例如，-1代表倒数第一个字符lastIndexOf()从后面开始搜索子串的位置toUpperCase()将字符串转换为大写并返回toLowerCase()将字符串转换为小写并返回trim()移除字符串开头和结尾处的空白字符并返回String对象常用方法49/38语法功能concat(value1,value2 . valueN)连接一个或多个字符串,并返回连接后的字符串 localeCompare(value)实例与参数进行比较，返回比较结果，返回

25、值：0 ：实例比参数大1 ：实例与参数相等 -1 ：实例比参数小replace(regexp, replaceStr)替换正则表达式匹配的子串，并返回替换后的字符串演示示例5：判断是否是回文内置对象MathMath 对象用于执行数学任务。Math 对象没有构造函数 Math()。常用属性名称说明E返回算术常量 e，即自然对数的底数（约等于2.718）。LN2返回 2 的自然对数（约等于0.693）。LN10返回 10 的自然对数（约等于2.302）。LOG2E返回以 2 为底的 e 的对数（约等于 1.4426950408889634）。LOG10E返回以 10 为底的 e 的对数（约等于0.

26、434）。PI返回圆周率（约等于3.14159）。SQRT1_2返回 2 的平方根的倒数（约等于 0.707）。SQRT2返回 2 的平方根（约等于 1.414）。内置对象Math常用方法名称说明abs(x)返回 x 的绝对值。acos(x)返回 x 的反余弦值。asin(x)返回 x 的反正弦值。atan(x)以介于 -PI/2 与 PI/2 弧度之间的数值来返回 x 的反正切值。atan2(y,x)返回从 x 轴到点 (x,y) 的角度（介于 -PI/2 与 PI/2 弧度之间）。ceil(x)对数进行上舍入。cos(x)返回数的余弦。exp(x)返回 Ex 的指数。floor(x)对 x

27、 进行下舍入。log(x)返回数的自然对数（底为e）。内置对象Math常用方法名称说明max(x,y,z,.,n)返回 x,y,z,.,n 中的最高值。min(x,y,z,.,n)返回 x,y,z,.,n中的最低值。pow(x,y)返回 x 的 y 次幂。random()返回 0 1 之间的随机数。round(x)四舍五入。sin(x)返回数的正弦。sqrt(x)返回数的平方根。tan(x)返回角的正切。演示示例6：随机产生十六进制的颜色值内置对象Date常用方法名称说明getDate()从 Date 对象返回一个月中的某一天 (1 31)。getDay()从 Date 对象返回一周中的某一天

28、 (0 6)日-六getFullYear()从 Date 对象以四位数字返回年份。getHours()返回 Date 对象的小时 (0 23)。getMilliseconds()返回 Date 对象的毫秒(0 999)。getMinutes()返回 Date 对象的分钟 (0 59)。getMonth()从 Date 对象返回月份 (0 11)。getSeconds()返回 Date 对象的秒数 (0 59)。toDateString()把 Date 对象的日期部分转换为字符串。toJSON()以 JSON 数据格式返回日期字符串。内置对象Date常用方法名称说明toLocaleDateStr

29、ing()根据本地时间格式，把 Date 对象的日期部分转换为字符串。toLocaleTimeString()根据本地时间格式，把 Date 对象的时间部分转换为字符串。toLocaleString()据本地时间格式，把 Date 对象转换为字符串。 setDate()设置 Date 对象中月的某一天 (1 31)。setFullYear()设置 Date 对象中的年份（四位数字）。setHours()设置 Date 对象中的小时 (0 23)。setMilliseconds()设置 Date 对象中的毫秒 (0 999)。setMinutes()设置 Date 对象中的分钟 (0 59)。s

30、etMonth()设置 Date 对象中月份 (0 11)。setSeconds()设置 Date 对象中的秒钟 (0 59)。内置对象Date常用方法名称说明getTime()当前时间对象距1970年的毫秒数now()静态方法，当前时间的毫秒数parse()静态方法，字符串转换成Date对象演示示例7：某年某月的哪些天是周六和周日内置对象Number原始数值的包装对象常用属性名称说明MAX_VALUE可表示的最大的数。MIN_VALUE可表示的最小的数。NaN非数字值。NEGATIVE_INFINITY负无穷大，溢出时返回该值。POSITIVE_INFINITY正无穷大，溢出时返回该值。内置

31、对象Number常用方法名称说明toString()把数字转换为字符串，按基数转换。toLocaleString()把数字转换为字符串，使用本地数字格式顺序。toFixed()把数字转换为字符串，结果的小数点后有指定位数的数字(四舍五入)。toExponential()把对象的值转换为指数计数法。toPrecision()把数字格式化为指定的长度(四舍五入，不含小数点)。valueOf()返回一个 Number 对象的基本数字值。内置对象RegExpRegExp 对象表示正则表达式，它是对字符串执行模式匹配的强大工具。语法：var patt=new RegExp(pattern,modifie

32、rs);或更简单的方法：var patt=/pattern/modifiers;表达式pattern，修饰符modifiers如：var re = new RegExp(w+);var re = /w+/;内置对象RegExpRegExp 修饰符：修饰符用于执行不区分大小写和全文的搜索。i- 修饰符是用来执行不区分大小写的匹配。g- 修饰符是用于执行全文的搜索（而不是在找到第一个就停止查找,而是找到所有的匹配）。m 多行搜索如：var str=Is this all there is?;var patt1=/is/g; /is isvar patt2=/is/gi; /Is is is内置对象

33、RegExp常用属性名称说明globalRegExp 对象是否具有标志 g。ignoreCaseRegExp 对象是否具有标志 i。lastIndex一个整数，标示开始下一次匹配的字符位置。multilineRegExp 对象是否具有标志 m。source正则表达式的源文本。内置对象RegExp常用方法名称说明compile编译正则表达式。exec检索字符串中指定的值。返回找到的值，并确定其位置。test检索字符串中指定的值。返回 true 或 false。内置对象RegExp正则表达式：使用通配符描述的表达式方括号：用于查找某个范围内的字符名称说明abc查找方括号之间的任何字符。abc查找任

34、何不在方括号之间的字符。0-9查找任何从 0 至 9 的数字。a-z查找任何从小写 a 到小写 z 的字符。A-Z查找任何从大写 A 到大写 Z 的字符。A-z查找任何从大写 A 到小写 z 的字符。adgk查找给定集合内的任何字符。adgk查找给定集合外的任何字符。(red|blue|green)查找任何指定的选项。内置对象RegExp元字符：拥有特殊含义的字符名称说明.查找单个字符，除了换行和行结束符。w查找单词字符(数字、字母)。W查找非单词字符。d查找数字。D查找非数字字符。s查找空白字符。S查找非空白字符。b匹配单词边界。B匹配非单词边界。0查找 NUL 字符。内置对象RegExp元

35、字符：拥有特殊含义的字符名称说明n查找换行符。f查找换页符。r查找回车符。t查找制表符。v查找垂直制表符。xxx查找以八进制数 xxx 规定的字符。xdd查找以十六进制数 dd 规定的字符。uxxxx查找以十六进制数 xxxx 规定的 Unicode 字符。内置对象RegExp量词：拥有特殊含义的字符名称说明n+匹配任何包含至少一个 n 的字符串。n*匹配任何包含零个或多个 n 的字符串。n?匹配任何包含零个或一个 n 的字符串。nX匹配包含 X 个 n 的序列的字符串。nX,Y匹配包含 X 至 Y 个 n 的序列的字符串。nX,匹配包含至少 X 个 n 的序列的字符串。n$匹配任何结尾为 n

36、 的字符串。n匹配任何开头为 n 的字符串。?=n匹配任何其后紧接指定字符串 n 的字符串。?!n匹配任何其后没有紧接指定字符串 n 的字符串。内置对象RegExp示例：1、检测字符串中是否包含特殊字符/(left|right|center)$/i 2、只能是数字d+$ d1,$ 3、只能输入长度为3的字符.3$ 4、只能输入非零的负整数-1-90-9*$ 5、验证密码：以字母开头和结尾的6-18位字符串A-Za-zS4,16A-Za-z$ 演示示例8：检测字符串中是否包含特殊字符实现继承定义父类：67/38 / 定义一个动物类function Animal (name) / 属性 this.

37、name = name | Animal; / 实例方法 this.sleep = function() console.log( + 正在睡觉！); / 原型方法Atotype.eat = function(food) console.log( + 正在吃： + food);实现继承1. 原型链继承68/38function Cat() Ctotype = new Animal();C = cat;/Test Codevar cat = new Cat();console.log(cat.na

38、me);console.log(cat.eat(fish);console.log(cat.sleep();console.log(cat instanceof Animal); /true console.log(cat instanceof Cat); /true实现继承1. 原型链继承非常纯粹的继承关系，实例是子类的实例，也是父类的实例父类新增原型方法/原型属性，子类都能访问到简单，易于实现要想为子类新增属性和方法，必须要在new Animal()这样的语句之后执行，不能放到构造器中无法实现多继承来自原型对象的所有属性被所有实例共享（来自原型对象的引用属性是所有实例共享的）（详细请看附录

39、代码：示例1）创建子类实例时，无法向父类构造函数传参69/38实现继承2. 构造继承70/38function Cat(name) Animal.call(this); = name | Tom;/ Test Codevar cat = new Cat();console.log();console.log(cat.sleep();console.log(cat instanceof Animal); / falseconsole.log(cat instanceof Cat); / true实现继承2. 构造继承解决了1中，子类实例共享父类引用属性的问题创

40、建子类实例时，可以向父类传递参数可以实现多继承（call多个父类对象）实例并不是父类的实例，只是子类的实例只能继承父类的实例属性和方法，不能继承原型属性/方法无法实现函数复用，每个子类都有父类实例函数的副本，影响性能71/38实现继承3. 实例继承72/38function Cat(name) var instance = new Animal(); = name | Tom; return instance;/ Test Codevar cat = new Cat();console.log();console.log(cat.sleep();co

41、nsole.log(cat instanceof Animal); / trueconsole.log(cat instanceof Cat); / false实现继承3. 实例继承不限制调用方式，不管是new 子类()还是子类(),返回的对象具有相同的效果实例是父类的实例，不是子类的实例不支持多继承73/38实现继承4. 拷贝继承74/38function Cat(name) var animal = new Animal(); for(var p in animal) Ctotypep = animalp; C = name | Tom;/ Test Codevar cat = new Cat();console.log();console.log(cat.sleep();console.log(cat instanceof Animal); / falseconsole.log(cat instanceof Cat); / true实现继承4. 拷贝继承支持多继承效率较低，内存占用高（因为要拷贝父类的属性）无法获取父类不可枚举的方法（不可枚举方法，不能使用for in 访问到）75/38实现继承5.组合继承76/38function Cat(name) An