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

想创建一个可格式化数字的链式函数。但在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 }
阅读 2.3k
2 个回答

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

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

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

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

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

推荐问题
宣传栏