JavaScript面向對象編程
阿新 • • 發佈:2017-05-13
原型鏈 undefined 解決 code ive apply define logs 函數
一、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面向對象編程