Prototype Examples

prototype-examples.js

// Every object in Javascript has a prototype. 
// When a messages reaches an object, JavaScript will attempt to find a property in that object first,
// if it cannot find it then the message will be sent to the object’s prototype and so on. 

// Create an alien object
var alien = {
  kind: 'alien'
}

// and a person object
var person = {
  kind: 'person'
}

// and an object called 'zack'
var zack = {};

// assign alien as the prototype of zack
zack.__proto__ = alien // Don't actually do this in production code!

// zack is now linked to alien
// it 'inherits' the properties of alien
console.log(zack.kind); //=> ‘alien’

// assign person as the prototype of zack
zack.__proto__ = person

// and now zack is linked to person
console.log(zack.kind); //=> ‘person’

console.log(alien.isPrototypeOf(zack)) //=> true

// ****************************************
// Prototype lookups are dynamic
// ****************************************

var person = {}

var zack = {}
zack.__proto__ = person

// zack doesn't respond to kind at this point
console.log(zack.kind); //=> undefined

// add kind to person
person.kind = 'person'

// now zack responds to kind
// because it finds 'kind' in person
console.log(zack.kind); //=> 'person'

// ****************************************
// New / updated properties are assigned to the object, not to the prototype
// ****************************************

var person = {
  kind: 'person'
}

var zack = {}
zack.__proto__ = person

zack.kind = 'zack'

console.log(zack.kind); //=> 'zack'
// zack now has a 'kind' property

console.log(person.kind); //=> 'person'
// person has not being modified


// ****************************************
// Object.create
// ****************************************

var person = {
  kind: 'person'
}

// creates a new object where prototype is person
var zack = Object.create(person);
  
console.log(zack.kind); // => ‘person’

// You can pass an object to Object.create to add specific properties for the new object
var zack = Object.create(person, {age: {value:  13} });
console.log(zack.age); // => ‘13’

// You can get the prototype of an object using Object.getPrototypeOf
var zack = Object.create(person);
Object.getPrototypeOf(zack); //=> person

// ****************************************
// Constructor Functions (Functions as constructors)
// ****************************************

function Foo(){}

var foo = new Foo();

// Functions when used with the keyword new behave like factories creating new objects (instances)
// The new object they create is linked to the function by its prototype

// foo is now an instance of Foo
console.log(foo instanceof Foo ) //=> true

// ****************************************
// this
// ****************************************

function Foo() {
  this.kind = 'foo'
}

var foo = new Foo(); 
foo.kind //=> 'foo'

function Foo() {
  var this = {}; // not valid, just for illustration
  this.__proto__ = Foo.prototype;
  
  this.kind = 'foo'
  
  return this;
}

// ****************************************
// The ‘function prototype’
// ****************************************

function Foo(){
}

Foo.__proto__ === Foo.prototype //=> false

function Person(name) {
  this.name = name;
}

// the function person has a prototype property
// we can add properties to this function prototype
Person.prototype.kind = ‘person’

// when we create a new object using new
var zack = new Person(‘Zack’);

// the prototype of the new object points to person.prototype
// The ‘prototype’ property points to the object that will be assigned as the prototype of
// instances created with that function when using ‘new’
zack.__proto__ == Person.prototype //=> true

// in the new object we have access to properties defined in Person.prototype
zack.kind //=> person

zack.__proto__ === Person.prototype //=> true here as well