日期:2014-05-16  浏览次数:20588 次

<JavaScript类定义的几种方式>

先写一个函数,下面几个方式会用到

?

function showSalary(){
	alert(this.salary);
}

?

?

1. 工厂方式
先创建对象,然后添加属性和方法,不需要用NEW创建对象,
如果把函数写在内部,每次调用都会创建新的函数,放在外面,封装性不好

function createWorker(sAage,sSalary,sDepartment){

  var oWorker=new Object();
  
  oWorker.age=sAage;
  
  oWorker.salary=sSalary;
  
  oWorker.department=sDepartment;
//创建函数的方式一,指向我们文章开头写好的函数名,缺点是函数在对象的外部,封装性不好
  oWorker.tellSalary=showSalary;
//创建函数的方式二,在对象内部声明匿名函数,虽然封装在对象内部了,但没个对象会有不同的函数版本,浪费内存
  oWorker.tellSalary=function(){
  	alert(this.salary);
  }
  
  return oWorker;
}

var worker1=createWorker(24,1000,"Dev");
worker1.tellSalary();

var worker2=createWorker(24,3000,"Dev");
worker2.tellSalary();

?

2. 构造函数方式
在构造函数内部不创建对象,使用this关键字,创建时候用new操作符,如果把函数声明在内部,存在和工厂方式相同的问题,重复创建函数。为每个对象都创建独立的函数版本。放在外部,封装性不好

?

function Worker(sAage,sSalary,sDepartment){
	
  this.age=sAage;
  
  this.salary=sSalary;
  
  this.department=sDepartment;
  
  //同工厂方式
  this.tellSalary=showSalary;
  //同工厂方式
  this.tellSalary=function(){
  	alert(this.salary);
  }

}

var worker3=new Worker(24,1000,"Dev");
worker3.tellSalary();

var worker4=new Worker(24,3000,"Dev");
worker4.tellSalary();

?

3. 原型方式

创建对象时不能使用构造传递参数,必须先创建对象,然后改变属性的值

function Worker(){
}


Worker.prototype.age=24;

Worker.prototype.salary=1000;

Worker.prototype.department="Dev";

Worker.prototype.homeaddress=new Array("www","dd");

// 创建多个对象时,要想一想此处为什么不会和构造函数方式及工厂方式一样,创建多个函数的实例

//要理解prototype的概念,prototype是父对象的一个实例

Worker.prototype.tellSalary=function(){
	alert(this.age);
}

var worker5=new Worker();

var worker6=new Worker();

worker5.tellSalary();

alert(worker5.homeaddress)

//修改原型中引用类型的值,会影响到所有已经实例化的对象
worker6.homeaddress.push("gg") 

alert(worker5.homeaddress)

?

4. 混合原型和构造函数方式
可以传递参数构造对象,多个实例对象共享一个函数

function Worker(sAage,sSalary,sDepartment){
	
  this.age=sAage;
  
  this.salary=sSalary;
  
  this.department=sDepartment;
  
  this.homeaddress=new Array("www","dd");
  
}

//只创建tellSalary函数一个实例,没有内存浪费
Worker.prototype.tellSalary=function(){
	alert(this.age);
}

var worker7=new Worker(23,3000,"Dev");

var worker8=new Worker(43,1000,"Dev");

worker7.tellSalary();

alert(worker7.homeaddress) // ww dd

worker8.homeaddress.push("gg")

alert(worker7.homeaddress) //www dd

alert(worker8.homeaddress) // www dd gg

?

第四种的方式看上去也很散落,可以改进一下

?

?

var person=function(sname,sage){
   this.name=sname;
   this.age=sage;
};

person.prototype={
   tellName:function(){
         alert(this.name);
   },
   
   tellAge:function(){
         alert(this.age);
   }
};

?

优点:
? 1. 可以传参数构造一个新对象
? 2. 当有多个对象产生时,不会创建多个函数实体,没有内存浪费
? 3. 封装想很好,属性和方法分开,