The document discusses JavaScript inheritance using prototypes. It explains that JavaScript uses prototypal inheritance instead of classical inheritance. It provides an example of setting up a prototype chain where Animal is the base "class" and Chordate and Mammal inherit from it by setting their prototypes to instances of the superclass. This establishes a hierarchy where methods and properties are inherited through the prototype chain.

1. JavaScript is not Java © Douglas Crockford JavaScript is a class-free, object- oriented language. Uses prototypal inheritance. Lots of expressive power. Less intuitive to setup.

2. 'Everything' is an Object Anything created with the new keyword is an object. new String(“hi”) new Function(“x”,”return x*x”) function(x){ return x*x} new Object(); {} new Array() [] Person = function(name){this.name = name) me = new Person(“Justin”) Exceptions: String(“hi”) “ hi” 4 true

3. Prototypes and __proto__. Functions have a prototype object property. Animal = function(name) { this.name = name } Animal. prototype .toString = function(){ return this.name+ " has multiple cells, diploid blastula." } Objects have a __proto__ property that points to the prototype property of the function that created them. sponge = new Animal( “Sponge Bob” ) When looking for a method, JavaScript checks the object, then it's __proto__ sponge.toString() //-> Sponge Bob has multiple cells, diploid blastula. toString .prototype toString name __proto__

4. __proto__ chaining JavaScript 'recursively' searches __proto__ s until it finds a property or method. Animal and sponge actually look like: What would sponge.__proto__.__proto__.test = function(){return "test" } do? Side effects? toString name proto proto toString .prototype

5. Now what? We want a hierarchy of life. We must establish a hierarchy of proto s that creates inheritance. We just have to make sure the proto s of the classifications 'stack' correctly. But we can't use the __proto__ property in IE and Opera! Mammals Mammals Chordates Animals toString has_spine has_hair proto proto prototype prototype prototype

6. Prototype Chaining Use instances of base 'class' as the prototype of the inhering class. toString prototype Animal = function(name) { this.name = name } Animal. prototype .toString = function(){ return this.name+ " has multiple cells, diploid blastula." }

7. Prototype Chaining Use instances of base 'class' as the prototype of the inhering class. toString prototype Animal = function(name) { this.name = name } Animal. prototype .toString = function(){ return this.name+ " has multiple cells, diploid blastula." } Chordate = function(name){ this.name = name; }

8. Prototype Chaining Use instances of base 'class' as the prototype of the inhering class. toString prototype Animal = function(name) { this.name = name } Animal. prototype .toString = function(){ return this.name+ " has multiple cells, diploid blastula." } Chordate = function(name){ this.name = name; } prototype

9. Prototype Chaining Use instances of base 'class' as the prototype of the inhering class. toString prototype Animal = function(name) { this.name = name } Animal. prototype .toString = function(){ return this.name+ " has multiple cells, diploid blastula." } Chordate = function(name){ this.name = name; } prototype Chordate.prototype = new Animal();

10. Prototype Chaining Use instances of base 'class' as the prototype of the inhering class. toString prototype Animal = function(name) { this.name = name } Animal. prototype .toString = function(){ return this.name+ " has multiple cells, diploid blastula." } Chordate = function(name){ this.name = name; } prototype Chordate.prototype = new Animal(); proto

11. Prototype Chaining Use instances of base 'class' as the prototype of the inhering class. toString prototype Animal = function(name) { this.name = name } Animal. prototype .toString = function(){ return this.name+ " has multiple cells, diploid blastula." } Chordate = function(name){ this.name = name; } prototype Chordate.prototype = new Animal(); Chordate.prototype.has_spine = true; has_spine proto

12. Prototype Chaining Use instances of base 'class' as the prototype of the inhering class. toString prototype Animal = function(name) { this.name = name } Animal. prototype .toString = function(){ return this.name+ " has multiple cells, diploid blastula." } Chordate = function(name){ this.name = name; } prototype Chordate.prototype = new Animal(); Chordate.prototype.has_spine = true; has_spine proto Mammal = function(name){ this.name = name; }

13. Prototype Chaining Use instances of base 'class' as the prototype of the inhering class. toString prototype Animal = function(name) { this.name = name } Animal. prototype .toString = function(){ return this.name+ " has multiple cells, diploid blastula." } Chordate = function(name){ this.name = name; } prototype Chordate.prototype = new Animal(); Chordate.prototype.has_spine = true; has_spine proto Mammal = function(name){ this.name = name; } prototype

14. Prototype Chaining Use instances of base 'class' as the prototype of the inhering class. toString prototype Animal = function(name) { this.name = name } Animal. prototype .toString = function(){ return this.name+ " has multiple cells, diploid blastula." } Chordate = function(name){ this.name = name; } prototype Chordate.prototype = new Animal(); Chordate.prototype.has_spine = true; has_spine proto Mammal = function(name){ this.name = name; } prototype prototype Mammal.prototype = new Chordate();

15. Prototype Chaining Use instances of base 'class' as the prototype of the inhering class. toString prototype Animal = function(name) { this.name = name } Animal. prototype .toString = function(){ return this.name+ " has multiple cells, diploid blastula." } Chordate = function(name){ this.name = name; } prototype Chordate.prototype = new Animal(); Chordate.prototype.has_spine = true; has_spine proto Mammal = function(name){ this.name = name; } prototype proto prototype Mammal.prototype = new Chordate();

16. Prototype Chaining Use instances of base 'class' as the prototype of the inhering class. toString has_spine proto proto prototype prototype prototype Mammal.prototype.has_hair = true; Chordate.prototype = new Animal(); Animal = function(name) { this.name = name } Animal. prototype .toString = function(){ return this.name+ " has multiple cells, diploid blastula." } Chordate = function(name){ this.name = name; } Chordate.prototype.has_spine = true; Mammal = function(name){ this.name = name; } Mammal.prototype = new Chordate();

17. Prototype Chaining Use instances of base 'class' as the prototype of the inhering class. toString has_spine has_hair proto proto prototype prototype prototype Mammal.prototype.has_hair = true; Chordate.prototype = new Animal(); Animal = function(name) { this.name = name } Animal. prototype .toString = function(){ return this.name+ " has multiple cells, diploid blastula." } Chordate = function(name){ this.name = name; } Chordate.prototype.has_spine = true; Mammal = function(name){ this.name = name; } Mammal.prototype = new Chordate();

18. Problems Constructors that require a parameter Dog = function(years){ this.dog_years = years / 7; } Doberman = function(years){ this.dog_years = years / 7; } Doberman.prototype = new Dog(); !breaks! Constructor set properties will be shared Dog = function(){this.offspring =[];} Doberman = function(){}; Doberman.prototype = new Dog(); var dog1 = new Doberman() dog1.offspring.push(new Dog()); dog2.offspring.length //-> 1! WRONG It's ugly