javascript - Webpack 类没有从构造函数到类的方法共享 this

Question

我正在尝试使用 Webpack 和 JS 定义一个类。 在构造函数中，我可以访问数据，但将数据分配给 this.t 后this.t类中 future 的方法中没有数据。这是类(class):

module.exports = class JoiCustomErrors {

  constructor(t) {
    this.t = t;
    console.log(this.t); // the wanted object info
  }

  parser(errors) {
    console.log(this.t); // undefined
    return errors.map(err => {
      err.message = ({
        "string.base": `${this.t['This field is required']}`,
        "string.min": `${this.t['Minimum']} ${err.context.limit} ${this.t['chars']}`,
        "string.max": `${this.t['Maximum']} ${err.context.limit} ${this.t['chars']}`,
        "any.empty": `${this.t['This field is required']}`,
        "any.required": `${this.t['This field is required']}`,
        "number.min": `${this.t['Should be greater than']} ${err.context.limit}`,
        "number.max": `${this.t['Should be less than']} ${err.context.limit}`,
        "number.base": `${this.t['Digits only']}`,
        "date.base": `${this.t['Date format must be']} yyyy-mm-dd`,
        "date.isoDate": `${this.t['Date format must be']} yyyy-mm-dd`,
        "date.min": `${this.t['Should be later than']} ${err.context.limit}`,
        "date.max": `${this.t['Should be earlier than']} ${err.context.limit}`,
        "any.allowOnly": `${this.t['Unknown value']}`,
        "array.max": `${this.t['Maximum']} ${err.context.limit} ${this.t['Items']}`,
        "array.min": `${this.t['Minimum']} ${err.context.limit} ${this.t['Items']}`,
        "array.includesRequiredUnknowns": `${this.t['Minimum']} 1 ${this.t['Items']}`,
      })[err.type];

      if (err.type=="string.regex.name") {
        if (err.context.name=="alphabeta") err.message = `${this.t['Letters only']}`;
        if (err.context.name=="alphanum") err.message = `${this.t['Letters and digits only']}`;
        if (err.context.name=="num") err.message = `${this.t['Digits only']}`;
        if (err.context.name=="latin") err.message = `${this.t['Entered invalid chars']}`;
        if (err.context.name=="username") err.message = `${this.t['Letters and digits only in english']}`;
      }

      return err;
    });
  }

}

这就是我的设置方式:

let jce = new JoiCustomErrors($rootScope.t);
      let schema = Joi.object().keys({
        first_name: Joi.string().min(2).max(5).required().error(jce.parser)
      });
      Joi.validate({first_name: "a"}, schema, { abortEarly: false }, err => {
        console.log(err);
        return err;
      });

上面的代码将错误发送到 JoiCustomErrors 类中的解析器方法。

但是实例声明中声明的 $rootScope.t 不可访问。

如何解决这个问题？

Answer 1

在类构造函数中绑定(bind)解析器方法，以在类方法内访问类的 this

module.exports = class JoiCustomErrors {

  constructor(t) {
    this.t = t;
    this.parser = this.parser.bind(this);
  }

  parser(errors) {
    console.log(this.t);
    return errors.map(err => {
      err.message = ({
        "string.base": `${this.t['This field is required']}`,
        "string.min": `${this.t['Minimum']} ${err.context.limit} ${this.t['chars']}`,
        "string.max": `${this.t['Maximum']} ${err.context.limit} ${this.t['chars']}`,
        "any.empty": `${this.t['This field is required']}`,
        "any.required": `${this.t['This field is required']}`,
        "number.min": `${this.t['Should be greater than']} ${err.context.limit}`,
        "number.max": `${this.t['Should be less than']} ${err.context.limit}`,
        "number.base": `${this.t['Digits only']}`,
        "date.base": `${this.t['Date format must be']} yyyy-mm-dd`,
        "date.isoDate": `${this.t['Date format must be']} yyyy-mm-dd`,
        "date.min": `${this.t['Should be later than']} ${err.context.limit}`,
        "date.max": `${this.t['Should be earlier than']} ${err.context.limit}`,
        "any.allowOnly": `${this.t['Unknown value']}`,
        "array.max": `${this.t['Maximum']} ${err.context.limit} ${this.t['Items']}`,
        "array.min": `${this.t['Minimum']} ${err.context.limit} ${this.t['Items']}`,
        "array.includesRequiredUnknowns": `${this.t['Minimum']} 1 ${this.t['Items']}`,
      })[err.type];

      if (err.type=="string.regex.name") {
        if (err.context.name=="alphabeta") err.message = `${this.t['Letters only']}`;
        if (err.context.name=="alphanum") err.message = `${this.t['Letters and digits only']}`;
        if (err.context.name=="num") err.message = `${this.t['Digits only']}`;
        if (err.context.name=="latin") err.message = `${this.t['Entered invalid chars']}`;
        if (err.context.name=="username") err.message = `${this.t['Letters and digits only in english']}`;
      }

      return err;
    });
  }

}