Передача объекта в качестве параметра функции конструктора и копирование его свойств в новый объект?

У меня есть JavaScript-конструктор:

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

который я хочу передать объекту в качестве параметра следующим образом:

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

и дает мне что-то вроде этого:

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

но я хотел бы, чтобы свойства были непосредственно на объекте следующим образом:

box.prop1
box.prop2
box.prop3

Я знаю, что могу сделать что-то вроде этого:

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

Но это не хорошо, потому что тогда мой конструктор должен "знать" перед именами свойств параметра объекта. Я хотел бы иметь возможность передавать разные объекты в качестве параметров и напрямую назначать их свойства в качестве свойств нового настраиваемого объекта, созданного конструктором, поэтому я получаю box.propX, а не box.obj.propX. Надеюсь, я даю себе понять, возможно, я ощущаю что-то очень очевидное, но я новичок, поэтому, пожалуйста, нужна ваша помощь!

Спасибо заранее.

Ответ 1

Вы можете это сделать. Вероятно, также есть способ jquery...

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

Вы можете включить тест для hasOwnProperty, если у вас (я думаю, глупо) расширенный объект

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

Edit

А, ха! it jQuery.extend

Итак, путь jQuery:

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

Ответ 2

Просто поставьте это в свой конструктор

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

Ответ 3

Вот пример с шаблоном модуля 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);
});