Basic inheritance in JavaScript
Upcoming SlideShare
Loading in...5
×
 

Basic inheritance in JavaScript

on

  • 3,950 views

JS.Chi() 12/18/08

JS.Chi() 12/18/08

Statistics

Views

Total Views
3,950
Views on SlideShare
3,768
Embed Views
182

Actions

Likes
3
Downloads
130
Comments
1

5 Embeds 182

http://blog.javascriptmvc.com 101
http://javascriptmvc.com 64
http://javascriptchicago.com 14
http://www.slideshare.net 2
http://www.scoop.it 1

Accessibility

Categories

Upload Details

Uploaded via as OpenOffice

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

11 of 1

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • Even on the first page instead of 'javascript' you wrote 'javasript'. Missing the 'c'
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • Challenges * back button * more javascript (speed concerns w/ files) * SEO

Basic inheritance in JavaScript Basic inheritance in JavaScript Presentation Transcript

  • 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