Passare oggetto come parametro alla funzione di costruzione e copiare le sue proprietà nel nuovo oggetto?

Question

Ho un costruttore di JavaScript come questo:

function Box(obj) { 
    this.obj = obj; 
} 

che voglio passare un oggetto come un parametro come questo:

var box = new Box({prop1: "a", prop2: "b", prop3: "c"}) 

e mi dà qualcosa di simile:

box.obj.prop1 
box.obj.prop2 
box.obj.prop3 

ma vorrei che le proprietà fossero direttamente sull'oggetto in questo modo:

box.prop1 
box.prop2 
box.prop3 

So che potrei fare qualcosa di simile:

function Box(obj) { 
    this.prop1 = obj.prop1; 
    this.prop2 = obj.prop2; 
    this.prop3 = obj.prop3; 
} 

Ma questo non è un bene, perché allora la mia costruttore avrebbe dovuto "sapere" prima che i nomi delle proprietà del parametro oggetto. Quello che vorrei è essere in grado di passare diversi oggetti come parametri e assegnare le loro proprietà direttamente come proprietà del nuovo oggetto personalizzato creato dal costruttore in modo da ottenere box.propX e non box.obj.propX. Spero di essere chiaro, forse sto misurando qualcosa di molto ovvio, ma sono un novizio quindi per favore hai bisogno del tuo aiuto!

Grazie in anticipo.

Answer 1

Si potrebbe fare questo. Probabilmente c'è anche un modo jQuery ...

function Box(obj) { 
    for (var fld in obj) { 
    this[fld] = obj[fld]; 
    } 
} 

È possibile includere un test per hasOwnProperty se hai (penso stupidamente) esteso oggetto

function Box(obj) { 
    for (var fld in obj) { 
    if (obj.hasOwnProperty(fld)) { 
     this[fld] = obj[fld]; 
    } 
    } 
} 

Modifica

Ah , ah! è jQuery.extend

Quindi, il modo jQuery è:

function Box(obj) { 
    $.extend(this, obj); 
} 

Answer 2

In poche parole questo nel costruttore

for (var prop in obj) { 
    if (obj.hasOwnProperty(prop)) { 
     this[prop] = obj[prop]; 
    } 
    } 

Answer 3

Ecco un esempio con il modello di modulo di javascript:

var s, 
NewsWidget = { 

    settings: { 
    numArticles: 5, 
    articleList: $("#article-list"), 
    moreButton: $("#more-button") 
    }, 

    init: function(options) { 
    this.settings = $.extend(this.settings, options); 
    s = this.settings; 
    this.bindUIActions(); 
    }, 

    bindUIActions: function() { 
    s.moreButton.on("click", function() { 
     NewsWidget.getMoreArticles(s.numArticles); 
    }); 
    }, 

    getMoreArticles: function(numToGet) { 
    // $.ajax or something 
    // using numToGet as param 
    } 

}; 

$(function(){ 
    NewsWidget.init({ 
    numArticles: 6 
    }); 

    console.log(s.numArticles); 
});