首页 > 代码库 > JavaScript面向对象编程

JavaScript面向对象编程

一、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面向对象编程