如何在ES6类的jQuery Validator自定义方法中正确替换this？

我完全懂你碰到的这个坑——在类方法里给jQuery Validator加自定义验证规则时，this的指向完全不是你想要的。咱们一步步捋清楚怎么搞定：

首先，你用箭头函数写验证逻辑就是问题的核心：箭头函数不会生成自己的this上下文，它会直接继承外层（也就是你的Popups类实例）的this，所以你调用this.optional的时候，其实是在找Popups实例上的方法，而非jQuery Validator实例的方法。

解决方案：把箭头函数换成普通函数 #

jQuery Validator在调用自定义验证方法时，会自动把this绑定到它自身的validator实例上，但这个绑定只对普通函数生效。把箭头函数改成普通函数后，this就会自动指向正确的validator上下文：

class Popups {
  constructor(selector) {
    this.app = selector;
  }
  validate() {
    $.validator.addMethod('atLeastOneLowercaseLetter', function(value, element) {
      // 现在this指向jQuery Validator实例，能正常调用optional方法了
      return this.optional(element) || /[a-z]+/.test(value);
    }, 'Must have at least one lowercase letter' );
  }
}

为什么直接用$.validator.optional会报错？ #

optional是Validator实例专属方法，不是挂载在$.validator上的静态方法。它需要依赖具体validator实例的上下文来判断元素是否可选，所以直接通过$.validator调用肯定会报“不是函数”的错误。

这么调整之后，你的验证方法就能正确访问到jQuery Validator的上下文，this.optional也能正常工作了。

内容的提问来源于stack exchange，提问作者Роман Татаринов