1. 程式人生 > >js-JavaScript常見的創建對象的幾種方式

js-JavaScript常見的創建對象的幾種方式

單獨使用 函數傳遞 software 帶來 自動 引用數據類型 truct 我們 alt

1、通過Object構造函數或對象字面量創建單個對象

  這些方式有明顯的缺點:使用同一個接口創建很多對象,會產生大量的重復代碼。為了解決這個問題,出現了工廠模式。

2、工廠模式

  考慮在ES中無法創建類(ES6前),開發人員發明了一種函數,用函數來封裝以特定接口創建對象的細節。(實現起來是在一個函數內創建好對象,然後把對象返回)。

技術分享圖片
function createPerson(name,age,job){
    var o=new Object();
    o.name=name;
    o.age=age;
    o.job=job;
    o.sayName=function(){
        alert(this.name);
    };
    return 0;
}

var person1=createPerson("Nicholas",29,"Software Engineer");
var person2=createPerson("Greg",27,"Doctor");
技術分享圖片

  函數createPerson()能夠根據接受的參數來構建一個包含所有必要信息的Person對象。工廠模式雖然解決了創建多個相似對象的問題,但卻沒有解決對象識別的問題,即怎麽知道一個對象的類型。隨著JS發展,又一個模式出現了。

3、構造函數模式

  像Object和Array這樣的原生構造函數,在運行時會自動出現在執行環境。此外,也可以創建自定義的構造函數,從而定義自定義對象類型的屬性和方法。

技術分享圖片
function Person(name,age,job){
    this.name=name;
    this.age=age;
    this.job=job;
    this.sayName=function(){
        alert(this.name);
    };
}

var person1=new Person(...);
var person2=new Person(...);
技術分享圖片

  與工廠模式相比,具有以下特點:

  1. 沒有顯式創建對象;
  2. 直接將屬性和方法賦給了this對象;
  3. 沒有return語句;
  4. 要創建新實例,必須使用new操作符;(否則屬性和方法將會被添加到window對象)
  5. 可以使用instanceof操作符檢測對象類型

  構造函數的問題:

  構造函數內部的方法會被重復創建,不同實例內的同名函數是不相等的。可通過將方法移到構造函數外部解決這一問題,但面臨新問題:封裝性不好。

  這些問題可通過原型模式解決。

4、原型模式

  我們創建的每個函數都有一個prototype屬性,這個屬性是一個指針,指向一個對象,而這個對象的用途是包含可以由特定類型的所有實例共享的屬性和方法。(prototype就是通過調用構造函數而創建的那個對象實例的原型對象)。

  使用原型對象的好處是可以讓所有對象實例共享它所包含的屬性和方法。換句話說,不必在構造函數中定義對象實例的信息,而是可以將這些信息直接添加到原型對象中。

技術分享圖片
function Person(){
}

Person.prototype.name="Nicholas";
Person.prototype.age=29;
Person.prototype.job="...";
Person.prototype.sayName=function(){
    ...
};

var person1=new Person();
person1.sayName();//"Nicholas"
技術分享圖片

  更常見的做法是用一個包含所有屬性和方法的對象字面量來重寫整個原型對象,並重設constructor屬性。

技術分享圖片
function Person(){
}

Person.prototype={
    name:"...",
    age:29,
    job:"...",
    sayName:function(){
        ...
    }
};

Object.defineProperty(Person.prototype,"constructor",{
    enumerable:false,
    value:Person,
});
技術分享圖片

  原型對象的問題:

  1. 他省略了為構造函數傳遞初始化參數這一環節,結果所有實例在默認情況下都將取得相同的屬性值,雖然這會在一定程度帶來一定的不便,但不是最大的問題,最大的問題是由其共享的本性所決定的。
  2. 對於包含基本值的屬性可以通過在實例上添加一個同名屬性隱藏原型中的屬性。然後,對於包含引用數據類型的值來說,會導致問題。

  這些問題導致很少單獨使用原型模式。

5、組合使用構造函數模式和原型模式

  這是創建自定義類型的最常見的方式。

  構造函數模式用於定義實例屬性,而原型模式用於定義方法和共享的屬性。所以每個實例都會有自己的一份實例屬性的副本,但同時共享著對方法的引用,最大限度的節省了內存。同時支持向構造函數傳遞參數。

技術分享圖片
function Person(name,age,job){
    this.name=name;
    this.age=age;
    this.job=job;
    this.friends=["S","C"];
}

Person.prototype={
    constructor:Person,
    sayName:function(){
        alert(this.name);
    }
};

var person1=new Person(...);
技術分享圖片

6、動態原型模式

技術分享圖片
function Person(name,age,job){
    this.name=name;
    this.age=age;
    this.job=job;

    if(typeof this.sayName!="function"){
        Person.prototype.sayName=function(){
            alert(this.name);
        };
    }
}
技術分享圖片

  這裏只有sayName()不存在的情況下,才會將它添加到原型中,這段代碼只會在初次調用構造函數時才執行。這裏對原型所做的修改,能夠立刻在所有實例中得到反映。

7、Object.create()

  ES5定義了一個名為Object.create()的方法,它創建一個新對象,其中第一個參數是這個對象的原型,第二個參數對對象的屬性進行進一步描述。

8、另有寄生構造函數模式和穩妥構造函數模式

js-JavaScript常見的創建對象的幾種方式