JavaScript is not Java © Douglas Crockford JavaScript is a class-free, object- oriented language. Uses prototypal inherita...
'Everything' is an Object Anything created with the  new  keyword is an object. new  String(“hi”) new  Function(“x”,”retur...
Prototypes and __proto__. Functions have a prototype object property. Animal = function(name) {  this.name = name  } Anima...
__proto__ chaining JavaScript 'recursively' searches  __proto__ s until it finds a property or method. Animal and sponge a...
Now what?  We want a hierarchy of life. We must establish a hierarchy of  proto s that creates inheritance.  We just have ...
Prototype Chaining  Use instances of base 'class' as the  prototype  of the inhering class. toString prototype Animal = fu...
Prototype Chaining  Use instances of base 'class' as the  prototype  of the inhering class. toString prototype Animal = fu...
Prototype Chaining  Use instances of base 'class' as the  prototype  of the inhering class. toString prototype Animal = fu...
Prototype Chaining  Use instances of base 'class' as the  prototype  of the inhering class. toString prototype Animal = fu...
Prototype Chaining  Use instances of base 'class' as the  prototype  of the inhering class. toString prototype Animal = fu...
Prototype Chaining  Use instances of base 'class' as the  prototype  of the inhering class. toString prototype Animal = fu...
Prototype Chaining  Use instances of base 'class' as the  prototype  of the inhering class. toString prototype Animal = fu...
Prototype Chaining  Use instances of base 'class' as the  prototype  of the inhering class. toString prototype Animal = fu...
Prototype Chaining  Use instances of base 'class' as the  prototype  of the inhering class. toString prototype Animal = fu...
Prototype Chaining  Use instances of base 'class' as the  prototype  of the inhering class. toString prototype Animal = fu...
Prototype Chaining  Use instances of base 'class' as the  prototype  of the inhering class. toString has_spine proto proto...
Prototype Chaining  Use instances of base 'class' as the  prototype  of the inhering class. toString has_spine has_hair pr...
Problems  Constructors that require a parameter Dog = function(years){ this.dog_years = years / 7; } Doberman = function(y...
Upcoming SlideShare
Loading in …5
×

Basic inheritance in JavaScript

7,036
-1

Published on

JS.Chi() 12/18/08

Published in: Technology
1 Comment
5 Likes
Statistics
Notes
  • Even on the first page instead of 'javascript' you wrote 'javasript'. Missing the 'c'
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
7,036
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
152
Comments
1
Likes
5
Embeds 0
No embeds

No notes for slide
  • Challenges * back button * more javascript (speed concerns w/ files) * SEO
  • Basic inheritance in JavaScript

    1. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×