Question

我有一个Shape类和一个从Shape类继承的Circle类。

Shape.js

function Shape(id, name, color) {

    this.id = id;
    this.name = name;
    this.color = color;

    Shape.prototype.getDisplayName = () => {
        return this.id + ":" + this.name;
    }
};

module.exports = Shape;

Circle.js

const Shape = require('./shape');

Circle.prototype = Object.create(Shape.prototype);
Circle.prototype.constructor = Circle;

function Circle(id, name, color, radius) {
    Shape.call(this, id, name, color);

    this.radius = radius;
};

module.exports = Circle;

这很好，但是当我有多个Circle对象时，getDisplayName函数使用了错误的上下文。

app.get('/', async (req, res) => {

    let circle1 = new Circle('id1', 'Circle', 'red', 5);
    let circle2 = new Circle('id3', 'Circle', 'blue', 12);

    let shapes = [circle1, circle2];

    for(let shape in shapes){
        console.log(shapes[shape].getDisplayName());
    }

});

这将打印出

id3:Circle
id3:Circle

我发现SO answer给予了一些帮助。通过将this.getDisplayName = this.getDisplayName.bind(this)添加到Circle构造函数中，它可以工作。但是，我希望不必对每个孩子的每个父方法都执行此操作。有更好的方法吗？

Answer 1

您不能像使用箭头函数那样将其分配给构造函数内部的原型。所有实例将共享同一原型。您正在c += 8;绑定到当前时刻的构造函数的每个调用上创建一个新的箭头函数。结果是this设置为为所有实例创建的最后一个实例。

您需要使用传统函数来允许this绑定到正确的对象。

此外，没有理由将其放入构造函数中。您只需创建一次此函数，而无需每次都调用构造函数。

this

将子类“ this”绑定到所有父原型函数

1 个答案: