JavaScript中创建对象的五种方式详解

JavaScript对象创建概述

在JavaScript中，创建并返回特定类型的对象是基础操作。

 
function createCar(sColor,iDoors,iMpg){
var oTempCar=new Object();
oTempCar.color=sColor;
oTempCar.doors=iDoors;
oTempCar.mpg=iMpg;
oTempCar.showColor=function(){
alert(this.color);
} 
return oTempCar;
} 

工厂模式

调用示例如下：

 
var oCar1=createCar("red",4,23);
var oCar2=createCar("blue",3,25);
oCar1.showColor();
oCar2.showColor();

该方式的主要缺点在于方法被重复创建。例如在上述调用中，oCar1和oCar2各自拥有独立的showColor方法，但实际上这些方法是可以共享的，造成了内存浪费。

构造函数模式

改进示例如下：

 
function Car(sColor,iDoors,iMpg){
this.color=sColor;
this.door=iDoors;
this.mpg=iMpg;
this.showColor=function(){
alert(this.color);
} 
} 

调用示例如下：

 
var oCar1=new Car("red",4,23);
var oCar2=new Car("blue",3,25);

此方式存在与工厂模式相同的缺点，即方法在每次实例化时都被重复创建，导致内存效率低下。

原型模式

利用对象的prototype属性可以解决此问题，该属性被视为创建新对象所依赖的原型。通过空构造函数定义类名，并将所有属性和方法直接赋予prototype属性，重写前的示例代码如下：

 
function Car(){
} 
Car.prototype.color="red";
Car.prototype.doors=4;
Car.prototype.mpg=23;
Car.prototype.showColor=function(){
alert(this.color);
} 

调用方式如下：

 
var oCar1=new Car();
var oCar2=new Car();

该方式的局限性在于无法通过向构造函数传递参数来初始化属性值。

混合构造函数/原型模式

结合使用构造函数和原型方式，示例如下：

 
function Car(sColor,iDoors,iMpg){
this.color=sColor;
this.door=iDoors;
this.mpg=iMpg;
} 
Car.prototype.showColor=function(){
alert(this.color);
} 

调用示例如下：

 
var oCar1=new Car("red",4,23);
var oCar2=new Car("blue",3,25);

其优点在于既避免了内存浪费，又保持了创建的便捷性。

这种混合方式是ECMAScript中采用的主要对象创建方式。

动态原型方法

尽管混合构造函数/原型方式将方法定义在对象外部，导致视觉封装感不足，不够“面向对象”，因此衍生出了动态原型方法：

 
function Car(sColor,iDoors,iMpg){
this.color=sColor;
this.door=iDoors;
this.mpg=iMpg;
if(typeof Car._initialized=="undefined"){
Car.prototype.showColor=function(){
alert(this.color);
}; 
Car._initialized=true;
} 
} 

作者：Artwl

出处：http://artwl.cnblogs.com