想创建一个可格式化数字的链式函数。但在toString 中使用this就会报错,提示 this undefined。
class Decimal {
constructor(val) {
this.value = val
this.prefix = ''
this.color = ''
}
withPrefix = () => {
if (this.value > 0) {
this.prefix = '+'
} else if (this.value < 0) {
this.prefix = '-'
}
return this
}
withColor = () => {
if (this.value > 0) {
this.color = 'red'
} else if (this.value < 0) {
this.color = 'green'
}
return this
}
}
Decimal.prototype.toString = () => {
let output = Number(this.value).toLocaleString()
if (this.prefix) {
output = Decimal.prefix + output
}
if (this.color) {
output = '<span style="color:' + this.color + '">' + output + '</span>'
}
return output
}
// 这个是对外的函数
const decimal = (val) => {
return new Decimal(val)
}
export { decimal }
Decimal.prototype.toString
改为一个普通函数(不用箭头函数)。箭头函数的this
不随调用者改变。关于this
,参阅:JavaScript 的 this 指向问题深度解析 - SegmentFault 思否另外,使用 class 语法的时候,一般不需要再补 prototype 语法的方法。
toString()
完全可以定义在类定义中去,再者,对于 Decimal 方法定义中的
this.prefix
和Decimal.prefix
完全是不同的两个东西。前者是挂在对象(类实例)上的,后者是挂在类上的