JavaScript面向对象编程之创建方式

最近一直在看Nicholas C.Zakas的《JavaScript高级程序设计》

看到面向对象编程时，就自己连抄带编总结了一下。

如果有错误或者不妥的地方还请斧正。

一、工厂模式

function Bicycle(color,price){
    var newBicycle=new Object;
    newBicycle.color=color;
    newBicycle.price=price;
    newBicycle.showInfo=function(){
        alert(this.color+','+this.price);
    };
    return newBicycle;
}
//实例对象
var oBicycle1=new Bicycle('black',10000);
var oBicycle2=new Bicycle('white',20000);

该模式存在的问题：

1.语义上，看起来不像使用带有构造函数的new运算符那么正规。
2.功能上，每次调用Bicycle，都要创建新的函数showInfo。

 

二、工厂模式改进

function Bicycle(color,price){
    var newBicycle=new Object;
    newBicycle.color=color;
    newBicycle.price=price;
    newBicycle.showInfo=showInfo;
    return newBicycle;
}
//把方法放在外面
function showInfo(){
    alert(this.color+','+this.price);
}

//实例对象
var oBicycle1=new Bicycle('black',10000);
var oBicycle2=new Bicycle('white',20000);

该方式解决了重复创建对象函数的问题，但是函数看起来不像是对象的方法

三、构造函数方式

function Bicycle(color,price){
    this.color=color;
    this.price=price;
    this.showInfo=showInfo;
}
//把方法放在外面
function showInfo(){
    alert(this.color+','+this.price);
}

//实例对象
var oBicycle1=new Bicycle('black',10000);
var oBicycle2=new Bicycle('white',20000);

该方式虽然语义上没有太大问题了，还是没有解决方法看起来不像对象的方法的问题

四、原型方式

function Bicycle(){
    Bicycle.prototype.color='red';
    Bicycle.prototype.price=10000;
    Bicycle.prototype.showInfo=function(){
        alert(this.color+','+this.price);
    };
}
//实例对象
var oBicycle1=new Bicycle();
var oBicycle2=new Bicycle();

该方式：解决了（一）中的两个问题

最大的问题：对象共享，如果改变oBicycle1的颜色，那么oBicycle2的值也将随之改变

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

1.用构造函数定义属性，原型方式定义方法（函数）
2.这样所有的函数都只创建一次，每个对象都有自己的对象属性实例

function Bicycle(color,price){
    this.color=color;
    this.price=price;
}
Bicycle.prototype.showInfo=function(){
    alert(this.color+','+this.price);
};
//实例对象
var oBicycle1=new Bicycle('red',10000);
var oBicycle2=new Bicycle('green',20000);

六、动态原型方式--我是第一次听说

1.把方法放进构造函数中，使用判断让方法只创建一次

2.整理过后的代码和Java的类看起来就很像

function Bicycle(color,price){
    this.color=color;
    this.price=price;
    if(typeof Bicycle._initialized=="undefined"){
        Bicycle.prototype.showInfo=function(){
            alert(this.color+','+this.price);
        };
        Bicycle._initialized=true;
    };
}
var oBicycle1=new Bicycle("red",10000);

总结：目前最常用的是混合的构造函数/原型方式，不过以后自己会尝试用一下第六种方式