JavaScript物件導向編程

標籤：rip   app   重慶   變數   pre   ddr   語句   object   需要   

一、JS物件導向編程基礎

對象的建立：

function Dog(name,age){　　this.name = name;  /*建立對象的屬性和方法必須加上this*/　　this.age = age;　　this.eat = function(){　　　　alert(this.color+"、"+this.age+"歲、名字叫"+this.name+"的狗在吃骨頭");   }} var dog = new Dog("Tom",2);dog.eat();   /* color未定義 *//*動態添加屬性方法*/dog.color="黑色";  /*動態添加屬性*/dog.eat();  /*color為黑色*/delete dog.color;  /*刪除屬性*/dog.run=function(){/*動態添加方法*/alert(this.color+this.age+"歲、名字叫"+this.name+"的狗在吃骨頭,吃完就跑");}dog.run();

with語句：將需要使用其屬性和方法的對象用with語句包含起來

with(dog){     alert(color);    alert(name);    alert(age); 
    eat();}

for語句：用於遍曆一個對象的所有屬性

for(var dog2 in dog){/*for(var 變數(裝對象的屬性) in 對象) dog[dog2]是通過dog2屬性找到dog對象的值*/alert("屬性名稱字："+dog2+"-屬性值："+dog[dog2]); }

二、建立自訂的JS類和對象

（一）工廠方式　 (每個對象都有自己的方法 佔用資源)

function Po(name){var obj = new Object();obj.name=name;/*設定的是obj的屬性而不是Po本身的屬性 設定本身的屬性要用this*/obj.say=function(){    alert("我是"+obj.name);    return obj;}var p = Po("張三");   /*擷取傳回值*/var p1 = Po("李四");var p = new Po("張三");/*new的是Po對象 最好用上面的方式擷取*/p.say();/*只設定了obj的屬性而不是Po本身的屬性,需要返回obj對象才能調用obj的方法*/p1.say();alert(p.say==p1.say);/*false*/
}

(二)建構函式方式（每個對象都有自己的方法 佔用資源）　　

function Po(name){this.name=name;this.say=function(){    alert("我是"+this.name);}} var p = new Po("張三");var p1 = new Po("李四");p.say();p1.say();alert(p.say==p1.say); /*false 不同對象調的方法不同 即每個對象都有自己的方法 佔用資源*/

(三)原型方式原型方式 （方法共用 但是不能傳參）　　

function Po(){Po.prototype.name="李四";Po.prototype.say=function(){alert("我是"+this.name);}}var p = new Po();var p1 = new Po();p.say(); p1.say();alert(p.say==p1.say);   /*true 表示所有對象用同一個方法*、

(四)構造+原型方式（解決了前面提到的問題，但封裝不夠完美）　　

function Po(name){//構造方法建原型對象this.name=name;}Po.prototype.say=function(){/*原型方式建立共用方法*/alert("我是"+this.name);}var p = new Po("張三");var p1 = new Po("李四");p.say();p1.say();alert(p.say==p1.say);  //true

(五)更好的構造+原型方式（一種完美的解決方案）　　

function Po(name){    this.name=name;if(Po.prototype.say==undefined){    Po.prototype.say=function(){alert("我是"+this.name);    }    }}var p = new Po("張三");var p1 = new Po("李四");p.say();p1.say();alert(p.say==p1.say);  //true

(六)JSON格式　　

var Po = {name:"張三", /*逗號隔開,不是分號*/age:12,addr:"重慶",say:function(){alert(this.age+"歲的"+this.name+"現居"+this.addr);}}alert(Po.name);alert(Po.age);alert(Po.addr);Po.say();

三、對象繼承實現

（一）對象冒充

function Po(name){this.name=name;this.say=function(){alert("我是"+this.name);}}function FalsePo(name){this.fpo=Po;this.fpo(name);delete this.fpo;    /*冒充後必須刪除冒充的對象*/this.color=function(){    alert(this.name+"的膚色是黑的");} }var falsePo = new FalsePo("lisi");falsePo.say();falsePo.color();

(二)call()

 1 function Po(name){ 2     this.name=name; 3     this.say=function(){ 4         alert("我是"+this.name); 5     } 6 }         7 function FalsePo(name){ 8     Po.call(this,name);        //基本類.call(對象，參數列表)     9     this.color=function(){10     alert(this.name+"的膚色是黑的");11     }12 }13         var falsePo = new FalsePo("lisi");14     falsePo.say();15     alsePo.color();    

(三)apply()方式

 1 function Po(name,age){ 2     this.name=name; 3     this.age=age; 4     this.say=function(){ 5         alert("我是"+this.name); 6     } 7 } 8              9 function FalsePo(name,age){10     Po.apply(this,[name,age]);        /*基本類.apply(對象，參數數組)*/11                 12     this.color=function(){13         alert(this.age+"歲的"+this.name+"的膚色是黑的");14     }15 }16 var falsePo = new FalsePo("lisi",20);17 falsePo.say();18 falsePo.color();

(四)原型鏈

function Po(name){this.name=name;}Po.prototype.say=function(){alert("我是"+this.name);}function fPo(name,addr){Po.call(this,name);this.addr=addr;}fPo.prototype=new Po(); fPo.prototype.live=function(){alert(this.name+"住在"+this.addr); }var pp = new fPo("張三","重慶");pp.say();pp.live(); 

　　

　　

　　

　

JavaScript物件導向編程