原型函数中未定义的变量答案

【问题标题】：Undefined variable in prototype function原型函数中未定义的变量
【发布时间】：2015-11-08 13:40:46
【问题描述】：

我正在学习 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 字段。我不明白为什么会这样。

【问题讨论】：

标签： validation prototype javascript-objects dom-events

【解决方案1】：

问题是当您使用

实例化新验证时

var obj = new Validate('user');

每次调用 obj.addValidation() 时，this 都会引用同一个对象，以及如何在原型的 addValidate 方法中存储字段、条件、消息，最后调用的任何内容都将分配给 this。

保持相同功能的一种简单方法是在 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);
  }
}

【讨论】：