原型函數中的未定義變量

Question

我正在學習js中的oops，並正在使用原型開發編寫簡單的驗證類。我不知道爲什麼我在validateField函數中獲得undefined variable field。但是，我可以在addListener function中訪問這個變量。 有人可以解釋爲什麼變量未定義和幫助。 下面是我的代碼：

var Validate = function(formId){ 
    this.form=formId; 
} 

Validate.prototype.addValidation=function(field,condition,message){ 
    this.field=field; 
    this.condition=condition; 
    this.message=message; 
    this.objform=document.getElementById(this.form); 
    this.addListener(); 
} 

Validate.prototype.addListener=function(){ 
    console.log(this.objform); 
    document.addEventListener("submit",this.validateField,false); 
} 

Validate.prototype.validateField= function(e){ 
    e.preventDefault(); 
    alert(this.field); 
} 


$(document).ready(function() { 
    var obj=new Validate('user'); 
    obj.addValidation('fname','req','Field is Required'); 
}) 

I am able to solve my problem by binding "this" using  
addEventListener("submit",this.validateField.bind(this),false);  

但現在的問題是，當我嘗試調用addValidation方法一對夫婦通過不同的字段名時間 - 例如'fname'和'lname' - 我收到顯示lname這兩個時間的警報消息，因此覆蓋了fname字段。我不明白爲什麼會出現這種情況。

Answer 1

的問題是，當你實例化一個新的驗證與

var obj = new Validate('user'); 

這將引用調用obj.addValidation（同一個對象每次），你是如何存儲在你的領域，條件，消息原型上的addValidate方法將被分配給這個。

保持相同功能的一種簡單方法是在包含此信息的addValidate方法中可能存儲一個對象。

Validate.prototype.addValidation=function(field,condition,message){ 
    // don't overwrite existing validation rules added 
    this.validations = this.validations || {}; 

    // no need to keep two values of field saved, can use key names if you need to know field names saved 
    this.validations[field] = { 
    condition: condition, 
    message: message 
    }; 

    this.objform=document.getElementById(this.form); 
    this.addListener(); 
} 

Validate.prototype.validateField= function(e){ 
    e.preventDefault(); 
    // you would no longer call this.field, but would reference this.validations with either a for in loop, 
    // or Object.keys 
    Object.keys(this.validations).forEach(function(fieldName) { 
    alert(fieldName); 
    } 
}