Method inheritance in the JavaScript prototype chain

Question

"In javascript, every object has a secret link to the object which created it,forming a chain. When an object is asked for a property that it does not have,its parent object is asked... continually up the chain until the property is found or until the root object is reached."

All , I always think the above words is truth even now, So I did some test to verify it , I intended to define the relationship of objects like below. please review it .

enter image description here

The code should look like below .

        //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);

Since the move method can't be found in the Square.prototype, So JavaScript will find it in its parent objects following the chain, I had thought It will be found in the Rectangle.prototype, but actually it is found in the root Shape.prototype , So What I can't understand is why sq.move(1,1) actually call the Shape.prototype.move instead of calling the move method of Rectangle.prototype ? Did I missed something ?thanks.

Should the Square() contructor call Rectangle() rather than Shape()? — nnnnnn
– nnnnnn, Commented May 15, 2013 at 9:30
Because Square is a Shape subclass instead a Rectangle subclass (?) — DaGLiMiOuX
– DaGLiMiOuX, Commented May 15, 2013 at 9:32
Isn't Retangle.prototype = new Shape() easier that using Object.create()? — Ja͢ck
– Ja͢ck, Commented May 15, 2013 at 9:39
@All , The call method is just invoke the constructor, it doesn't matter with the prototype object. BTW, normally the inheritance chain is always about the prototype of object. constructor is only used to construct the object created. — Joe.wang
– Joe.wang, Commented May 15, 2013 at 9:40

Joseph · Accepted Answer · 2013-05-15 09:39:03Z

6

You just overwritten your Rectangle.prototype which already had move. Since you have overwritten it, the move you attached is no longer there, that's why Shape's move is used.

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);

Create the prototype object first, before adding to it.

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

edited May 15, 2013 at 9:39

answered May 15, 2013 at 9:33

Joseph

120k31 gold badges186 silver badges238 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Ja͢ck Over a year ago

This has nothing to do with hoisting; the code is simply overwriting Rectangle.prototype :)

Joseph Over a year ago

@Jack Oh yeah. His code was so mixed, that I initially thought it was. Thanks

Joe.wang Over a year ago

@JosephtheDreamer Now I know the reason ! Object.create will assign another instance to the Rectangle.prototype, So In my code , there doesn't exist the move method any more in the Rectangle.prototype, Because there is another object override the before one . Hope you verify my understanding . Thanks.

Joe.wang Over a year ago

override ----> overwrite sorry for the typo.

Sarath · Accepted Answer · 2013-05-15 09:48:27Z

Move you extension of prototype down. Now you are assigning prototype after extending it , so it will overwrite the extended one

//Shape - superclass
        function Shape() {
          this.x = 0;
          this.y = 0;
        };
        // Rectangle - subclass
        function Rectangle() {
          Shape.call(this); //call super constructor.
        }
        // Square - subclass
        function Square(){
            Shape.call(this);
        }    

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

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

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

            alert('Rectangle move');
        };

        var rect = new Rectangle();
        var sq = new Square();

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

Collectives™ on Stack Overflow

Method inheritance in the JavaScript prototype chain

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related