JavaScript Training

Goal Trainers Format

• Lecture• Exercises• Ask Questions!• bitovi/js-training

Prototypal Inheritance

Shared Properties

Animal = function(){ this.offspring = [];}Dog = function(){}Dog.prototype = new Animal()var dog1 = new Dog(), dog2 = new Dog(), pup = new Dog();dog1.offspring.push(pup);dog2.offspring; // -> ?

Prototype methods

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

Animal.prototype.eats = function(){ return this.name + " is eating."}

sponge = new Animal(“Bob”)

nameBob

__proto__

sponge

prototype fneatsAnimalPrototypefnAnimal

Prototypal Inheritance

Mammal

Chordate

Animal

MammalPrototype

ChordatePrototype

AnimalPrototype

prototype has_spinehas_hair eatsprototype prototype

proto proto

Proto-chaining

Mammal.prototype.has_hair = true;

Chordate.prototype = new Animal();

Animal = function(name) { this.name = name }Animal.prototype.eats = function(){ return this.name+" is eating."}Chordate = function(name){ this.name = name; }

Chordate.prototype.has_spine = true;Mammal = function(name){ this.name = name; }Mammal.prototype = new Chordate();

m = new Mammal(‘dog’);

mObject

proto

has_hair

Mammal

Chordate

Animal

MammalPrototype

ChordatePrototype

AnimalPrototype

prototype

has_spine eats

prototype prototype

proto protoAnimalObject

ChordateObject

Proto-chaining

Mammal.prototype.has_hair = true;

Chordate.prototype = new Animal();

Animal = function(name) { this.name = name }Animal.prototype.eats = function(){ return this.name+" is eating."}Chordate = function(name){ Animal.call(this, name); }

Chordate.prototype.has_spine = true;Mammal = function(name){ Chordate.call(this, name); }Mammal.prototype = new Chordate();

m = new Mammal(‘dog’);

mObject

proto

has_hair

Mammal

Chordate

Animal

MammalPrototype

ChordatePrototype

AnimalPrototype

prototype

has_spine eats

prototype prototype

proto protoAnimalObject

ChordateObject

Shared Properties

Animal = function(){ this.offspring = [];}

Dog = function(){}

Dog.prototype = new Animal()

var dog1 = new Dog(), dog2 = new Dog(), pup = new Dog();

dog1.offspring.push(pup);

dog2.offspring; // -> pup

Animal

PROTOTYPE

PROTOTYPE OFFSPRING

dog1 dog2 pup

Dog

_proto_ _proto_

_proto_

_proto_

Exercise

Write the new operator as if it was implemented in JS.

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

}

Person.prototype.speak = function(){ console.log(‘Hello!’) }

var person = NEW( Person, ['name'] );// var person = new Person(‘name’)

person.speak();

Hints:

• NEW takes the constructor function and an array of arguments

Summary

var Dog = function() {};

var pup = new Dog();

fn

__proto__

OBJECT

OBJECT

PROTOTYPE

pup

Dog

Object.createAnimal = {

init: function(name) {this.name = name;

},

eats: function() {return this.name + " is eating."

}}

Chordate = Object.create(Animal, {has_spine: { value: true }

});

Mammal = Object.create(Chordate, {has_hair: { value: true }

});m = Object.create(Mammal);m.init(‘dog’);

name has_hair has_spine init eats

m Mammal Chordateproto proto Animalproto

Exercise

Write the instanceof operator as if it was implemented in JS.

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

}

person = new Person( 'Alexis' );INSTANCEOF( person, Person );

Hints:

• Check the proto chain for the constructor’s prototype.