JavaScript学习笔记（三）—

第四章理解对象

1 说明

　　对象的状态：属性，行为：方法；

　　对象定义放在花括号内；

　　用冒号分隔属性名和属性值；

　　用逗号分隔属性名和属性值对，包括方法；

　　最后一个属性值后面不加逗号；

　　属性名可以是任何字符串，但通常遵循变量命名规则，包含空格时必须用引号将其括起来；

　　同一个对象中不能包含两个同名的属性；

　　句点表示法访问对象，当然也可以用方括号方法（更为灵活且需注意无逗号）；

　　添加新属性：指定新属性并赋值：fiat.needsWashing=true;

　　删除属性：delete fido.dogYears;（删除成功返回true）;

　　创建一个无属性的对象: var lookMaNoProps={ };

　　将对象信息显示到控制台: console.log(fiat);

　　函数中传递的是对象的引用，因此在函数中对对象的修改有效；

2 实例1:

 <script language="JavaScript" type="text/JavaScript">
 function getSecret(file,secretPassword)
 {
 file.opened=file.opened+1;
 if(secretPassword==file.password)
 return file.contents;
 else
 return "Invalid password! No secret for you.";
 }
 function setScret(file,secretPassword,secret)
 {
 if(secretPassword==file.password)
 {
 file.opened=0;
 file.contents=secret;
 }
 }
 var superSecretFile={
 level:"classifiled",
 opened:0,
 password:2168,
 contents: "Dr. Evel's next meeting is in Detroit."
 };
 var secret=getSecret(superSecretFile,2168);
 console.log(secret);
 var secret1=getSecret(superSecretFile,2152);
 console.log(secret1);
 setScret(superSecretFile,2168,"Dr . Evel's next meeting is in Philadelphia");
 secret=getSecret(superSecretFile,2168);
 console.log(secret);
 </script>

3 实例2：

 <!doctype html>
 
 <html lang="en">
 
 <head>
 
 <title>Battleship</title>
 
 <meta charset="utf-8">
 
 </head>
 
 <body>
 
 <script language="JavaScript" type="text/JavaScript">
 
 function makeCar()
 
 {
 
 var makes=["Chevy","GM","Fiat","Webville Motors","Tucker"];
 
 var models=["Cadillac","500","Bel-Air","Taxi","Torpedo"];
 
 var years=[1955,1957,1948,1954,1961];
 
 var colors=["red","blue","tan","yellow","white"];
 
 var convertile=[true,false];
 
 var rand1=Math.floor(Math.random()*makes.length);
 
 var rand2=Math.floor(Math.random()*models.length);
 
 var rand3=Math.floor(Math.random()*years.length);
 
 var rand4=Math.floor(Math.random()*colors.length);
 
 var rand5=Math.floor(Math.random()*5)+1;
 
 var rand6=Math.floor(Math.random()*2);
 
 var car={
 
 make:makes[rand1],
 
 model:models[rand2],
 
 year:years[rand3],
 
 color:colors[rand4],
 
 passengers:rand5,
 
 convertile:convertile[rand6],
 
 mileage:0,
 
 fuel:0,
 
 started:false,
 
 start:function(){
 
 this.started=true;
 
 },
 
 stop:function(){
 
 this.started=false;
 
 },
 
 drive:function(){
 
 if(this.started)
 
 {
 
 if(this.fuel>0)
 
 alert("Zoom zoom!");
 
 else
 
 {
 
 alert("Uh , oh ,out of fuel!");
 
 this.stop();
 
 }
 
 }
 
 else
 
 alert("You need to start the engine first!");
 
 },
 
 addFuel:function(amount){
 
 this.fuel+=amount;
 
 }
 
 };
 
 return car;
 
 }
 
 function displayCar(car)
 
 {
 
 console.log("Your new car is a "+car.year+" "+car.make+" "+car.model);
 
 }        
 
 var Cadillac=makeCar();
 
 displayCar(Cadillac);
 
 //访问对象中的属性
 
 //方法一：迭代器
 
 for(var pup in Cadillac)
 
 {
 
 console.log(pup+" : "+        Cadillac[pup]);
 
 }
 
 //方法二：句点访问法和方括号访问法
 
 console.log("You new car 's color is "+Cadillac.color);
 
 console.log("Your car counld hold "+Cadillac["passengers"]+" people.");
 
 console.log("Your car counld hold "+Cadillac["passe"+"ngers"]+" people.");
 
 Cadillac.drive();//开车
 
 Cadillac.start();//启动
 
 Cadillac.drive();//开车
 
 Cadillac.addFuel(15);//加油
 
 Cadillac.start();//启动
 
 Cadillac.drive();//开车
 
 Cadillac.stop();//熄火
 
 Cadillac.drive();//开车
 
 </script>
 
 </body>
 </html>

4 对象拓展

　　JavaScript提供：

　　Date， Math， RegExp(字符串中查找)， JSON(与其他应用程序交换js对象)

　　浏览器提供：

　　Doucument(写入网页)，Windows(，与浏览器相关)，Console(与控制台相关)

五、高级对象构造技巧

1 构造函数创建对象（模板）

构造函数只能返回this；否则会导致函数不返回它创建的对象；
判断某个实例是否由某个构造函数创建；
cadi instanceof Dog;是返回true；
当然可以使用上面阐述的方式更改对象的属性和方法，更改后，intanceof依然显示true；

 <!doctype html>
 
 <html lang="en">
 
 <head>
 
 <title>Dog wang!</title>
 
 <meta charset="utf-8">
 
 <style type="text/css">
 
 </style>
 
 <script language="JavaScript" type="text/JavaScript">
 
 //构造函数
 
 function Dog(name,breed,weight){
 
 this.name=name;
 
 this.breed=breed;
 
 this.weight=weight;
 
 this.bark=function(){
 
 if(this.weight>25)
 
 alert(this.name+" says Woof!");
 
 else
 
 alert(this.name+" says Yip!");
 
 };
 
 }
 
 var fido = new Dog("Fido", "Mixed", 38);
 
 var fluffy = new Dog("Fluffy", "Poodle", 30);
 
 var spot = new Dog("Spot", "Chihuahua", 10);
 
 var dogs = [fido, fluffy, spot];
 
 for(var i = 0; i < dogs.length; i++) {
 
 var size = "small";
 
 if (dogs[i].weight > 10) {
 
 size = "large";
 
 }
 
 console.log("Dog: " + dogs[i].name
 
 + " is a " + size
 
 + " " + dogs[i].breed
 
 );
 
 }
 
 for (var i = 0; i < dogs.length; i++) {
 
 dogs[i].bark();
 
 }
 
 </script>
 
 </head>
 
 <body>
 
 </body>
 
 </html>

2 内置构造函数

 var now=new Date();
 
 var dateString=now.toString();
 
 var year=now.getFullYear();
 
 var birthday=new Date("May 1,1998 08:09 pm");
 
 console.log(birthday.toString());
 
 console.log(dateString);
 
 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对象
例：

 <!doctype html>
 
 <html lang="en">
 
 <head>
 
 <meta charset="utf-8">
 
 <title>Show dogs</title>
 
 <script>
 
 //创建狗狗的原型
 
 function Dog(name, breed, weight) {
 
     this.name = name;
 
     this.breed = breed;
 
     this.weight = weight;
 
 }
 
 //为狗狗添加属性
 
 Dog.prototype.species = "Canine";
 
 Dog.prototype.sitting = false;
 
 //为狗狗添加方法
 
 Dog.prototype.sit = function() {
 
 if (this.sitting) {
 
 console.log(this.name + " is already sitting");
 
 } else {
 
 console.log(this.name + " is now sitting");
 
 this.sitting = true;
 
 }
 
 }
 
 Dog.prototype.bark = function() {
 
 if (this.weight > 25) {
 
 console.log(this.name + " says Woof!");
 
 } else {
 
 console.log(this.name + " says Yip!");
 
 }
 
 };
 
 Dog.prototype.run = function() {
 
     console.log("Run!");
 
 };
 
 Dog.prototype.wag = function() {
 
     console.log("Wag!");
 
 };
 
 //创建一个表演狗的原型——构造函数
 
 /*
 
 function ShowDog(name, breed, weight, handler) {
 
 this.name = name;
 
 this.breed = breed;
 
 this.weight = weight;
 
 this.handler = handler;
 
 }
 
 */
 
 //改进版
 
 function ShowDog(name,breed,weight,handler)
 
 {
 
 Dog.call(this,name,breed,weight);//重用构造函数Dog中处理name等的代码
 
 this.handler=handler;
 
 }
 
 //使表演狗原型继承自狗狗原型
 
 ShowDog.prototype = new Dog();
 
 //重写ShowDog的constructor属性
 
 ShowDog.prototype.constructor=ShowDog;
 
 //为表演狗原型添加新属性
 
 ShowDog.prototype.league = "Webville";
 
 //为表演狗原型添加方法
 
 ShowDog.prototype.stack = function() {
 
 console.log("Stack");
 
 };
 
 ShowDog.prototype.bait = function() {
 
 console.log("Bait");
 
 };
 
 ShowDog.prototype.gait = function(kind) {
 
 console.log(kind + "ing");
 
 };
 
 ShowDog.prototype.groom = function() {
 
 console.log("Groom");
 
 };
 
 //创建狗狗原型的实例对象
 
 var fido = new Dog("Fido", "Mixed", 38);
 
 var fluffy = new Dog("Fluffy", "Poodle", 30);
 
 var spot = new Dog("Spot", "Chihuahua", 10);
 
 //重写spot实例的bark方法
 
 spot.bark = function() {
 
 console.log(this.name + " says WOOF!");
 
 };
 
 //创建表演狗原型的实例对象
 
 var scotty = new ShowDog("Scotty", "Scottish Terrier", 15, "Cookie");
 
 var beatrice = new ShowDog("Beatrice", "Pomeranian", 5, "Hamilton");
 
 //测试狗狗原型实例对象的方法调用
 
 fido.bark();
 
 fluffy.bark();
 
 spot.bark();
 
 //测试表演狗原型实例对象的方法调用
 
 scotty.bark();
 
 beatrice.bark();
 
 scotty.gait("Walk");
 
 beatrice.groom();
 
 //测试实例的constructor属性
 
 console.log("FIdo constructor is "+fido.constructor);
 
 console.log("Scotty constructor is "+scotty.constructor);
 
 </script>
 
 </head>
 
 <body>
 
 </body>
 
 </html>

重写内置行为
- 如:重写Object的toString()方法
- 不可重写属性：

constructor 指向与这个原型相关联的构造函数

hasOwnProperty判断实例中是否实例化

isPrototypeOf 判断一个对象是否是另一个对象的原型

propertyIsEnumerable 判断通过迭代对象的所有属性是否可访问指定属性

可重写：

toString 转换为字符串

toLocaleString 将对象转换为字符串，通过重写可以描述对象的本地化字符串

valueOf 默认返回当前对象，通过重写让它返回你希望的其他值；

 <script>
 
 function Robot(name,year,owner)
 
 {
 
 this.name=name;
 
 this.year=year;
 
 this.owner=owner;
 
 }
 
 var toy=new Robot("Toy",2013,"Avary");
 
 console.log(toy.toString());
 
 function Robot2(name,year,owner)
 
 {
 
 this.name=name;
 
 this.year=year;
 
 this.owner=owner;
 
 }
 
 //重写Object的toString方法
 
 Robot2.prototype.toString=function(){
 
 return this.name+" Robot2 beloneing to "+this.owner;
 
 }
 
 var toy2=new Robot2("Toy",2013,"Avary");
 
 console.log(toy2.toString());
 
 </script>

拓展内置对象

给String等内置对象添加新方法时，务必确保新方法名称不与对象既有名称冲突，链接其他代码时一定要清楚这些代码包含的自定义拓展，有些内置对象如Array不能拓展

 <script>
 
 //为String的原型添加方法cliche
 
 String.prototype.cliche=function(){
 
 var cliche=["lock and load","touch base","open the kimono"];
 
 for(var i=0;i<cliche.length;i++){
 
 var index=this.indexOf(cliche[i]);
 
 if(index>=0){
 
 return true;
 
 }
 
 }
 
 return false;
 
 }
 
 var sentences=["I'll send my car around to pick you up",
 
 "Let's touch base in the moring and see where we are",
 
 "We don't want to open the kimono,we just want to inform them."];
 
 for(var i=0;i<sentences.length;i++){
 
 var parse=sentences[i];
 
 if(parse.cliche){
 
 console.log("CliCHE ALERT: "+parse);
 
 }
 
 }
 
 </script>