![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; // -> ?](https://image.slidesharecdn.com/06prototypes-150611163255-lva1-app6892/85/Prototypes-3-320.jpg)
![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_](https://image.slidesharecdn.com/06prototypes-150611163255-lva1-app6892/85/Prototypes-8-320.jpg)
![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](https://image.slidesharecdn.com/06prototypes-150611163255-lva1-app6892/85/Prototypes-9-320.jpg)
Prototypes
- 1. JavaScript Training Goal Trainers Format • Lecture • Exercises • Ask Questions! • bitovi/js-training
- 3. 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; // -> ?
- 4. Prototype methods Animal = function(name) { this.name = name; } Animal.prototype.eats = function(){ return this.name + " is eating." } sponge = new Animal(“Bob”) name Bob __proto__ sponge prototype fneatsAnimal PrototypefnAnimal
- 5. Prototypal Inheritance Mammal Chordat e Animal Mammal Prototype Chordate Prototype Animal Prototype prototype has_spinehas_hair eats prototype prototype proto proto
- 6. 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’); m Object proto has_hair Mammal Chordat Animal Mammal Prototype Chordate Prototype Animal Prototype prototype has_spine eats prototype prototype proto proto Animal Object Chordate Object
- 7. 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’); m Object proto has_hair Mammal Chordat Animal Mammal Prototype Chordate Prototype Animal Prototype prototype has_spine eats prototype prototype proto proto Animal Object Chordate Object
- 8. 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_
- 9. 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
- 10. Summary var Dog = function() {}; var pup = new Dog(); fn OBJECT OBJECT PROTOTYPE pup Dog
- 11. Object.create Animal = { 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
- 12. 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.