JavaScript之定义类或对象六种方式_javascript 定义类对象-CSDN博客

1、工厂方式

//类的定义

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

    //对象创建
    var car1 = new createCar();
    var car2 = new createCar();

    //也可以定义带参数的类
    function createCar(iColor, iDoors, iMpg){
                 var oTempCar = new Object;
                 oTempCar.color = iColor;
                 oTempCar.doors = iDoors;
                 oTempCar.mpg = iMpg; //时速
                 oTempCar.showColor = function(){
                 alert(this.color);
        };
        return oTempCar;
    }

    //对象创建
    var car1 = new createCar('red', 4, 23);
    var car2 = new createCar('blue', 3, 25);
         前面的例子中，每次调用函数createCar(),都要闯建新函数showColor(),意味着每个对象都有自己的showColor()版本，事实上，每个对象都共享了同一个函数。为了避开此问题，可以采用在工厂函数外定义对象的方法；

    function showColor(){
        alert(this.color);
    };

    function createCar(iColor, iDoors, iMpg){
                 var oTempCar = new Object;
                 oTempCar.color = iColor;
                 oTempCar.doors = iDoors;
                 oTempCar.mpg = iMpg; //时速
                 oTempCar.showColor = showColor;
                 return oTempCar;
    }

    var car1 = new createCar('red', 4, 23);
    var car2 = new createCar('blue', 3, 25);
    car1.showColor(); //outputs 'red'
    car2.showColor(); //outputs 'blue'
        尽管上述方法从功能上解决了多次创建函数的问题，但该函数看起来不像是对象的方法。所有这些问题引发了开发者定义的构造函数的出现。

2、构造函数方式

创建构造函数第一步选择类名，即构造函数的名字，这个名字的首字母大写。以使它与字母通常是小写的变量名区分开。

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

var car1 = new createCar('red', 4, 23);
var car2 = new createCar('blue', 3, 25);

可以看出其与工厂方式存在以下区别：
a.构造函数内部无创建对象，而是使用this关键字。
b.使用new运算符调用构造函数是，在执行第一行代码前先创建一个对象，只有用this才能访问该对象。然后可以直接赋予this属性，默认情况下是构造函数的返回值。但是构造函数方式与工厂方式一样，会重复生成函数，为每个对象都创建独立的函数版本。

3、原型方式

该方式利用了对象的prototype对象，可把它看成创建新对象所依赖的原型。
这里用空构造函数来设置类名，然后所有的属性和方法都没直接赋予prototype属性。重写前面的例子代码如下：

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

var car1 = new Car();
var car2 = new Car();

在这段代码中，首先定义构造函数Car()，接下来的几行代码，通过给Car的prototype属性添加属性去定义Car对象的属性。调用new Car()是，原型的所有属性都被立即赋予要创建的对象，意味着所有Car实例存放的都是指向showColor()函数的指针。从语义上将，所有属性看起来都属于一个对象，以此解决了前面两种方式存在的问题。此外，使用该方法，还能instanceof运算符检查给定变量指向的对象的类型。因此，下面的代码将输出true：alert(car1 instanceof Car); //outputs 'true'看起来是个非常好的解决方案。遗憾的是，它并不尽如人意。首先，这个构造函数没有参数。使用原型方式时不能通过构造函数传递参数初始化对象属性。真正的问题并不在这里，而是出现在属性指向的是对象，而不是函数时。函数共享是不会出现问题的，但对象却很少是被多个实例共享的。

例如：

    function Car(){}
         Car.prototype.color = 'red';
         Car.prototype.doors = 4;
         Car.prototype.mpg = 23;
         Car.prototype.drivers = new Array('Mike', 'Sue');
         Car.prototype.showColor = function(){
         alert(this.color);
    };

    var car1 = new Car();
    var car2 = new Car();
    car1.drivers.push('Mart');
    alert(car1.drivers); //outputs 'Mike, Sue，Mart'
    alert(car2.drivers); //outputs 'Mike, Sue，Mart'

这里，属性drivers是指向Array对象的指针，该数组中包含两个名字'Mike'和'Sue'。由于drivers是引用值，Car的两个实例都指向同一个数组。这意味着car1.drivers添加值'Matt',在car2.drivers中也能看到。输出这两个指针中的任何一个，结果都是现实字符串'Mike, Sue，Mart'。那么该如何解决以上提出的问题呢?

4、混合的构造函数/原型方式

用构造函数定义对象的所有非函数属性，用原型方式定义对象的函数属性（方法），所有函数都只创建一次，而每个对象都具有自己的对象属性实例。

                   function Car(iColor, iDoors, iMpg){
                           this.color = iColor;
                           this.doors = iDoors;
                           this.mpg = iMpg;
                           this.drivers = new Array('Mike', 'Sue');
                   }

                 Car.prototype.showColor = function(){
                 alert(this.color);
        };

        var car1 = new createCar('red', 4, 23);
        var car2 = new createCar('blue', 3, 25);
        car1.drivers.push('Mart');
        alert(car1.drivers); //outputs 'Mike, Sue，Mart'
        alert(car2.drivers); //outputs 'Mike, Sue'

所有的非函数属性都在构造函数中创建，意味着又可以用构造函数的参数赋予属性默认值了。

5、动态原型方式

动态原型方法的基本想法与混合的构造函数/原型方式相同，即在构造函数内部室非函数属性，而函数属性则利用原型属性定义。唯一的区别是赋予对象方法的位置。

简而言之，该方法使用标志(_initialized)来判断是否已给原型赋予了任何方法。该方法只创建并赋值一次，更符合其他语言中类的定义了。

6、混合工厂方式

它的目的是创建假构造函数，只返回另一种对象的新实例。

         function Car（）{
                     var oTempCar=new Object;
                     oTempCar.color=”red”;
                     oTempCar.doors=4;
                     oTempCar.mpg=23;
                     oTempCar.showColor=function(){
         alert(this.color);
};
return oTempCar;
}

由于在Car()构造函数内部调用了new运算符，所以将忽略第二个new运算符（位于构造函数之外）。在构造函数内部创建的对象被传递回变量var。