动态创建对象的实例答案

【问题标题】：Dynamically create an instance of an object动态创建对象的实例
【发布时间】：2013-10-20 15:47:31
【问题描述】：

我正在尝试创建一个简单的接口来生成 JSON 格式的数据。可以成功添加第一个对象。但是当我尝试添加另一个（将其附加到“myDict”数组对象：请参见下面的代码）时，原始对象的值被覆盖，并且我似乎也添加了一个空键/值对。

我猜这与每次将新对象添加到“myDict”时不创建“createObj”对象的新实例有关。所以，我试图找出如何动态创建新实例。到目前为止，这是我的代码：

// VARIABLES
var myDict = [];

// CLASSES
function createObj() {
    this.myObj = {};
}
createObj.prototype.newPair = function() {
    this.newKey = document.getElementById('key').value;
    this.newValue = document.getElementById('value').value;
    this.myObj[this.newKey] = this.newValue;

    console.log(this.myObj);

    document.getElementById('key').value = null;
    document.getElementById('value').value = null;
    document.getElementById('key').focus();
}
createObj.prototype.addIt = function() {
    myDict.push(this.myObj);
    console.log(myDict);
}

// ACTIONS
$('#createNew').click(function() {
    $('#item').show();
    var myItem = new createObj();

    $('button#create').click(function() {
        myItem.newPair();
    });

    $('#done').click(function() {
        $('#item').hide();
        myItem.addIt();
    });
});

我在这里查看了一个类似的 Stack Overflow 问题：What is the convention for dynamically creating an object instance?

。 . .但它似乎没有为我的问题提供任何答案。如果有帮助，这里是 JSFiddle：http://jsfiddle.net/mysterexs/rffmV/

注意：JSFiddle 不显示输出，但它为您提供所有代码并提供更多上下文。任何帮助表示赞赏。

【问题讨论】：

标签： javascript json oop

【解决方案1】：

我对 JQuery 知之甚少，但您的问题似乎是您每次都添加一个新的事件处理程序（在第一个事件句柄中），并且它向myItem 添加了额外的属性（因为关闭函数仍然可以访问它），以及数组的额外对象（同样的原因）。做这样的事情：

var myItem;
// ACTIONS
$('#createNew').click(function () {
    $('#item').show();
    myItem = new createObj();

});
$('button#add').click(function () {  
        myItem.newPair();
    });
$('#done').click(function () {
        $('#item').hide();
        myItem.addIt();
    });

为了方便起见，我使用了一个全局变量，您可以找到一些更好的解决方案。

【讨论】：

非常感谢grape_mao。这成功了。我肯定需要更多地研究闭包并更好地理解它们。感谢您的帮助。

【解决方案2】：

您的情况很有趣，因为一方面，您创建了一个类，在该类中定义了原型属性，并实例化了一个类。另一方面，任何时候都只存在一个类的实例，从而使该类变得不必要。通过检查可以直接检测到一些奇怪的行为，即您同时创建一系列文本框并销毁它们，这意味着它们的值将始终保留在一个位置。

Here 是解决这些问题的方法，请记住 HTML 标记已更改以确保 ID 不会在同一页面上重复。

// VARIABLES
var myDict = [];

// CLASSES
function createObj() {
    this.myObj = $('.item').eq(0);
}
createObj.prototype.newPair = function () {
    var newPair = this.myObj.clone();
    $('#container').append(newPair);
    newPair.find('.key').focus();
}
createObj.prototype.addIt = function () {
    myDict = [];
    $('.item').each(function (i, o) {
        var item = $(o);
        myDict.push({
            'key': item.find('.key').val(),
            'value': item.find('.value').val()
        });
    });
    console.log(myDict);
}

// ACTIONS
var myItem = new createObj();
$('.item').hide();

$('#createNew').click(function () {
    $('.item').show();
});
$('#add').click(function () {
    myItem.newPair();
});

$('#done').click(function () {
    $('.item').hide();
    myItem.addIt();
});

【讨论】：