建立物件的幾種模式

wangxiaoling315發表於2018-11-02
物件模式

一般建立物件是用以下兩種方式

new object建立物件：

var Person = new Object();
Person.name = "張三";
Person.age = "18";
Person.job = "123";

或者，物件字面量的方式：

var Person = {
    name:"lisi",
    age:"18",
    job:"123"
}

這兩種方式的缺點是：同一個介面建立很多物件，會產生大量的重複程式碼，如var Person1={}，var Person2={}，為了解決這個問題，人們開始使用工廠模式的一種變體來建立物件。

一、工廠模式

由於在ECMAScript中無法建立類，開發人員就發明了一種函式，用函式來封裝以特定介面建立物件的細節，如下圖：

function creatPerson(name,age,job){
    var a = new Object();
    a.name = name;
    a.age = age;
    a.job = job;
    return a;
}
var person2 = creatPerson("lisi","17","456");

使用工廠模式建立物件，無論建立多少個物件，都只需要呼叫creatPerson（）函式，並傳入相關引數即可。但是工廠模式也留下了一個問題，就是無法區分建立物件型別是什麼，在ECMAScript 中的建構函式可用來建立特定型別的物件 。

二、建構函式模式

function Person(name,age,job){
    this.name = name;
    this.age = age;
    this.job = job;
    this.sayName = function(){
        alert(this.name);
    }
}
var person1 = new Person("lisi","18","123");

建立自定義的建構函式，從而定義自定義物件型別的屬性和方法 。建構函式也是函式，它與普通函式唯一的區別就是呼叫方式不同。任何函式，只要用new操作符來呼叫，那它就可以作為建構函式。
缺點：函式即物件，sayName 是匿名函式物件；每呼叫例項化一次建構函式就會建立一個匿名函式物件，不同例項上的同名函式是不相等的，佔用記憶體。

三、原型模式

理解原型：只要建立了一個新函式，就會根據一組特定的規則為該函式建立一個 prototype屬性，這個屬性指向函式的原型物件。
在預設情況下，所有原型物件都會自動獲得一個 constructor（建構函式）屬性，這個屬性包含一個指向 prototype 屬性所在函式的指標。

function Person(){

}
Person.prototype = {
    constructor:Person,
    name:"張三",
    age:"18",
    job:"123",
    friends: [`小明`, `小剛`],
    sayName:function(){
        alert(this.name);
    }
}
var person1 = new Person();

這裡將 Person.prototype 設定為以物件字面量的形式建立的新物件，由於每建立一個新物件，就會同時建立它的 prototype原型物件，
這個物件也會自動獲得 constructor 屬性，這個constructor指向這個新建立的object物件，而不是Person物件，為了使其指向Person，
需新增 constructor:Person

原型模式的缺點：

var p1 = new Person();
var p2 = new Person();
p2.name = `李四`;
p1.friends.push(`小紅`);// 指向同一個friends陣列，修改的是原型中的friends
console.log(p1.friends);//["小明", "小剛", "小紅"]
console.log(p2.friends);//["小明", "小剛", "小紅"]
console.log(p1.friends == p2.friends);//true

缺點1：省略了為建構函式傳遞初始化引數這一環節，結果所有例項在預設情況下都將取得相同的屬性值

缺點2：對於原生建構函式（Object、Array等）的缺點：

p1的friends和p2的friends相同，因為p1修改了原型物件的friends，但我們需要的是它們不應該相同，
解決辦法：將需要共享的屬性或方法在原型中定義，將不需要共享的如：friends，在建構函式中定義

四、組合使用建構函式和原型模式

建構函式模式用於定義例項屬性，而原型模式用於定義方法和共享的屬性。結果，每個例項都會有自己的一份例項屬性的副本，但同時又共享著對方法的引用，最大限度地節省了記憶體。

function Person(name,age,job){
    this.name = name;
    this.age = age;
    this.job = job;
    this.friends: = [`小明`, `小剛`],
}
Person.prototype = {
    constructor:Person,
    sayName:function(){
        alert(this.name);
    }
}

 

 

 

相關文章