javascript 链式函数 报错提示 this undefined ?

Question

想创建一个可格式化数字的链式函数。但在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 }

Answer 1

Decimal.prototype.toString 改为一个普通函数（不用箭头函数）。箭头函数的 this 不随调用者改变。关于 this，参阅：JavaScript 的 this 指向问题深度解析 - SegmentFault 思否

另外，使用 class 语法的时候，一般不需要再补 prototype 语法的方法。toString() 完全可以定义在类定义中去，

class Decimal {
    // ... 原来定义的方法
    toString() {
        // 把外面的 toString 搬进来
    }
}

再者，对于 Decimal 方法定义中的 this.prefix 和 Decimal.prefix 完全是不同的两个东西。前者是挂在对象（类实例）上的，后者是挂在类上的

Answer 2

把箭头函数改成普通函数就好了， 箭头函数的this是定义函数的作用域的this，在这里是顶层模块，this是undefined。