title: In javascript, should I add functions to object or object prototype
body: <p>I am building a chess game in javascript right now, and am a little unsure about the correct way to work with inheritance. On one part of the code I have a piece object with different piece types extending it, for example with a knight (as it's the shortest) it looks like this (without the comments):</p>
  
  <p><strong>pieces</strong></p>
  
  <pre><code>/************* piece ********************/
  function Piece(square, color) {
      this.square = square;
      this.color = color;
  }
  
  Piece.prototype.get_path = function(to) {
      return null;
  };
  
  Piece.prototype.get_capture_path = function(to) {
      return this.get_path(to);
  };
  
  Piece.prototype.isAt= function(square) {
    return (this.square.equals(square));
  };    
  
  /************* KNIGHT *****************/
  Knight.prototype = Object.create(Piece.prototype);
  Knight.prototype.constructor = Knight;
  function Knight(square, color) {
      Piece.call(this, square, color);
  
      this.type = KNIGHT;
  }
  
  Knight.prototype.get_path = function(to) {
      var h_movement = Math.abs(this.square.file - to.file);
      var v_movement = Math.abs(this.square.rank - to.rank);
  
      if ((h_movement === 2 &amp;&amp; v_movement === 1) || (h_movement === 1 &amp;&amp; v_movement === 2)) {
          return [to];
      }
      return null;
  };
  </code></pre>
  
  <p>And it works fine, as you would expect the object looks as follow according to chrome's console.log output:</p>
  
  <pre><code>Knight {square: Square, color: "w", type: "N"}
  color: "w"
  square: Square
  type: "N"
  __proto__: Knight
      constructor: Knight(square, color)
      get_path: (to)
      __proto__: Piece
  </code></pre>
  
  <p>Now in a different file of the code, I have the definition of a square object, which looks like this:</p>
  
  <p><strong>Square</strong></p>
  
  <pre><code>function Square(file, rank) {
      this.file = file;
      this.rank = rank;
  
      this.equals = function(other) {
         return (this.file === other.file &amp;&amp; this.rank === other.rank);
      };
  
      this.toString = function() {
          return String(file) + ' ' + String(rank);
      };
  
      this.getSquareAtOffset = function(file, rank) {
          file = Number(file)? file : 0;
          rank = Number(rank)? rank : 0;
          return new Square(this.file + file, this.rank + rank);
      }
  };
  </code></pre>
  
  <p>This also works fine, and, as you would probably expect, the console log of the object is as follow:</p>
  
  <pre><code>Square {file: 1, rank: 1}
  equals: (other)
  file: 1
  getSquareAtOffset: (file, rank)
  rank: 1
  toString: ()
  __proto__: Square
  </code></pre>
  
  <p>This also works fine. So my question is, which approach is better at which situation? What is the difference between the two objects apart from one having it's function as a property and the other having it as a property of the prototype?</p>