第四章 理解对象
1 说明
对象的状态:属性,行为:方法;
对象定义放在花括号内;
用冒号分隔属性名和属性值;
用逗号分隔属性名和属性值对,包括方法;
最后一个属性值后面不加逗号;
属性名可以是任何字符串,但通常遵循变量命名规则,包含空格时必须用引号将其括起来;
同一个对象中不能包含两个同名的属性;
句点表示法访问对象,当然也可以用方括号方法(更为灵活且需注意无逗号);
添加新属性:指定新属性并赋值:fiat.needsWashing=true;
删除属性:delete fido.dogYears;(删除成功返回true);
创建一个无属性的对象: var lookMaNoProps={ };
将对象信息显示到控制台: console.log(fiat);
函数中传递的是对象的引用,因此在函数中对对象的修改有效;
2 实例1:
1 <script language="JavaScript" type="text/JavaScript">
2 function getSecret(file,secretPassword)
3 {
4 file.opened=file.opened+1;
5 if(secretPassword==file.password)
6 return file.contents;
7 else
8 return "Invalid password! No secret for you.";
9 }
10 function setScret(file,secretPassword,secret)
11 {
12 if(secretPassword==file.password)
13 {
14 file.opened=0;
15 file.contents=secret;
16 }
17 }
18 var superSecretFile={
19 level:"classifiled",
20 opened:0,
21 password:2168,
22 contents: "Dr. Evel's next meeting is in Detroit."
23 };
24 var secret=getSecret(superSecretFile,2168);
25 console.log(secret);
26 var secret1=getSecret(superSecretFile,2152);
27 console.log(secret1);
28 setScret(superSecretFile,2168,"Dr . Evel's next meeting is in Philadelphia");
29 secret=getSecret(superSecretFile,2168);
30 console.log(secret);
31 </script>
3 实例2:
1 <!doctype html>
2
3 <html lang="en">
4
5 <head>
6
7 <title>Battleship</title>
8
9 <meta charset="utf-8">
10
11 </head>
12
13 <body>
14
15 <script language="JavaScript" type="text/JavaScript">
16
17 function makeCar()
18
19 {
20
21 var makes=["Chevy","GM","Fiat","Webville Motors","Tucker"];
22
23 var models=["Cadillac","500","Bel-Air","Taxi","Torpedo"];
24
25 var years=[1955,1957,1948,1954,1961];
26
27 var colors=["red","blue","tan","yellow","white"];
28
29 var convertile=[true,false];
30
31
32
33 var rand1=Math.floor(Math.random()*makes.length);
34
35 var rand2=Math.floor(Math.random()*models.length);
36
37 var rand3=Math.floor(Math.random()*years.length);
38
39 var rand4=Math.floor(Math.random()*colors.length);
40
41 var rand5=Math.floor(Math.random()*5)+1;
42
43 var rand6=Math.floor(Math.random()*2);
44
45
46
47 var car={
48
49 make:makes[rand1],
50
51 model:models[rand2],
52
53 year:years[rand3],
54
55 color:colors[rand4],
56
57 passengers:rand5,
58
59 convertile:convertile[rand6],
60
61 mileage:0,
62
63 fuel:0,
64
65 started:false,
66
67
68
69 start:function(){
70
71 this.started=true;
72
73 },
74
75 stop:function(){
76
77 this.started=false;
78
79 },
80
81 drive:function(){
82
83 if(this.started)
84
85 {
86
87 if(this.fuel>0)
88
89 alert("Zoom zoom!");
90
91 else
92
93 {
94
95 alert("Uh , oh ,out of fuel!");
96
97 this.stop();
98
99 }
100
101 }
102
103 else
104
105 alert("You need to start the engine first!");
106
107 },
108
109 addFuel:function(amount){
110
111 this.fuel+=amount;
112
113 }
114
115 };
116
117 return car;
118
119 }
120
121 function displayCar(car)
122
123 {
124
125 console.log("Your new car is a "+car.year+" "+car.make+" "+car.model);
126
127 }
128
129 var Cadillac=makeCar();
130
131 displayCar(Cadillac);
132
133 //访问对象中的属性
134
135 //方法一:迭代器
136
137 for(var pup in Cadillac)
138
139 {
140
141 console.log(pup+" : "+ Cadillac[pup]);
142
143 }
144
145 //方法二:句点访问法和方括号访问法
146
147 console.log("You new car 's color is "+Cadillac.color);
148
149 console.log("Your car counld hold "+Cadillac["passengers"]+" people.");
150
151 console.log("Your car counld hold "+Cadillac["passe"+"ngers"]+" people.");
152
153
154
155 Cadillac.drive();//开车
156
157 Cadillac.start();//启动
158
159 Cadillac.drive();//开车
160
161 Cadillac.addFuel(15);//加油
162
163 Cadillac.start();//启动
164
165 Cadillac.drive();//开车
166
167 Cadillac.stop();//熄火
168
169 Cadillac.drive();//开车
170
171 </script>
172
173 </body>
174 </html>
4 对象拓展
JavaScript提供:
Date, Math, RegExp(字符串中查找), JSON(与其他应用程序交换js对象)
浏览器提供:
Doucument(写入网页),Windows(,与浏览器相关),Console(与控制台相关)
五、高级对象构造技巧
1 构造函数创建对象(模板)
- 构造函数只能返回this;否则会导致函数不返回它创建的对象;
- 判断某个实例是否由某个构造函数创建;
- cadi instanceof Dog;是返回true;
- 当然可以使用上面阐述的方式更改对象的属性和方法,更改后,intanceof依然显示true;
1 <!doctype html>
2
3 <html lang="en">
4
5 <head>
6
7 <title>Dog wang!</title>
8
9 <meta charset="utf-8">
10
11 <style type="text/css">
12
13
14
15 </style>
16
17 <script language="JavaScript" type="text/JavaScript">
18
19 //构造函数
20
21 function Dog(name,breed,weight){
22
23 this.name=name;
24
25 this.breed=breed;
26
27 this.weight=weight;
28
29 this.bark=function(){
30
31 if(this.weight>25)
32
33 alert(this.name+" says Woof!");
34
35 else
36
37 alert(this.name+" says Yip!");
38
39 };
40
41 }
42
43
44
45 var fido = new Dog("Fido", "Mixed", 38);
46
47 var fluffy = new Dog("Fluffy", "Poodle", 30);
48
49 var spot = new Dog("Spot", "Chihuahua", 10);
50
51 var dogs = [fido, fluffy, spot];
52
53
54
55 for(var i = 0; i < dogs.length; i++) {
56
57 var size = "small";
58
59 if (dogs[i].weight > 10) {
60
61 size = "large";
62
63 }
64
65 console.log("Dog: " + dogs[i].name
66
67 + " is a " + size
68
69 + " " + dogs[i].breed
70
71 );
72
73 }
74
75
76
77 for (var i = 0; i < dogs.length; i++) {
78
79 dogs[i].bark();
80
81 }
82
83 </script>
84
85 </head>
86
87 <body>
88
89
90
91 </body>
92
93 </html>
2 内置构造函数
1 var now=new Date();
2
3 var dateString=now.toString();
4
5 var year=now.getFullYear();
6
7 var birthday=new Date("May 1,1998 08:09 pm");
8
9 console.log(birthday.toString());
10
11 console.log(dateString);
12
13 console.log(year);
3 数组对象
var items=new Array("a","b","c");
console.log(items[2]);
4 其他内置对象
Object【对象字面量是其实例】,Math,RegExp,Error
5 使用原型创建对象
- 在所使用上述构造函数创建对象时,每个不同的对象都需要分配内存(主要是行为),为了节约内存管理提出了继承原型的方式创建对象,实质也是继承对象;
- Dog.prototype访问原型
- 原理:所有方法和属性都是先在实例对象中查找调用,如果不存在则返回原型查找调用并将原型的属性方法添加给实例对象;
- spot.hasOwnProperty("sitting")可以测试sitting属性是否在实例对象spot中存在,存在返回true否则false;
- 学会创建原型链对象,最初始的都是Object对象
- 例:
1 <!doctype html>
2
3 <html lang="en">
4
5 <head>
6
7 <meta charset="utf-8">
8
9 <title>Show dogs</title>
10
11 <script>
12
13 //创建狗狗的原型
14
15 function Dog(name, breed, weight) {
16
17 this.name = name;
18
19 this.breed = breed;
20
21 this.weight = weight;
22
23 }
24
25 //为狗狗添加属性
26
27 Dog.prototype.species = "Canine";
28
29 Dog.prototype.sitting = false;
30
31 //为狗狗添加方法
32
33 Dog.prototype.sit = function() {
34
35 if (this.sitting) {
36
37 console.log(this.name + " is already sitting");
38
39 } else {
40
41 console.log(this.name + " is now sitting");
42
43 this.sitting = true;
44
45 }
46
47 }
48
49 Dog.prototype.bark = function() {
50
51 if (this.weight > 25) {
52
53 console.log(this.name + " says Woof!");
54
55 } else {
56
57 console.log(this.name + " says Yip!");
58
59 }
60
61 };
62
63 Dog.prototype.run = function() {
64
65 console.log("Run!");
66
67 };
68
69 Dog.prototype.wag = function() {
70
71 console.log("Wag!");
72
73 };
74
75 //创建一个表演狗的原型——构造函数
76
77 /*
78
79 function ShowDog(name, breed, weight, handler) {
80
81 this.name = name;
82
83 this.breed = breed;
84
85 this.weight = weight;
86
87 this.handler = handler;
88
89 }
90
91 */
92
93 //改进版
94
95 function ShowDog(name,breed,weight,handler)
96
97 {
98
99 Dog.call(this,name,breed,weight);//重用构造函数Dog中处理name等的代码
100
101 this.handler=handler;
102
103 }
104
105 //使表演狗原型继承自狗狗原型
106
107 ShowDog.prototype = new Dog();
108
109 //重写ShowDog的constructor属性
110
111 ShowDog.prototype.constructor=ShowDog;
112
113 //为表演狗原型添加新属性
114
115 ShowDog.prototype.league = "Webville";
116
117 //为表演狗原型添加方法
118
119 ShowDog.prototype.stack = function() {
120
121 console.log("Stack");
122
123 };
124
125
126
127 ShowDog.prototype.bait = function() {
128
129 console.log("Bait");
130
131 };
132
133
134
135 ShowDog.prototype.gait = function(kind) {
136
137 console.log(kind + "ing");
138
139 };
140
141
142
143 ShowDog.prototype.groom = function() {
144
145 console.log("Groom");
146
147 };
148
149
150
151 //创建狗狗原型的实例对象
152
153 var fido = new Dog("Fido", "Mixed", 38);
154
155 var fluffy = new Dog("Fluffy", "Poodle", 30);
156
157 var spot = new Dog("Spot", "Chihuahua", 10);
158
159 //重写spot实例的bark方法
160
161 spot.bark = function() {
162
163 console.log(this.name + " says WOOF!");
164
165 };
166
167 //创建表演狗原型的实例对象
168
169 var scotty = new ShowDog("Scotty", "Scottish Terrier", 15, "Cookie");
170
171 var beatrice = new ShowDog("Beatrice", "Pomeranian", 5, "Hamilton");
172
173 //测试狗狗原型实例对象的方法调用
174
175 fido.bark();
176
177 fluffy.bark();
178
179 spot.bark();
180
181 //测试表演狗原型实例对象的方法调用
182
183 scotty.bark();
184
185 beatrice.bark();
186
187
188
189 scotty.gait("Walk");
190
191 beatrice.groom();
192
193 //测试实例的constructor属性
194
195 console.log("FIdo constructor is "+fido.constructor);
196
197 console.log("Scotty constructor is "+scotty.constructor);
198
199 </script>
200
201 </head>
202
203 <body>
204
205 </body>
206
207 </html>
- 重写内置行为
- 如:重写Object的toString()方法
- 不可重写属性:
constructor 指向与这个原型相关联的构造函数
hasOwnProperty判断实例中是否实例化
isPrototypeOf 判断一个对象是否是另一个对象的原型
propertyIsEnumerable 判断通过迭代对象的所有属性是否可访问指定属性
- 可重写:
toString 转换为字符串
toLocaleString 将对象转换为字符串,通过重写可以描述对象的本地化字符串
valueOf 默认返回当前对象,通过重写让它返回你希望的其他值;
1 <script>
2
3 function Robot(name,year,owner)
4
5 {
6
7 this.name=name;
8
9 this.year=year;
10
11 this.owner=owner;
12
13 }
14
15 var toy=new Robot("Toy",2013,"Avary");
16
17 console.log(toy.toString());
18
19
20
21 function Robot2(name,year,owner)
22
23 {
24
25 this.name=name;
26
27 this.year=year;
28
29 this.owner=owner;
30
31 }
32
33 //重写Object的toString方法
34
35 Robot2.prototype.toString=function(){
36
37 return this.name+" Robot2 beloneing to "+this.owner;
38
39 }
40
41 var toy2=new Robot2("Toy",2013,"Avary");
42
43 console.log(toy2.toString());
44
45 </script>
- 拓展内置对象
给String等内置对象添加新方法时,务必确保新方法名称不与对象既有名称冲突,链接其他代码时一定要清楚这些代码包含的自定义拓展,有些内置对象如Array不能拓展
1 <script>
2
3 //为String的原型添加方法cliche
4
5 String.prototype.cliche=function(){
6
7 var cliche=["lock and load","touch base","open the kimono"];
8
9
10
11 for(var i=0;i<cliche.length;i++){
12
13 var index=this.indexOf(cliche[i]);
14
15 if(index>=0){
16
17 return true;
18
19 }
20
21 }
22
23 return false;
24
25 }
26
27
28
29 var sentences=["I'll send my car around to pick you up",
30
31 "Let's touch base in the moring and see where we are",
32
33 "We don't want to open the kimono,we just want to inform them."];
34
35 for(var i=0;i<sentences.length;i++){
36
37 var parse=sentences[i];
38
39 if(parse.cliche){
40
41 console.log("CliCHE ALERT: "+parse);
42
43 }
44
45 }
46
47 </script>
原文出处:https://www.cnblogs.com/weimingai/p/10349205.html