JavaScript對象建立模式入門教程

來源:互聯網
上載者:User


在JavaScript中建立對象是很容易的,可以使用對象字面量或者建構函式。常用的建立對象的模式有以下幾種:

一. 原廠模式

原廠模式抽象了具體對象的過程,用函數來封裝以特ing介面建立對象的細節。

如下:

function createAnimal(name, age) {
    var o = new Object();
    o.name = name;
    o.age = age;
    o.sayName = function() {
        alert(this.name);
    }
    return o;
}

var cat = createAnimal("cat", 12);
var dog = createAnimal("dog", 3);
原廠模式雖然解決了建立多個相似兌現過的問題,但是卻沒有解決對象識別的問題。

二. 建構函式模式

建構函式模式可以建立特定類型的對象。

function Animal(name, age) {
    this.name = name;
    this.age = age;
    this.sayName = function() {
        alert(this.name);
    }
}
var cat = new Animal("cat", 12);
var dog = new Animal("dog", 3);
可以使用對象的constructor屬性或instanceof操作符來標識物件類型。

cat.constructor == Animal  // true

cat instanceof Animal  // true
三. 原型模式

每個函數都有一個prototype(原型)屬性。這個屬性是一個指標,指向一個對象,而這個對象的用途是包含可以由特定類型的所有執行個體共用的屬性和方法。

使用原型對象的好處是,可以讓所有對象執行個體共用它所包含的屬性和方法。

function Animal() {}
Animal.prototype.name = "animal";
Animal.prototype.age = 1;
Animal.prototype.sayName = function() {
    alert(this.name);
}

var test1 = new Animal();
test1.sayName(); // "animal"

var test2 = new Animal();
test2.sayName(); // "animal"

alert(test1.sayName === test2.sayName); // true
或者:

function Animal() {}
Animal.prototype = {
    constructor: Animal,
    name: "animal",
    age: 1,
    sayName: function() {
        alert(this.name);
    }
};
原型中所有屬性是被很多執行個體共用的,通過在執行個體上添加一個同名屬性,可以隱藏原型中的對應屬性。但是,對於包含參考型別值的屬性來說,問題就比較明顯了,如下:

function Animal() {}
Animal.prototype = {
    constructor: Animal,
    name: "animal",
    age: 1,
    hobbies: ["dance", "sing", "play"],
    sayName: function() {
        alert(this.name);
    }
};

var cat = new Animal();
var dog = new Animal();

cat.hobbies.push("sleep");

alert(cat.hobbies); // "dance", "sing", "play", "sleep"
alert(dog.hobbies); // "dance", "sing", "play", "sleep"

alert(cat.hobbies === dog.hobbies); // true
四. 組合使用建構函式模式和原型模式

function Animal(name, age) {
    this.name = "animal";
    this.age = 1;
    this.hobbies = ["dance", "sing", "play"];
}
Animal.prototype = {
    constructor: Animal,
    sayName: function() {
        alert(this.name);
    }
};

var cat = new Animal("cat", 2);
var dog = new Animal("dog", 3);

cat.hobbies.push("sleep");

alert(cat.hobbies); // "dance", "sing", "play", "sleep"
alert(dog.hobbies); // "dance", "sing", "play"

alert(cat.hobbies === dog.hobbies); // false
alert(cat.sayName === dog.sayName); // true
五. 動態原型模式

function Animal(name, age) {
    this.name = name;
    this.age = age;
    if(typeof this.sayName != "function") {
        Animal.prototype.sayName = function() {
            alert(this.name);
        }
    }
}
var cat = new Animal("cat", 12);
cat.sayName(); // "cat"
使用動態原型模式時,不能使用對象字面量重寫原型。如果在已經建立了執行個體的情況下重寫原型,那麼就會切斷現有執行個體與新原型之間的聯絡。

六. 寄生建構函式模式

寄生建構函式模式的基本思想是建立一個函數,該函數的作用僅僅是封裝建立對象的代碼,然後再返回新建立的對象。

從表面上看,這個函數很像典型的建構函式。除了使用new操作符之外,這個模式跟原廠模式長得一模一樣。建構函式在不傳回值的情況下,預設會返回新對象執行個體。而通過在建構函式的末尾添加一個return語句,可以重寫調用建構函式時返回的值。

function Animal(name, age) {
    var o = new Object();
    o.name = name;
    o.age = age;
    o.sayName = function() {
        alert(this.name);
    }
    return o;
}
var cat = new Animal("cat", 12);
cat.sayName(); // "cat"
由於返回的對象與建構函式或建構函式的原型之間沒有什麼關係,因此不能依賴instanceof操作符來確定物件類型。

建議在可以使用其他模式的情況下,不能使用這種模式。

七. 穩妥建構函式模式

穩妥建構函式模式與寄生建構函式模式類似,但有兩點不同:

一是新建立對象的執行個體方法不引用this;
二是不適用new操作符調用建構函式。
function Animal(name, age) {
    var o = new Object();
    o.name = name;
    o.age = age;
    var msg = "Hello, I'm ";
    o.sayName = function() {
        alert(msg + this.name);
    }
    return o;
}
var cat = new Animal("cat", 12);
cat.sayName(); // "Hello, I'm cat"
穩妥建構函式模式適合在某些安全執行環境。

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.