Truyền đối tượng làm tham số cho hàm dựng và sao chép các thuộc tính của nó sang đối tượng mới?

Question

Tôi có một constructor JavaScript như thế này:

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

mà tôi muốn vượt qua một đối tượng như một tham số như thế này:

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

và mang lại cho tôi một cái gì đó như thế này:

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

nhưng tôi muốn các thuộc tính được trực tiếp trên đối tượng như thế này:

box.prop1 
box.prop2 
box.prop3 

Tôi biết tôi có thể làm một cái gì đó như thế này:

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

Nhưng điều đó là không tốt bởi vì khi đó nhà xây dựng của tôi sẽ phải "biết" trước tên của các thuộc tính của các tham số đối tượng. Những gì tôi muốn là để có thể vượt qua các đối tượng khác nhau như các tham số và gán trực tiếp các thuộc tính của chúng như là các thuộc tính của đối tượng tùy chỉnh mới được tạo bởi hàm tạo nên tôi nhận được box.propX và không box.obj.propX. Hy vọng tôi đang làm cho bản thân mình rõ ràng, có lẽ tôi đang measing một cái gì đó rất rõ ràng nhưng tôi là một newbie vì vậy xin vui lòng giúp đỡ của bạn!

Xin cảm ơn trước.

Answer 1

Bạn có thể thực hiện việc này. Có lẽ cũng là một cách jquery ...

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

Bạn có thể bao gồm một thử nghiệm cho hasOwnProperty nếu bạn đã (Tôi nghĩ dại dột) mở rộng đối tượng

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

Sửa

Ah , ha! nó jQuery.extend

Vì vậy, cách jQuery là:

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

Answer 2

một cách đơn giản này trong constructor của bạn

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

Answer 3

Dưới đây là một ví dụ với các module mẫu 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); 
});