« Back to Index

The difference between prototype and __proto__

View original Gist on GitHub

Point.js

function Point(x, y) {
  this.x = x;
  this.y = y;
}

Point.prototype.display = function() {
  console.log(this.x + ' | ' + this.y);
}

var point = new Point(1, 2);

console.group('Point');
    console.log(typeof Point); // => "function"
console.groupEnd();

console.group('point');
    console.log(typeof point); // => "object"
    console.log(point); // => `Point {x: 1, y: 2, display: function}`
console.groupEnd();

console.group('point.__proto__');
    console.log(point.__proto__); // => `Point {display: function}`
    console.log('`__proto__` is the actual object that is used in the lookup chain to resolve methods');
    console.log('in most browsers `__proto__` is an internal property and not accessible via JavaScript (soon to change with ES6)');
console.groupEnd();

console.group('point.prototype');
    console.log(point.prototype); // => `undefined`
    console.log('only Functions have the `prototype` property');
    console.log('`prototype` is the object that is used to build `__proto__` when you create an object with `new`');
console.groupEnd();

console.group('({}).__proto__');
    console.log(({}).__proto__); // => Object {}
console.groupEnd();

console.group('point.__proto__ == point.prototype');
    console.log(point.__proto__ == point.prototype); // => `false`
console.groupEnd();