爲什麼這個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的提交按鈕，看起來像isValid方法正在爲c2跑，而不是c1像我期待。任何想法爲什麼這樣做？

有幾件事情需要注意：

• 如果我增加更多captcha實例和HTML，每一個提交按鈕會就captcha上點擊最後一個實例運行isValid。
• 這需要爲IE8 +

這裏工作是在行動代碼的fiddle。

任何幫助將不勝感激。謝謝！

Answer 1

雖然@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; 

Answer 2

c1和c2都是同一個對象。使用Object.create來創建不同的實例。舊版瀏覽器不支持Object.create，但是我提供的鏈接中有一個填充。

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

Answer 3

您還可以執行對象的深層副本。

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