javascript工厂方式、构造函数、原型方式

一、工厂方式可以为一个对象,创建多个实例。

var oCar = new Object; oCar.color = "red"; oCar.doors=4; oCar.mpg=23; oCar.showColor = function(){ alert(this.color); } 

上面的代码,创建car对象,并赋予属性和方法。执行代码后就可以使用对象,问题是我们经常需要重复、创建多个实例。

 

解决此问题的方法是:创建能够返回特定类型的对象的工厂函数。

function createCar(){ var oTempCar = new Object; oTempCar.color = "red"; oTempCar.doors= 4; oTempCar.mpg = 23; oTempCar.showColor= function(){ alert(this.doors); } return oTempCar; } var oCar1 = createCar(); var oCar2 = createCar(); 

执行代码,将创建2个car对象。

 

上面的代码仍存在问题:为每个对象创建独立的函数版本,但实际上他们的函数功能是一样的,无需独立创建。

解决方法:创建外部函数重写工厂函数。

function showColor(){ alert(this.color); } function createCar(){ var oTempCar = new Object; oTempCar.color = "red"; oTempCar.doors = 4; oTempCar.mpg = 23; oTempCar.showColor = showColor; return oTempCar; } 

 

二、构造函数

在构造函数内部无需创建对象,二是使用this关键字。使用new调用构造函数。

function Car(sColor, iDoors, iMpg){ this.color = sColor; this.doors= iDoors; this.mpg = iMpg; this.showColor = function(){ alert(this.color); }; } var oCar1 = new Car("red", 4, 23); car oCar2 = new Car("blue",3, 25); 

 

与工厂方式相同,构造函数也存在无法共享方法的问题。解决方法仍然是使用外部函数。

 

三、原型方式

该方式利用了对象的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(); 

所有的属性和方法都被直接赋予创建对象所依赖的原型prototype属性。

 

原型方式很好的解决了构造函数方式、工厂方式的无法共享方法问题,但却出现一个新问题:无法传递参数,初始化属性。

 

四、混合方式

看到三者的优缺点,唯有混合使用它们。

function Car(sColor, iDoor, iMpg){ this.color = sColor; this.doors=iDoors; this.mpg = iMpg; this.drivers = new Array("Mike","Sue"); } Car.prototype.showColor = function(){ alert(this.color); } var oCar1 = new Car("red", 4, 23); var oCar2 = new Car("blue", 3, 25); oCar1.drivers.push("Matt"); alert(oCar1.drivers); //输出 "Mike,Sue,Matt" alert(oCar2.drivers);//输出 "Mike,Sue" 

 

1、使用构造函数方式,解决了传递参数的问题。

2、使用原型方式解决了共享函数指向同一函数指针的问题。

你可能感兴趣的:(JavaScript,function,prototype)