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.

'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

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__

__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

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

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." }

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 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

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();

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

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

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 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 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();

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();

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();

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();

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