- Every object has a prototype
- Objects inherit methods and properties from the prototype of other objects
- If you want instances of an constructor to inherit methods and properties, then you add them to the constructor's prototype
- When a method or property on an object is called, JS will attempt to find them on that object itself. If they're not found there, JS will look up parent objects all the way up to the Object object itself.
- The prototype is stored on the proto property.
var car = {
type: 'truck'
}
var ford = {};
ford.__proto__ = car;
console.log(ford.type) // 'truck'
console.log(car.isPrototypeOf(ford)) // true
https://jsfiddle.net/ozywuli/pLgu3j6h/
- Prototype properties are dynamic so anytime they're updated, the prototype chain lookup will find the new properties
var car = {};
var honda = {};
honda.__proto__ = car;
car.kind = 'sedan';
console.log(honda.kind) // 'sedan'
- New or updated properties are assigned to the object, not to the prototype
var car = {
type: 'sedan'
}
var ford = {};
ford.__proto__ = car;
ford.type = 'truck';
console.log(ford.type) // 'truck'
console.log(car.type) // 'sedan'
__proto__
is not a well supported way of assigning objects to prototypes, soObject.create
is used instead
var car = {
type: 'sedan'
}
var bmw = Object.create(car);
console.log(bmw.type) // 'sedan'
Object.create
also accepts a second argument that is specific properties for the Object, although you should know it's convoluted.
var car = {
type: 'sedan'
}
var bmw = Object.create(car, {color: {value: 'red'}})
console.log(bmw.color) // 'red'
- Use
Object.getPrototypeOf
to get an object's prototype
var car = {};
var ford = Object.create(car);
console.log(Object.getProtoTypeOf(ford)); // car
Constructor functions
- Constructors are the most common way to create prototype chains. The newly created object is called an instance
function Car() {}
var ford = new Car();
console.log(ford instanceof Car); // true
- When using the new keyword, 'this' is a new object that is returned by the constructor and refers to the newly created instance
function Car() {
this.type = 'sedan';
}
var ford = new Car();
console.log(ford.type); // 'sedan'
- Behind the scenes, it looks like this
function Car() {
var this = {};
this.__proto__ = Car.prototype;
this.type = 'sedan';
return this;
}
The 'function prototype'
- All functions have a prototype, but this is different from an instance's
__proto__
. - The
function prototype
is a property of theFunction
object. Whereas__proto__
is an internal property of an object instance that points to thefunction prototype
. - The
function prototype
is used to establish the inheritance chain for instances created from the constructor, that is, any__proto__
of an instance points to thefunction prototype
of the constructor. - instances use
__proto__
to lookup and resolve methods - The
function prototype
is the blueprint for__proto__
. function prototype
is only available on the constructor, not on the instances and vice versa
Firefox console
- the prototype's constructor refers back to itself, so as you unfold it in the console, you're essentially opening it over and over again
References
https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Object_prototypes http://sporto.github.io/blog/2013/02/22/a-plain-english-guide-to-javascript-prototypes/ https://stackoverflow.com/questions/9959727/proto-vs-prototype-in-javascript https://stackoverflow.com/questions/9959727/proto-vs-prototype-in-javascript