#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2005
    Posts
    415
    Rep Power
    20

    How method inheritance works with the prototype chain


    Hi,
    I'm working on a chess game in Javascript and everything is working pretty well, but I am wondering why the following part of my code is working :-).

    I use something similar to the following:
    javascript Code:
    function ChessPiece(){
    }
    ChessPiece.prototype.getColor = function(){
       return this.color;
    }
    ChessPiece.prototype.getType = function(){
       return this.type;
    }
    function Pawn( color ){
        this.type = 'pawn';
        this.color = color;
    }
    Pawn.prototype = new ChessPiece();
     
    var pawn1 = new Pawn( 'white' );
    console.log( pawn1.getColor() ); // white


    Now I wonder how exactly this works. I know that when pawn1.getColor() is called it first checks whether the pawn1 object has a method called getColor() and since it does not have that method, javascript will look up the prototype chain to see if its prototype has this method, which is the case here.

    However, I do not get why this method has access to the this.color property of the pawn1 object. Because if you do:
    chessPiece.getColor(), the method can't return this.color, as this.color is not part of the chessPiece object nor is it anywhere up its prototype chain.

    How does Javascript make sure that when you call pawn1.getColor() that the getColor() method from its prototype knows about the pawn1.color property?

    I hope I have made my question clear enough, as I found it difficult to explain. Let me know if I dont make any sense to you and I will do another attempt!

    Thanks in advance,
    Stefan
  2. #2
  3. --
    Devshed Expert (3500 - 3999 posts)

    Join Date
    Jul 2012
    Posts
    3,918
    Rep Power
    1045
    Hi,

    the prototype doesn't need to know about anything. Wenn you call getColor on pawn1, then the this keyword in the body of getColor points to pawn1 (the receiver).

    Where the method comes from and how it was defined doesn't matter. Could be a free-floating function not associated with any object. As soon as you call the method/function on an object, this is bound to that object:

    javascript Code:
    function f() {
    	console.log(this);
    }
    var a = {attr: 123, meth: f}
    a.meth();


    If you're interested in the technical details, check section 10.4.3 on page 58 of the ECMA script specification. It explains extacly how this is resolved during the execution of a function.

    Comments on this post

    • Stefan1 agrees
    The 6 worst sins of security ē How to (properly) access a MySQL database with PHP

    Why canít I use certain words like "drop" as part of my Security Question answers?
    There are certain words used by hackers to try to gain access to systems and manipulate data; therefore, the following words are restricted: "select," "delete," "update," "insert," "drop" and "null".
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2005
    Posts
    415
    Rep Power
    20
    Thanks, Very clear answer!

    I will take a look at the link aswell.

IMN logo majestic logo threadwatch logo seochat tools logo