JavaScript程序设计教程 第4章 JavaScript对象.pdf

第4章JavaScript对象4.1 对象简介4.2 创建对象4.3 对象特性4.4 单体内置对象4.5实战4.6小结o 4.1对象简介?所谓对象，就是一种无序的数据集合，由若干个“键值对工”（key-value）构成，例如：var o=O p:Hello WorldO；上面代码中，大括号就定义了一个对象，它被赋值给变量 O o这个对象内部包含一个键值对（又称为“成员”），P是“键名”（成员的名称），字符串“Hello World”是“键值”（成员的值）。键名与键值之间用冒号分隔。如果对象内部包含 多个键值对，每个键值对之间均用逗号分隔。Ooo 可以从以下两个层次来理解对象。(1)“对象”是单个实物的抽象。一本书、一辆汽车、一个人都可以是“对象”，一个数据i库、一张网页、一个与远程服务器的连接也可以是“对象”。当实物被抽象成“对象”，实物之间的关系就变成了“对象”o之间的关系，从而就可以模拟现实情况，针对“对象”进行编 1程。(2)“对象”是一个容器，封装了“属性”和“方法”。OoT 所谓“属性”，就是对象的状态；所谓“方法”，就是对象 父的行为（完成某种任务）。比如，我们可以把动物抽象为animal 对象，“属性”记录具体是那一种动物，“方法”表示动物的某。种行为（奔跑、捕猎、休息等）。i 对象属性可以是任何类型的值，甚至包括其他对象或者函数，当函数作为对象属性时也被叫作“方法”。在JavaScript中，9每个属性都可以没有或者拥有多种不同的特性，如表4.1所示。OO表4.1属性的特性特性描述只读属性为只读。无法改变属性值无法枚举不能使用for.in循环枚举属性，即使属性值为对 象类型无法删除无法使用delete删除oJavaScript为对象定义了很多内部属性，虽然这些属性?只是针对语言的实现者定义的，它们无法通过代码访问到，i 只能被运行代码的系统来访问，但了解这些属性可以更清晰地明白代码的含义，如表4.2所示。表4.2对象的属性属性属性类型描述Prototype对象对象的原型，用来实现继承功能的关键对象Class字符串描述对象类型的字符串值，使用type。喉作符返回结果Get函数返回属性值。获取指定属性名的值Put函数设置指定的属性值。为指定的属性赋值CanPut函数返回指定属性是否可通过Put操作设置值HasProperty函数返回对象是否有指定的属性Delete函数从对象中删除指定属性Defaultvalue函数返回对象的默认值，只能是原始值，不能是引用类型Construct函数通过new操作符创建一个对象。实现了这个内部属性的对象 叫作构造函数（可以理解为类）oQO续表ooQO属性属性类型描述Call函数执行关联在对象上的代码，通过函数表达式调用（也就是通过函 数名调用函数），实现了这个内部方法的对象叫作函数Haslnstance函数返回给定的值是否扩展了当前对象的属性和行为（可以理解为给 定的对象是否为本类创建的对象），在JavaScript本地对象中，只有Function对象实现了这个属性Scope对象作用域链定义了一个函数的执行环境O4.2创建对象JavaScript是一门面向对象的语言，但JavaScript没有类的Q概念，一切都是对象。任意一个对象都是某种引用类型的实例,都是通过已有的引用类型创建。引用类型可以是原生的，也可以是自定义的。JavaScript提供了6种创建对象模式。1.对象字面量模式ovar person=name:N icholas;age:22;job:software Engineer”;sayN ame:function()alter(this,name);2.工厂模式 工厂模式是软件工程领域中一种广为人知的设计模式，工厂模式抽象了创建具体对象的过程，用函数来封装以特定的接口?创建对象的细节。function createPerson(name,age,job)var o=new O bject();o.name=name;o.age=age;o.job=job;o.sayN ame=function()alert(this,name);return o;)var personl=createPerson(N icholas”,22,software Engineer);var person2=createPerson(Greg,24,student);o函数createPerson()根据接受的参数构建一个包含所有 T 必要信息的Person对象。可以无数次地调用这个函数，每次 1 都会返回一个包含三个属性(name,age,job)一个方法sayN ame()的对象。工厂模式虽然解决了创建多个相似对象的问题，却没有 解决对象识别的问题(即怎么知道一个对象的类型)，因为 创建对象都是使用O bject的原生构造函数来完成的。就如上 面代码里调用函数createPerson()得到的o对象，对象的类型 都是 O bject。3QoooooooQ3.构造区I数模式所谓“构造函数”，其实就是一个普通函数，但是内部 使用了this变量。对构造函数使用new运算符，就能生成实例，并且this变量会绑定在实例对象上，例如：function Person(name,age,job)this,name=name;this,age=age;this,job=job;this.sayN ame=function()alert(this,name);)/通过new操作符创建Per son的实例var personl=new Person(N icholas”,22,software Engineer);var person2=new Person(Greg,24,student);personl.sayN ame();person2.sayN ame();4.原型模式JavaScript中创建的每个函数都有一个prototype(原 型)属性，它是一个指针，指向一个对象，包含了可以由特 定类型的所有实例共享的属性和方法(让所有的对象实例共 享它的属性和方法)。function Person()Person,prototype,name=N icholas”;Person,prototype,age=22;Person,prototype,job=software Engineer;Person,prototype.sayN ame()alert(this,name);；var personl=new Person();personl.sayN ame();/N icholasalert(personl.sayN ame=person2.sayN ame);/trueo 5.组合使用构造函数模式和原型模式丫 组合使用构造函数模式和原型模式中，构造函数用于定义实例属性，原型模式用于定义方法和共享的属性。这 样每个实例都会有自己的一份实例属性的副本，同时也可 以共享对方法的引用，最大限度地节省了内存。function Person(name,age,job)this,name=name;this,age=age;this,job=job;this,friends=Shelby,C ourt;oPerson,prototype=(o constructor：Person,sayN ame：function()o alert(this,name);1 1 p(2h22 var personl 二 new Person(N icholas,22,softwarej Engineer);var person2=new Person(Greg,24,student);personl.friend,push(Van);alert(personl.friends);/Shelby,C ourt,Van”alert(person2.friends);/Shelby,C ourt”alert(personl.friends 二二 person2.friends);/false?alert(personl.sayN ame=person2.sayN ame);/true 共享原型中定义的sayN ame()方法6.动态原型模式动态原型模式将需要的所有信息都封装到构造函数中，通过if语句判断原型中的某个属性是否存在，若不存在(在 第一次调用这个构造函数的时候)，执行if语句内部的原型 初始化代码。function Person(name,age)this,name=name;this,age=age;this,job=job;方法if(typeof this.sayN ame!=function)Person,prototype.sayN ame=function()alert(this,name);var friend=new Person(J N icholas,22,SoftwareL Engineer)初次调用强造弓呼 日时修改了原型var person2=new Person(J amy,21);/此时sayN ame()方法已经存在，不会再修改原型OO-Ok、告专专多6专多，;二二二:，、J/a a j&oO4.3对象特性同C+、Java等大多数面向对象语言一样，JavaScript存 在抽象、封装、继承和多态四大特性。1.抽象性面向对象的分析首先会“抽象”问题，找出问题的本质 属性，即最不容易发生改变的特性。2.封装性封装就是把抽象出来的数据和对数据的操作封装在一起,数据被保护在内部，程序的其他部分只有通过被授权的操 作（成员方法），才能对数据进行操作。o 3.继承性继承也可以理解为扩展性。继承可以解决代码复用，让 L编程更加靠近人类思维。当多个类存在相同的属性（变量）和 方法时，可以从这些类中抽象出父类，在父类中定义这些相同 的属性和方法，所有的子类均不需要重新定义这些属性和方法 小，只需要继承父类中的属性和方法。JavaScript中实现继承的方式有两种。第一种实现继承的?方法是对象冒充，见脚本4-2所示。OO function Stu(name,age)this.name=name;this.age=age;this.show=function()window.alert(this.name+this.age);)function MidStu(name,age)this.stu=Stu;this.stu(name,age);)var midStu=new MidStu(王先生,28);midStu.show();脚本42.htmloQO函数M idStu中this,stu二Stu；通过对象冒充将函数Stu 赋值给this,stu；这样M idStu函数的成员stu就拥有了函数Stu 的所有成员。脚本运行结果显示如图4.2所示。OO此网页显示：王先生28望itlHS页再显示对话框。xQ确定O图4.2对象冒充示例结果O第二种实现继承的方法是通过call或者apply实现o见脚本4-3。ooooooQfunction Stu(name,age)this.name=name;this.age=age;this.show=function()window.alert(this.name+H+this.age);)function MidStu(name,age)Stu.call(this,name,age);)var midstu=new MidStu(“王先生”,28);midstu.show();脚本43.html函数M idStu中使用语句Stu.call(this,name,age)，通过call方法修改了Stu构造函数的this指向，使它指向了调?用者本身。如果这里使用apply方法，则可以这样更改代码 A:Stu.apply(this,name,age)使用这种方式实现继承 可获得同样的结果，如图4.3所示。此网页显示:王先生28禁止此天再显示花话框。Q图4.3 call方法实现继承示例结果o?4.多态性多态性是指相同操作方式带来不同的结果。从形式上来 说，有两种多态。分别为重载和覆盖。覆盖是指子类对父类 的行为做了修改，虽然行为相同，但结果不同。例如改进性 能的同系列车就比原先的某些方面更优秀。重载是指某一对 象的相同行为导致了不同的结果。多态一方面加强了程序的 灵活性和适应性，另一方面也可以减少编码的工作量。?JavaScript实现重载的方式与Java等其他面向对象语言 不同。JavaScript需要利用arguments属性来实现方法重载,如脚本4-4所示。OoooooooQfunction Person()this.test1=function()if(arguments.length=1)this.showl(argumentsO);else if(arguments.length=2)this.show2(arguments0,arguments1);else if(arguments.length=3)this.show3(arguments0,arguments1,arguments2);)this.showl=function(a)console.log(show1(，被调用)；)this.show2=function(a,b)console.Iog(show2(戚调用);)this.show3=function(a,b,c)console.Iog(show3()辕诲用);)var p1=new Personf);p1.test1(a,b,c);p1.test1(a,b);p1.test1(a);脚本44.htmlo这里实例化对象Person,随后依次调用Person的test 1方法。丫 第1次调用传入3个参数“a”“b”“c，运用arguments属性 判断arguments.length为3,则调用show3方法；同理第2次调用 会跳转到show2方法中；第3次调用会跳转到showl方法中。最终 浏览器控制台依次打印出“show3()被调用”“show2()被调用”和“showl()被调用，运行结果如图4.4所示。QDeveloper Tools-file:/G:/ziliao/JavaScript%E7%A8%8B%E5.XG E Elements Console Sources Network Timeline Profiles 0 top U Preserve logshow3()被调用 本 4-4.html:21show2()被调用 骷 0 本4-4.htmL18showl。被调用/本 4-4.html:15 I图4.4多态性示例运行结果4.4单体内置对象EC M A-262对内置对象的定义是：由JavaScript实现 提供的、不依赖于宿主环境的对象，这些对象在JavaScript 程序执行之前就已经存在了。意思就是说，开发人员不必显 式地实例化内置对象，因为它们已经实例化了。前面章节已 经介绍了大多数内置对象，例如O bject、Array和Stringo EC M A-262还定义了两个单体内置对象：Global和M ath。o441刎成对象Global对象是JavaScript中最特别的对象，因为实际 上它根本不存在。Global对象在某种意义上是作为一个终极 的“兜底儿对象”来定义的。换句话说，不属于任何其他对象的属性和方法，最终都是它的属性和方法。所有在全局作用域 中定义的属性和函数，都是Global对象的属性。本书前面介绍过的那些函数，诸如isN aN()、isFiniteO parselnt()以及parseFloat(),实际上全都是Global对象的方法。除此之外，Global对象还包含其他一些方法。o 1.U RI编码方法,Global 对象的encodeU RI()和 encodeU RIC omponent()方法可以对U RI(U niform Resource Identifiers,通用资源标识符)进行编码，以便发送给浏览器。有效的U RI中不能包含某些字符,例如空格。这两个U RI编码方法用特殊的U TF-8编码替换所有无 效的字符，从而让浏览器能够接受和理解。其中，encodeU RI()主要用于整个U RI,而encodeU RIC omponent()主要用于对U RI中 的某一段进行编码。它们的主要区别在于，encodeU RI()不会对T本身属于U RI的特殊字符进行编码，例如冒号、正斜杠、问号和 井字号；而encodeU RIC omponent()则会对它发现的任何非标准字 符进行编码。示例代码见脚本4-6。Ovar uri=http:/.en/#start;console.log(encodellRI(uri);console.log(encodeURIComponent(uri);脚本46.html运行在控制台显示结果如图4.6所示。c Developer Tools-file:/E:/ziliao/JavaScript/%E7%AC%AC%E5%9B%9B%E7%AB%A0.。I 回 i-S3|G(5J Elements Console Sources ehvork Time ine Profiles Application ：0 9 top .：Preserve logFilter_ Regex Hide network I Hide violations-Errors Warn rtgs Info Logs Debughttp:/otoress.ccrr.en/#start 骷口本.-it*5http%3A%2F162F%2F%23start 眈本4-6.图4.6 URL编码方法示例结果11 2.eval()方法eval()方法就像是一个完整的JavaScript解析器，它只接 T 受一个参数，即要执行的JavaScript字符串。用法如下：!eval(console,log(hi，);这行代码的作用等价于下面这行代码：console.10g(hi);当解析器发现代血中调用eval()方法时，它会将传入的参 数当作实际的JavaScript语句来解析，然后把执行结果插入 到原位置。通过eval()执行的代码被认为是包含该次调用的执 行环境的一部分，因此被执行的代码具有与该执行环境相同的 6 作用域链。Oo3.Global对象的属性 Global对象还包含一些属性，其中一部分属性已经在本书前面章节介绍过了。例如，特殊的值undefined、N aN以及Infinity。都是Global对象的属性。此外，所有原生引用类型的构造函数，）像O bject和Function,也都是Global对象的属性。表4.3列出了Global对象的所有属性。QOQoQ表4.3 Global对象属性属性*呈义undefined特殊值 11ndefinedNaN特殊值NaNInfinify特殊值InfinityObject构;告函数ChjertArray构造函数ArrayFiincfinn构造函数 Fiinctinn_Rnnlnn构造函数 Rnnlpan_String构造函数String_Number构;告函数NumherDate构;告函数DateRegExp构造函数RegExpError构;告函数RrrcrFvalFrrnr构;告函数RvnlErrnrRaneFrrnr构;告函数Rnn产。KrrnrRpfprpnrpRrrnr构造函数 RpfprpnrpRrrnrSyntaxFrror构;告函数SvntAxErrorTypeRrrnr构;告函数TvpeErrorIJRIFrror构造函数【JRIErrnr_o442侬城对象JavaScript还为保存数学公式和信息提供了一个公共位置 即M ath对象。与在JavaScript直接编写的计算功能相比，M ath对象提供的计算功能执行起来要快得多。M ath对象中还提供了辅助完成这些计算的属性和方法。11.M ath对象属性.M ath对象包含的属性大都是数学计算中可能会用到的一些 9特殊值。OOo表4.4 Math对象属性属性释义Math.E自然对数的底数，即常量e的值Math.LNIO10的自然对数Math.LN22的自然对数Math.LOG2E以2为底e的对数Math.LOGlOE以10为底e的对数Math.PI元的值Math.SQRTl_21/2的平方根（即2的平方根的倒数）Math.SQRT22的平方根o2.min()和 max()方法o M ath对象还包含许多方法，用于辅助完成简单和复杂的数 学计算。其中，min()和max()方法用于确定一组数值中的最小 值和最大值。这两个方法都可以接收任意多个数值参数，如下面 的例子所示。var max=M ath,max(3,54,32,16);console,log(max);/54o var min=M ath,min(3,54,32,16);:console,log(min);/3要找到数组中的最大或最小值，可以像下面这样使用apply()方法。var values=1,2,3,4,5,6,7,8;var max=M ath.max.apply(M ath,values);console,log(max);/8o 这个技巧的关键是把M ath对象作为apply()的第1个参数,从而正确地设置this值。然后，可以将任何数组作为第2个参oQOOOQO3.舍入方法JavaScript将小数值舍入为整数的3个方法为M ath,ceil()、M ath,floor()和M ath,round()o这3个方法分别遵循下列舍 入规则：(1)M ath.ceil()执行向上舍入，即它总是将数值向上舍入 为最接近的整数；(2)M ath,floor()执行向下舍入，即它总是将数值向下舍入 为最接近的整数；(3)M ath,round()执行标准舍入，即它总是将数值四舍五入为最接近的整数。Oo4.random。方法M ath.random()方法返回介于0和1之间一个随机数，不包 括0和1。对于某些站点来说，这个方法非常实用，因为可以利 用它来随机显示一些名人名言和新闻事件。套用下面的公式，。就可以利用M ath.random()从某个整数范围内随机选择一个值O值=M ath,floor(M ath,random()*可能值的总数+第一个 o可能的值)公式中用到了M ath,floor。方法，这是因为M ath,random。总返回一个小数值。而用这个小数值乘以一个整数，然后再加 上一个整数，最终结果仍然还是一个小数。O5.其他方法M ath对象中还包含其他一些与完成各种简单或复杂计算 有关的方法，但详细讨论其中每一个方法的细节及适用情形超 出了本书的范围。表4.5列出了这些没有介绍到的M ath对象的 方法。表4.5 Math对象其他方法属性释义Math.abs(num)返回num的绝对值Math.asin(x)返回x的反正弦值Math.exp(num)返回Math.E的num次幕Math.atan(x)返回X的反正切值Math.log(num)返回num的自然对数Math.atan2(y,x)返回y/x的反正切值Math.pow(num,power)返回num的power次幕Math.cos(x)返回x的余弦值Math.sqrt(num)返回num的平方根Math.sin(x)返回X的正弦值Math.acos(x)返回x的反余弦值Math.tan(x)返回X的正切值4.5 实战【案例1】一一产生zrf不重复随机数1.案例描述用JavaScript产生n个min,max区间内的不重复随机数O2.实现思路(1)运用M ath对象的random。方法生成一个min,max区间 内的随机数，代码片段如下：var ran=parselnt(M ath,random()*(max-min+1)+min);(2)生成n个min,max区间内的不重复随机数，生成第i个 min,max区间的随机数时，与之前iT个数比较，如有重复，令i二iT；重复生成第i个随机数。确保每次生成的随机数都不 重复。ooooofunction myRan(n,min,max)var arr=;for(i=0;i n;i+)arr i=parselnt(M ath,random()*(max-min+1)+min);for(j=0;j i;j+)if(arr i=arr j)i=i-l;break;ooQreturn arr;(3)调用函数myRan。3.实现代码运行结果如图4.8所示。Developer Tools-file:/G:/ziliao/JavaScript%E7%A8%8B%E5.XG 5ZI Elements Console Sources Network Timeline Profiles 0 q top U Preserve log44,79,38,90,43,30,42,97,34,73 一44-8.html:18图4.8案例41运行结果oO G Cl 0 4.6小结JavaScript是一门面向对象的语言，但不使用类或者接 口。对象可以在代码执行过程中创建，因此具有动态性而非 严格定义的实体。在没有类的情况下，可以采用多种模式创 建对象。本章提供了6种对象创建的模式，可根据实际编程需I 要选用不同的模式。JavaScript还可以基于已有对象编程，包含EC M AScript 的本地对象，内置对象和宿主对象。本章着重介绍了两种单?体内置对象全局对象和数学对象。全局对象Global包含一系 i 列全局的属性和全局的函数，这些属性和函数可不经引用任 何对象直接使用。数学对象M ath包含一组静态只读属性用于 表示一些数学常数，另包含一组静态方法用于实现常用的数 学运算。