js類定義方法

    學習使人進步，類使代碼清晰！

    之前寫一些js代碼沒有太複雜的邏輯，幾個處理事件的函數，或者監聽事件，所以沒有考慮使用類。處理邏輯多了之後，so代碼一團糟，真是錯中複雜啊。突然發現萬事都要有長遠規劃，切不可圖一時痛快。

    言歸正傳

    -----------------------------------------------華麗的分割線---------------------------------------------------------------

首先常用的方式有：

1、構造函數方式

構造函數熟悉度比較高，面向對象最常見的

function Car(color,door){
    this.color = color;
    this.doors = door;
    this.showColor = function(){
        alert(this.color)
    };
}
var car1 = new Car(“red”,4);
var car2 = new Car(“blue”,4);

調用構造函數的時候就創建了對象，所以函數內部使用this訪問屬性。

2、原型方式

prototype屬性可以向對象內添加屬性和方法

function Car(){
}
Car.prototype.color = “red”;
Car.prototype.doors = 4;
Car.prototype.showColor = function(){
    alert(this.color);
}
var car1 = new Car();
var car2 = new Car();

原型方式一般不會單獨使用，一般結合構造函數方式使用，prototype填充類中未定義的屬性和方法

function Car(color,door){
    this.color = color;
    this.doors = door;
    this.arr = new Array(“aa”,”bb”);
}
Car.prototype.showColor(){
    alert(this.color);
}
var car1 = new Car(“red”,4);
var car2 = new Car(“blue”,4);
car1.arr.push(“cc”);
alert(car1.arr); //output:aa,bb,cc
alert(car2.arr); //output:aa,bb

3、動態原型方式

動態原型方式使用一個標誌來判斷是否給原型賦予了方法，保證方法只創建一次

function Car(color,door){
    this.color = color;
    this.doors = door;
    this.arr = new Array(“aa”,”bb”);
    if(typeof Car._initialized == “undefined”){
        Car.prototype.showColor = function(){
            alert(this.color);
        };
        Car._initialized = true;
    }
}

4、工廠方式

function Car(){
    var ocar = new Object;
    ocar.color = “blue”;
    ocar.doors = 4;
    ocar.showColor = function(){
        document.write(this.color)
    };
    return ocar;
}
var car1 = Car();
var car2 = Car();

調用此函數時將創建新對象，並賦予它所有的屬性和方法。使用此函數可以創建2個屬性完全相同的對象。

當然可以通過給它傳遞參數來改版這種方式。

function Car(color,door){
    var ocar = new Object;
    ocar.color = color;
    ocar.doors = door;
    ocar.showColor = function(){
        document.write(this.color)
    };
    return ocar;
}
var car1 = Car(“red”,4);
var car2 = Car(“blue”,4);
car1.showColor() //output:”red”
car2.showColor() //output:”blue”

5、混合工廠方式

建立假的構造函數，返回另一種對象的新實例

function Car(){
    var ocar = new Object();
    ocar.color = “red”;
    ocar.doors = 4;
    ocar.showColor = function(){
        alert(this.color)
    };
    return ocar;
}

與工廠方式所不同的是，這種方式使用new運算符

-----------------------------------------------結束分隔符------------------------------------------------------------------

目前使用最廣泛的就是混合構造函數/原型方式