Basic inheritance in JavaScript

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

Basic inheritance in JavaScript

Recommended

More Related Content

What's hot (20)

Viewers also liked (11)

Similar to Basic inheritance in JavaScript (20)

More from Brian Moschel (12)

Recently uploaded (20)

Basic inheritance in JavaScript

Editor's Notes