Question

我有一个像这样的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;
}

但这并不好，因为我的构造函数必须在object参数的属性名称之前“知道”。我想要的是能够将不同的对象作为参数传递并将其属性直接指定为构造函数创建的新自定义对象的属性，因此我得到box.propX而不是box.obj.propX。希望我能让自己明白，也许我正在测量非常明显的东西，但我是新手，所以请你帮忙！

提前致谢。

Answer 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];
     }
   }
 }

修改

啊，哈！它是jQuery.extend

所以，jQuery方式是：

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

Answer 2

只需将其放入构造函数

即可

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

Answer 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);
});

Answer 4

真的很短

function Box(obj) {
  Object.assign(this, obj);
}

将对象作为参数传递给构造函数并将其属性复制到新对象？

4 个答案: