JS prototype inheritance cheatsheet

cheatsheet.js

// normal function x
function x() {
    this.a = 1;
}

// First of all, the term "prototype" is confusing because it can refer to 2 different things.
// There is an object's prototype, which is another object used to look up missing properties.
// But there is also an actual `prototype` property on Function and class objects, which is NOT a prototype for that function object!
// Instead, it serves a very specific purpose: that object becomes a prototype of all instances returned when that function is used as a constructor:
(new x()).__proto__ === x.prototype

// function's `prototype` is an object. That object serves as a template for instances
x.prototype === { constructor: f x() }

// instances are objects. Missing properties are looked up in function's `prototype`
x.prototype.b = 2
(new x()) ~ { a: 1 }
(new x()).b === 2

// there is NO `prototype` on instances. It only makes sense on functions used as constructors, and class objects
(new x()).prototype === undefined

// original function is USUALLY accessible in instance as `constructor`. However, it is not always the case for some built-in globals. E.g. .constructor on `Audio` instances is set to `HTMLAudioElement`
(new x()).constructor === x
(new Audio()).constructor === HTMLAudioElement (!== Audio)

// function's `prototype` is accessible in instance as `__proto__` or as a result of Object.getPrototypeOf()
x.prototype === (new x()).__proto__ === Object.getPrototypeOf(new x())

// so the property lookup chain for any instance is obj -> obj.__proto__ -> obj.__proto__.__proto__ -> ...
// or obj.constructor.prototype -> obj.constructor.prototype.__proto__ -> ...

// functions are objects too, so they have their own `__proto__` and `constructor`
x.constructor === ƒ Function() { [native code] }
x.constructor.prototype === x.__proto__