console.log输出类实例时显示checkstock方法，求原因及解决办法

问题原因 #

你用箭头函数定义类方法的写法，本质是在类的实例上直接添加了checkstock属性，而非把方法挂载到Product的原型链上。

箭头函数作为类字段，会在每个实例创建时，以this.checkstock = () => {...}的形式被添加为实例自身的属性，所以打印实例时，它会和id、name这些属性一起显示。而标准类方法是挂载在Product.prototype上的，属于所有实例共享的方法，不会出现在实例自身的属性列表里。

解决方法 #

把箭头函数改成标准类方法定义即可：

class Product{
    constructor(id, name, price, stock){
        this.id = id;
        this.name = name;
        this.price = price;
        this.stock = stock;
    }
    // 改为普通类方法
    checkstock() {
        this.stock > 0 ? console.log("Available stock") : console.log("No stock");
    }
}
const product1 = new Product(001, "Keyboard", "$19.95", 3);
product1.checkstock();
console.log(product1)

此时打印product1的结果会是：

Product { id: 1, name: 'Keyboard', price: '$19.95', stock: 3 }

如果你的场景需要固定this指向（比如方法要作为回调使用，避免this丢失），可以在constructor里手动绑定普通方法的this：

class Product{
    constructor(id, name, price, stock){
        this.id = id;
        this.name = name;
        this.price = price;
        this.stock = stock;
        // 绑定this到实例
        this.checkstock = this.checkstock.bind(this);
    }
    checkstock() {
        this.stock > 0 ? console.log("Available stock") : console.log("No stock");
    }
}

不过这种写法同样会让checkstock成为实例属性，打印时会显示出来。如果既需要固定this又不想让方法出现在实例属性列表里，建议使用普通方法并确保调用时this指向正确，或者在回调场景用箭头函数包裹方法调用。

内容的提问来源于stack exchange，提问作者F Rega