为什么这个 javascript 对象引用了前一个对象的属性？

Question

我正在创建一个可以在页面上创建任意数量的验证码的类。我有一个captcha 类，用于实例化新的验证码对象c1 和c2。这是我的 JS：

 $(function(){
    var captcha = {
        parentForm : '',
        container : '',
        captcha_input : '',
        number1 : 0,
        number2 : 0,

        createCaptcha : function(form_ID){
            var newHtml;
            this.parentForm = $('#' + form_ID);
            this.container = this.parentForm.find('.captchaContainer');
            this.number1 = this.randomNumber(10);
            this.number2 = this.randomNumber(10);


            newHtml = 'What does ' + this.number1 + ' plus ' + this.number2 + ' equal? <b class="required goldenrod" title="Required Field">*</b><br/><br/><input type="text" name="captcha">';
            this.container.html(newHtml);
        },

        isValid : function(){
            console.log(this.container);
            this.captcha_input = this.container.find('input[name="captcha"]');
            if (this.number1 + this.number2 == this.captcha_input.val()) {
                this.captcha_input.css('background-color', '')
                return true;
            } else{
                this.captcha_input.css('background-color', '#FFCCCC')
                alert(this.number1 + ' plus ' + this.number2 + ' does not equal ' + this.captcha_input.val() + '. Please try again.');
                this.captcha_input.focus();
                return false;
            }
        },

        randomNumber : function(max){ return Math.floor(Math.random()*(max+1)); }
    }


    var c1 = captcha,
        c2 = captcha;

    c1.createCaptcha("form1");
    c2.createCaptcha("form2");

    $('#form1 input[type="submit"]').click(function() { 
        if(c1.isValid()){
            alert('Captcha is valid!');
        }else{
            return false;
        }
    });
    $('#form2 input[type="submit"]').click(function() { 
        if(c2.isValid()){
            alert('Captcha is valid!');
        }else{
            return false;
        }
    });


});

还有我的 HTML：

<form id="form1">
    <div class="captchaContainer"></div>
    <input type="submit">
</form>
<form id="form2">
    <div class="captchaContainer"></div>
    <input type="submit">
</form>

当我单击form1 的提交按钮时，似乎正在为c2 运行isValid 方法，而不是像我预期的那样为c1 运行。知道为什么会这样吗？

需要注意的几点：

• 如果我添加更多 captcha 实例和 HTML，每个提交按钮将在单击时在 captcha 的最后一个实例上运行 isValid。
• 这需要适用于 IE8+

这是代码的fiddle。

任何帮助将不胜感激。谢谢！

Answer 1

c1 和 c2 都是同一个对象。使用Object.create 创建不同的实例。旧浏览器不支持Object.create，但是我提供的链接中有一个polyfill。

var c1 = Object.create(captcha),
    c2 = Object.create(captcha);

Answer 2

您还可以执行对象的深层复制。

 function deepCopy(obj) { 
     var res = {};
     for (var key in obj) {
         if (obj.hasOwnProperty(key)) {
             res[key] = obj[key];
         };
     }
     res.prototype = obj.prototype; // this would make it a deep copy.
     return res;
};
var c1 = deepCopy(captcha);

Answer 3

虽然@plalx 有一个有效的答案，但对于我的场景来说，这并不是一个理想的答案。由于我无法实例化从对象字面量创建的类（不使用 Object.create），因此我决定使用函数重构我的类：

$(function(){
    var Captcha = function(){
        var parentForm = '',
            container = '',
            captcha_input = '',
            number1 = 0,
            number2 = 0,

            createCaptcha = function(form_ID){
                var newHtml;
                this.parentForm = $('#' + form_ID);
                this.container = this.parentForm.find('.captchaContainer');
                this.number1 = randomNumber(10);
                this.number2 = randomNumber(10);


                newHtml = 'What does ' + this.number1 + ' plus ' + this.number2 + ' equal? <b class="required goldenrod" title="Required Field">*</b><br/><br/><input type="text" name="captcha">';
                this.container.html(newHtml);
            },

            isValid = function(){
                this.captcha_input = this.container.find('input[name="captcha"]');
                if (this.number1 + this.number2 == this.captcha_input.val()) {
                    this.captcha_input.css('background-color', '')
                    return true;
                } else{
                    this.captcha_input.css('background-color', '#FFCCCC')
                    alert(this.number1 + ' plus ' + this.number2 + ' does not equal ' + this.captcha_input.val() + '. Please try again.');
                    this.captcha_input.focus();
                    return false;
                }
            },

            randomNumber = function(max){ return Math.floor(Math.random()*(max+1)); }

            return{
                createCaptcha : createCaptcha,
                isValid : isValid
            }
    }


    // Instantiation of Captcha objects
    var c1 = new Captcha,
        c2 = new Captcha;

    c1.createCaptcha("form1");
    c2.createCaptcha("form2");

    $('#form1 input[type="submit"]').click(function() { if(c1.isValid()){ alert('Captcha is valid!'); }else{ return false; } });
    $('#form2 input[type="submit"]').click(function() { if(c2.isValid()){ alert('Captcha is valid!'); }else{ return false; } });

});

这是新的工作fiddle

TLDR：由于没有Object.create，无法实例化对象字面量，因此我使用了一个函数来创建类，然后像这样实例化：

var c1 = new Captcha,
    c2 = new Captcha;