父对象原型继承的差异[重复]

Question

我找到了 3 种方法来继承另一个 Object-constructor 的原型：

我可以同时使用这三个吗？ => 如果我在 Rectangle 实例上测试 draw() 方法，它们似乎可以工作......

还有其他方法吗？

function Shape(shapeName){
    this.shapeName = shapeName;
}
Shape.prototype.draw = function(){
    console.log('I am a '+this.shapeName+' and I am drawing myself');
}

function Rectangle(shapeName,l,b){
    Shape.apply(this,arguments);
    this.lengte = l;
    this.breadth = b;
}

// Possibility 1 ==> Rectangle.prototype = Object.create(Shape.prototype);
// Possibility 2 ==> Object.assign(Rectangle.prototype,Shape.prototype);
// Possibility 3 ==> Rectangle.prototype = Shape.prototype;

Answer 1

我可以同时使用这三个吗？

有点，但我强烈建议使用可能性 1（加上将结果上的 constructor 设置为 Rectangle）：

function Shape(shapeName){
    this.shapeName = shapeName;
}
Shape.prototype.draw = function(){
    console.log('I am a '+this.shapeName+' and I am drawing myself');
}

function Rectangle(shapeName,l,b){
    Shape.apply(this,arguments);
    this.lengte = l;
    this.breadth = b;
}

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

为什么我不使用可能性 2：它会复制所有内容，这意味着对 Shape.prototype 的后续修改不会被 Rectangle.prototype 继承。

为什么我不使用可能性 3：这意味着您不能提供 Shape 没有的 Rectangle 方法（因为添加到 Rectangle.prototype 是添加到 Shape.prototype，因为它们是相同的对象），如果您也以相同的方式创建了Triangle 并使用triangle = new Triangle() 创建triangle，它会错误地使triangle instanceof Rectangle 为真。

---

可能性 1 本质上也是 ES2015+ class 语法在您执行 class Rectangle extends Shape { } 时所做的。事实上，我会推荐使用什么（可能使用转译器）：

class Shape {
    constructor(shapeName) {
        this.shapeName = shapeName;
    }
    draw() {
        console.log('I am a '+this.shapeName+' and I am drawing myself');
    }
}

class Rectangle extends Shape {
    constructor(shapeName, l, b){
        super(shapeName);
        this.lengte = l; // <=== Maybe you meant "length"?
        this.breadth = b;
    }
}