JS 建立例項物件的四種模式

需求

完成滿足如下要求的函式：

1. 返回一個物件
2. 物件的 greeting 屬性值等於 str1， name 屬性值等於 str2
3. 物件存在一個 sayIt 方法，該方法返回的字串為 greeting屬性值 + ‘, ‘ + name屬性值

分析

js的原型系統，主要包含以下三個基本元素

屬性

1. prototype
2. __ proto __
3. constructor

原則

1. 只有函式物件有prototype屬性
2. 變數的__ proto __屬性返回的是它的建構函式的原型物件
3. 變數的constructor屬性返回的是它的建構函式

原型模式

function createModule(str1, str2) {
    function Obj()
    {
        this.greeting = str1;
        this.name = str2;
    }
    Obj.prototype.sayIt = function(){return this.greeting + ", " + this.name;}
    return new Obj(); 
}

建構函式

function createModule(str1, str2) {
    function Obj()
    {
        this.greeting = str1;
        this.name = str2;
        this.sayIt = function(){return this.greeting + ", " + this.name;}
    }
    return new Obj();   
}

建立物件

function createModule(str1, str2) {
        obj = new Object;
        obj.greeting = str1;
        obj.name = str2;
        obj.sayIt = function(){return this.greeting + ", " + this.name;}
        return obj;  
}

字面量

function createModule(str1, str2) {
    var obj =
            {
                greeting : str1,
                name : str2,
                sayIt : function(){return this.greeting + ", " + this.name;}
            };
    return obj;   
}

小結

原型模式與建構函式區別在於，前者原型方法是共享的，後者建構函式內的方法則是拷貝。而Object類與字面量模式，後者只不過是簡寫，使用了包裝器。

本作品採用《CC 協議》，轉載必須註明作者和本文連結