在函数中调用缺少参数的构造函数

Question

在 Knockout 的帮助下，我有一个显示项目的简单列表视图。一组 'Things' 被硬编码到一个数组中，并且 Knockout 在页面加载时列出它们。到目前为止它运行良好。

现在，我想添加一个新函数：newFunc()。将在函数中创建一个具有属性但没有名称的新项目。如果用户愿意，可以稍后将该项目添加到列表中。然后，用户可以为项目命名。

问：在这种情况下，我如何（或者我可以）使用构造函数'Item'在新函数中创建一个新项目？ “Item”函数需要一个参数“item”，但在新函数中，我无法传递参数，因为正在创建新项目并且没有给出名称。我应该如何以不同的方式思考和编码来实现所描述的功能？

任何帮助和提示将不胜感激。

// HTML //

<ul data-bind='foreach: itemList'>
    <li data-bind='text: name'></li>
</ul>

// 脚本 //

var Things = [
    { name: 'name1', property: 'prop1' },
    { name: 'name2', property: 'prop2' },
    ...
];

var Item = function(item) {
    this.name = item.name;
    this.property = item.property;
};

// The new function in Question
var aNewItem;
newFunc = function() {
    // I'd like to create an 'Item' with a given property, but w/o a name.
    aNewItem = new Item(); // ???
    aNewItem.property = 'propertyN'; // **Edit**: also a variable set by user or callback.
};

var viewModel = function {
    self = this;
    self.itemList = ko.observableArray();
    Things.forEach(function(item) {
        self.itemList.push(new Item(item));
    });
};

ko.applyBindings(new viewModel());    

Answer 1

您可以传递一个只有property 属性的对象。

aNewItem = new Item({
  property: 'propertyN'
});

Answer 2

您有几个选择（按照我采用的最佳实践顺序）：

在构造函数中使用默认选项

您可以通过在赋值中使用||（或）运算符为构造函数的属性指定默认选项（= 如果|| 之前的值是假的，则分配之后的值）。如果您有一个对象作为参数（这是最简单的），您可以将未传递的项目重新分配给一个空对象，这样可以更轻松地测试其属性。

var Item = function(item) {
    var item = item || {};
    this.name = item.name || '';
    this.property = item.property || 'propertyN';
};

在调用者中使用默认选项 (newFunc)

虽然我认为使用前面显示的默认值更简洁，但也可以在调用构造函数的函数中指定它们：

newFunc = function() {
    aNewItem = new Item({property: 'propertyN'});
};

或者，如果您在构造函数中指定了默认值，您的函数将在其当前状态下正常工作。

仅添加项目参数指定的属性

您还可以选择使用for..in 循环添加项目中给出的所有属性。免责声明：我不建议这样做，因为它使使用构造函数变得毫无意义。

var Item = function(item) {
    var item = item || {};
    for (var prop in item) 
      this[prop] = item[prop];
};

你可以这样做：

newFunc = function() {
    aNewItem = new Item({property: 'propertyN', foo: 'foo'});
    bNewItem = new Item(); 
    console.log(aNewItem.foo); // 'foo'
    console.log(bNewItem['whatever']); // undefined
};