js中类或对象的几种创建方式

  js中对象的创建有多种方式，下面就是我整理的几种创建方式，有什么问题还希望大家提点一下哈。
1.工厂方式：创建并且返回特定类型对象的工厂函数
function createCar() {
    var car = new Object();
    car.color = "red";
    car.doors = 4;
    car.mpg = 23;
    car.showColor = function(){
        alert(this.color);
    };
    return car;
};
var car1 = createCar();
var car2 = createCar();
当执行createCar()函数时，将创建新对象Object，并且赋予它属性，但是也可以修改createCar()方法，让其可以传递参数对各个属性进行赋值。但是这种方法创建对象导致的结果就是每次创建对象的时候都会重复创建方法showColor()，但事实上，我们需要的是每个对象都共享同一个函数。从而程序可以这样修改：
function showColor(){
    alert(this.color);
};

function createCar(color,doors,mpg) {
    var car = new Object();
    car.color = color;
    car.doors = doors;
    car.mpg = mpg;
    car.showColor = showColor;
    return car;
};
var car1 = createCar("red",4,23);
var car2 = createCar("blue",3,25);
car1.showColor();  //打印  "red"
car2.showColor();  //打印  "blue"
但是这种方式去创建看起来还是不怎么爽啊，那我们来看看下面的创建方式怎么样。

2.构造函数方式：创建构造函数和工厂函数很像，那我们来看看例子吧。
function Car(color,doors,mpg){
    this.color = color;
    this.doors = doors;
    this.mpg = mpg;
    this.showCar = function(){
        alert(this.color);
    };
};
var car1 = new Car("red",4,23);
var car2 = new Car("blue",3,25);
这段代码和工厂方式的差别是构造函数内部没有创建对象，而是用了this关键字，这种方式创建对象和工厂方式没有什么多大的区别，每个对象都创建了不同版本的函数，也可以用外部函数去重写构造函数。下面我们就来看看什么样的方式可以解决上面的问题。

3.原型方式：该方式利用对象的prototype属性，可以把它看成创建新对象所依赖的原型，我们来看看例子吧，看看到底是怎么回事。
function Car(){
};
Car.prototype.color = "red";
Car.prototype.doors = 4;
Car.prototype.mpg = 23;
Car.prototype.drivers = new Array("aa","bb");
Car.prototype.showColor = function(){
    alert(this.color);
};

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

car1.drivers.push("cc");
alert(car1.drivers);  //outputs "aa,bb,cc"
alert(car2.drivers);  //outputs "aa,bb,cc"
这种方式解决了前面的重复创建函数的不足，但是这种创建方式的弊端也非常之大，第一构造函数没有参数，所以只有在创建对象后才能改变属性值，这点很让人不爽哈；第二也是比较重要的一点就是它的属性对象是共享的，也就是说一个对象去改变，另一个对象就会受到影响。那我们有没有更好的解决办法呢，请看下面这种方式。

4.混合的构造函数/原型方式：结合构造函数和原型方式，就像其他的程序语言一样，即用构造函数定义对象的所有非函数属性，用原型方式定义对象的函数属性，结果所有的函数都只创建一次，而每个对象都具有自己的对象属性实例。例如：
function Car(color,doors,mpg){
    this.color = color;
    this.doors = doors;
    this.mpg = mpg;
    this.drivers = new Array("aa","bb");
};
Car.prototype.showColor = function(){
    alert(this.color);
};
var car1 = new Car("red",4,23);
var car2 = new Car("blue",3,25);

car1.drivers.push("cc");

alert(car1.drivers);  //outputs "aa,bb,cc"
alert(car2.drivers);  //outputs "aa,bb"
现在是不是更像一般对象的创建了，这种方式已经解决了上面几种方式创建对象的不足之处了，但是这种方式也不是最好的方式，那么我们就来看看还有上面更好的创建方式吧！

5.动态原型方法：动态原型方法的基本思想与混合的构造函数/原型方式相同，唯一的区别是赋予对象方法的位置。我们来看一下：
function Car(color,doors,mpg){
    this.color = color;
    this.doors = doors;
    this.mpg = mpg;
    this.drivers = new Array("aa","bb");
   
    if(typeof Car.initialized == "undefined"){
        Car.prototype.showColor = function(){
            alert(this.color);
        };
        Car.initialized = true;
    }
};
简单一点说，这种方式就好比Java中的sigleton.我们在来看看最后一种方式.

6.混合工厂方式：创建假构造函数，只返回另一种对象的新实例：
function Car(){
    var tempCar = new Object();
    tempCar.color = "red";
    tempCar.doors = 4;
    tempCar.mpg = 23;
    tempCar.showColor = function(){
        alert(this.color);
    };
    return tempCar;
};
var car = new Car();
这种方式与之前的工厂方式不同，它用了new运算符，看起来像真正的构造函数，但是这种方式不建议使用。

好了，这些是我一些总结，希望大家多给点意见哈！

评论

7 楼 ljz0898 2010-08-27  

lz辛苦了，不错的！学习了！

6 楼 Andrew1945 2010-08-27  

其实说到底，这些创建方式就是去模拟Java或其他编程语言中创建对象的方式。

5 楼 cloudgamer 2010-08-26  

好像跟书的一样

4 楼 gaozi131 2010-08-26  

已经很不错了 学习了 感谢分享

3 楼 wjywjy678 2010-08-26  

http://www.iteye.com/topic/697430

这个比你的好,人家推荐了用法

2 楼 fashionia 2010-08-23  

《javascript高级程序设计》。。。
你从这个里面抄过来的？
不过还是辛苦了。。。。。。。。

1 楼 Andrew1945 2010-08-23  

都没人回个帖，给点意见吗！