javascript - Webpack 类不共享 this 从构造函数到类的方法
问题描述
我正在尝试使用 Webpack 和 JS 定义一个类。在构造函数中,我可以访问数据,但是在将数据分配给之后,类中this.t
的this.t
未来方法中没有数据。这是课程:
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 是不可访问的。
如何解决这个问题?
解决方案
在类构造函数中绑定解析器方法,在类方法内访问类的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;
});
}
}
推荐阅读
- docker - 如何避免在 dockerhub 上上传基础镜像?
- c# - 如果我使用 ControlTemplate,WPF ToggleButton 在检查时消失
- javascript - Vue Router 只应用一次活动类,不再应用
- flutter - Flutter StreamBuilder
不将值传递给子 StreamBuilder - graphql - 使用 Apollo 服务器作为客户端查询的传递
- apache - Apache Brooklyn 是如何拉取项目指标的?
- visual-studio-code - VS Code Jupyter Notebooks Markdown 链接不起作用
- javascript - 如何使部分不可编辑的表格单元格与内联 JavaScript 函数兼容?
- javascript - 使用 wrap/unwrap 阅读更多信息
- html - 如何垂直对齐多个链接中的文本