正文

JavaScript之工厂方式 构造函数方式 原型方式讲解

IP云
IP云V管理员/2 阅读
11/28
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

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

  1. var oCar = new Object;
  2. oCar.color = "red";
  3. oCar.doors=4;
  4. oCar.mpg=23;
  5. oCar.showColor = function(){
  6. alert(this.color);
  7. }

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

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

  1. function createCar(){
  2. var oTempCar = new Object;
  3. oTempCar.color = "red";
  4. oTempCar.doors= 4;
  5. oTempCar.mpg  = 23;
  6. oTempCar.showColor= function(){
  7. alert(this.doors);
  8. }
  9. return oTempCar;
  10. }
  11. var oCar1 = createCar();
  12. var oCar2 = createCar();

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

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

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

  1. function showColor(){
  2. alert(this.color);
  3. }
  4. function createCar(){
  5. var oTempCar = new Object;
  6. oTempCar.color = "red";
  7. oTempCar.doors = 4;
  8. oTempCar.mpg = 23;
  9. oTempCar.showColor = showColor;
  10. return oTempCar;
  11. }

二、构造函数方式

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

  1. function Car(sColor, iDoors, iMpg){
  2. this.color = sColor;
  3. this.doors= iDoors;
  4. this.mpg  = iMpg;
  5. this.showColor = function(){
  6. alert(this.color);
  7. };
  8. }
  9. var oCar1 = new Car("red", 4, 23);
  10. car oCar2 = new Car("blue",3, 25);

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

三、原型方式

该方式利用了对象的prototype属性，可以把它看成创建新对象所依赖的原型。

  1. function Car(){}  //创建空构造函数类名
  2. Car.prototype.color = "red";
  3. Car.prototype.doors= 4;
  4. Car.prototype.mpg = 23;
  5. Car.prototype.showColor = function(){
  6. alert(this.color);
  7. }
  8. var oCar1 = new Car();
  9. var oCar2 = new Car();

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

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

四、混合方式

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

  1. function Car(sColor, iDoor, iMpg){
  2. this.color = sColor;
  3. this.doors=iDoors;
  4. this.mpg = iMpg;
  5. this.drivers = new Array("Mike","Sue");
  6. }
  7. Car.prototype.showColor = function(){
  8. alert(this.color);
  9. }
  10. var oCar1 = new Car("red", 4, 23);
  11. var oCar2 = new Car("blue", 3, 25);
  12. oCar1.drivers.push("Matt");
  13. alert(oCar1.drivers); //输出 "Mike,Sue,Matt"
  14. alert(oCar2.drivers);//输出  "Mike,Sue"

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

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

相关阅读

目录[+]