多個構造函數的JavaScript模式

Question

我需要不同的構造函數用於我的實例。什麼是常見的模式？

Answer 1

你怎麼找到這個？

function Foobar(foobar) { 
    this.foobar = foobar; 
} 

Foobar.prototype = { 
    foobar: null 
}; 

Foobar.fromComponents = function(foo, bar) { 
    var foobar = foo + bar; 
    return new this(foobar); 
}; 

Answer 2

有時，參數的默認值對於多個構造函數來說已經足夠了。如果這還不夠，我嘗試將大部分構造函數包裝到一個以後調用的init（other-params）函數中。還可以考慮使用工廠概念來創建一個可以有效創建所需其他對象的對象。

http://en.wikipedia.org/w/index.php?title=Factory_method_pattern&oldid=363482142#Javascript

Answer 3

JavaScript沒有函數重載，包括對方法或構造函數。

如果您希望函數的行爲有所不同，具體取決於傳遞給它的參數的數量和類型，您必須手動嗅探它們。 JavaScript會高興地調用一個函數，它的聲明數量比聲明數量多或少。

function foo(a, b) { 
    if (b===undefined) // parameter was omitted in call 
     b= 'some default value'; 

    if (typeof(a)==='string') 
     this._constructInSomeWay(a, b); 
    else if (a instanceof MyType) 
     this._constructInSomeOtherWay(a, b); 
} 

您也可以訪問arguments爲陣列狀，以獲得通過的任何進一步的論證。

如果您需要更復雜的參數，它可以是一個好主意，把一些或全部的內對象查找：

function bar(argmap) { 
    if ('optionalparam' in argmap) 
     this._constructInSomeWay(argmap.param, argmap.optionalparam); 
    ... 
} 

bar({param: 1, optionalparam: 2}) 

的Python演示瞭如何默認和命名參數可用於覆蓋大多數使用情況比函數重載更實用和優雅的方式。 JavaScript，並非如此。

Answer 4

與eruciform的回答進一步說，你可以鏈接您的通話new到您init方法。

function Foo() { 
    this.bar = 'baz'; 
} 

Foo.prototype.init_1 = function (bar) { 
    this.bar = bar; 
    return this; 
}; 

Foo.prototype.init_2 = function (baz) { 
    this.bar = 'something to do with '+baz; 
    return this; 
}; 

var a = new Foo().init_1('constructor 1'); 
var b = new Foo().init_2('constructor 2'); 

Answer 5

不喜歡做手工，如bobince的答案，所以我只是完全扯下jQuery的插件選項模式。

這裏的構造函數：

//default constructor for Preset 'class' 
function Preset(params) { 
    var properties = $.extend({ 
     //these are the defaults 
     id: null, 
     name: null, 
     inItems: [], 
     outItems: [], 
    }, params); 

    console.log('Preset instantiated'); 
    this.id = properties.id; 
    this.name = properties.name; 
    this.inItems = properties.inItems; 
    this.outItems = properties.outItems; 
} 

這裏的實例不同的方式：

presetNoParams = new Preset(); 
presetEmptyParams = new Preset({}); 
presetSomeParams = new Preset({id: 666, inItems:['item_1', 'item_2']}); 
presetAllParams = new Preset({id: 666, name: 'SOpreset', inItems: ['item_1', 'item_2'], outItems: ['item_3', 'item_4']}); 

及這裏的做什麼：

presetNoParams 
Preset {id: null, name: null, inItems: Array[0], outItems: Array[0]} 

presetEmptyParams 
Preset {id: null, name: null, inItems: Array[0], outItems: Array[0]} 

presetSomeParams 
Preset {id: 666, name: null, inItems: Array[2], outItems: Array[0]} 

presetAllParams 
Preset {id: 666, name: "SOpreset", inItems: Array[2], outItems: Array[2]} 

Answer 6

所以，是像以前那樣措辭，多種解決方案，你在日常生活中看到的一般是靜態方法：

Date.UTC("some params"); 

這並不是雖然適當的構造，這是雖然

function someObject(a,b,c,d,e,f) { 
a = a || "default"; 
b = b || "defaultb" 
} 

可以去打字稿或transpile它ES5？

constructor(a:string, b = "default value", c:number? //optional 
) { 

} 

Answer 7

這是在Programming in HTML5 with JavaScript and CSS3 - Exam Ref中爲多個構造函數給出的示例。

function Book() { 
    //just creates an empty book. 
} 


function Book(title, length, author) { 
    this.title = title; 
    this.Length = length; 
    this.author = author; 
} 

Book.prototype = { 
    ISBN: "", 
    Length: -1, 
    genre: "", 
    covering: "", 
    author: "", 
    currentPage: 0, 
    title: "", 

    flipTo: function FlipToAPage(pNum) { 
     this.currentPage = pNum; 
    }, 

    turnPageForward: function turnForward() { 
     this.flipTo(this.currentPage++); 
    }, 

    turnPageBackward: function turnBackward() { 
     this.flipTo(this.currentPage--); 
    } 
}; 

var books = new Array(new Book(), new Book("First Edition", 350, "Random"));