prototypes.md

#JavaScript Prototypal Inheritance / Linkage

##When I say prototype, what does it mean to you guys?

Noun: a first, typical or preliminary model of something, especially a machine, from which other forms are developed or copied.
Verb: make a prototype of (a product).

###In Programming

In most languages, there are classes and objects. Classes inherit from other classes.

In JavaScript, the inheritance is prototype-based. That means that there are no classes. Instead, an object inherits from another object. 

All JavaScript objects inherit the properties and methods from their prototype.

Objects created using an object literal, or with new Object(), inherit from a prototype called Object.prototype.

Objects created with new Date() inherit the Date.prototype.

The Object.prototype is on the top of the prototype chain.

All JavaScript objects (Date, Array, RegExp, Function, ....) inherit from the Object.prototype.

Demo 1:

In this example, we are creating an object Animal

// Prototypes
var Animal = {
  alive: true,
  eats: 'food',
  moves: function(){
    console.log('moved');
  }
};

Then, we will create an Animal Horse

var Horse = Object.create(Animal);

See, the Horse variable now inherits all of the attributes and behaviors of an Animal

// Get the prototype of
console.log(Horse.alive);
console.log(Horse.eats);
Horse.moves();

Demo 2:

Let's create another Animal object

// Animal object
var Animal = {eats: true};

This time, we will use a constructor function as a template for our Rabbit object

// Create a constructor function
function Rabbit(name){
  this.name = name;
}

The code Rabbit.prototype = animal literally means the following: ”set proto = animal for all objects created by new Rabbit”.

// Inherit from animal
Rabbit.prototype = Animal;

Then we create a Rabbit called Stanley

var rabbit = new Rabbit('Stanley');

Let's see the rabbit's name and the inherited eats attribute

console.log(rabbit.name);
// Now the rabbit has the eats attribute
console.log(rabbit.eats);

###Let's try and add a method to the Rabbit prototype

Rabbit.prototype.jump = function(){
	console.log('jump');
};

rabbit.jump();

###Let's write our own inherit method

function inherit(proto){
	function F(){}
	F.prototype = proto;
	return new F;
}

var horse = inherit(Animal);
console.log('Horse eats');
console.log(horse.eats);

###Another example of prototypes

  function Plant(name, height){
    this.name = name;
    this.height = height;
  }

  Plant.prototype.grow = function(){
    this.height += 1;
  };

  var Palms = new Plant('Palm tree', 5);
  Palms.grow();
  console.log(Palms.height);

An advantage of using prototypes to define methods is that when the prototype is changed, all the classes associated with it changes as well.

Also, it has better performance because it is created once and inherited by each instance

###Why prototypes over constructors?

###Adding the method repeat to native objects

String.prototype.repeat = function(times){
	return new Array(times + 1).join(this);
};

console.log("a".repeat(3));
console.log('zebra'.repeat(5));