javascript - JavaScript 原型(prototype)链中的方法继承

Question

"在 javascript 中，每个对象都有一个到创建它的对象的 secret 链接，形成一个链。当一个对象被要求提供一个它没有的属性时，它的父对象被询问......不断在链中向上，直到找到该属性或直到到达根对象。"

总而言之，我一直认为上面的话是真的，所以我做了一些测试来验证它，我打算像下面这样定义对象的关系。请查看。

代码应该如下所示。

        //Shape - superclass
        function Shape() {
          this.x = 0;
          this.y = 0;
        };

        Shape.prototype.move = function(x, y) {
            this.x += x;
            this.y += y;

            alert('Shape move');
        };

        // Rectangle - subclass
        function Rectangle() {
          Shape.call(this); //call super constructor.
        }

        Rectangle.prototype.move = function(x, y) {
            this.x += x;
            this.y += y;

            alert('Rectangle move');
        };

        // Square - subclass
        function Square(){
            Shape.call(this);
        }

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

        var rect = new Rectangle();

        var sq= new Square();

        sq.x=1;
        sq.y=1;
        sq.move(1,1);

由于在Square.prototype中找不到move方法，所以JavaScript会在其链下的父对象中找到它，我原以为它会在 Rectangle.prototype 中找到，但实际上它在根 Shape.prototype 中找到，所以我不明白的是为什么 sq.move( 1,1) 实际上调用了 Shape.prototype.move 而不是调用 Rectangle.prototype 的 move 方法？我错过了什么吗？谢谢。

Answer 1

您刚刚覆盖了您的Rectangle.prototype，它已经有了move。因为你已经覆盖了它，所以你附加的 move 不再存在，这就是为什么使用 Shape 的 move。

Rectangle.prototype.move = function(x, y) {
  this.x += x;
  this.y += y;
  alert('Rectangle move');
};

function Square(){
  Shape.call(this);
}

//overwritten the prototype
Rectangle.prototype = Object.create(Shape.prototype);

首先创建原型(prototype)对象，然后再添加到它。

Rectangle.prototype = Object.create(Shape.prototype);
Rectangle.prototype.move = function (x, y) {
  this.x += x;
  this.y += y;
  alert('Rectangle move');
};