1. 程式人生 > >JavaScript面向對象編程

JavaScript面向對象編程

原型鏈 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面向對象編程