Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Superclassy Inheritance In Javascript


Published on

Superclassy Inheritance with JavaScript is a quick look at the benefits and consequences of several inheritance patterns in JavaScript. Code reuse plays a major role in the DRY development pattern and leveraging the inheritance patterns built into JavaScript or manipulating them can change the way you build and organize large applications. Unfortunately, JavaScript's reputation and odd naming scheme have stopped people from using all the features that it has to offer. First, we'll discuss the array of options that exist and then go through a real-world example while using our newly honed inheritance-foo to make it play nice.

Published in: Technology
  • Javascript中的超类继承
    Are you sure you want to  Yes  No
    Your message goes here

Superclassy Inheritance In Javascript

  1. 1. Superclassy Inheritance in Javascript Alex Sexton
  2. 2. JavaScript Overview <ul><li>Runs in more places than any other language. </li></ul>
  3. 3. JavaScript Overview <ul><li>Troubled by the DOM and Newbz </li></ul>
  4. 4. JavaScript Overview <ul><li>Simple but expressive </li></ul><ul><li>Functional by nature , but not by syntax </li></ul>
  5. 5. JavaScript Overview <ul><li>It _ is_ Object Oriented – </li></ul><ul><li>everything extends from Object </li></ul>
  6. 6. Bad Javascript <ul><li>Not Reusable/Modular </li></ul>
  7. 7. Bad Javascript <ul><li>Hard to read </li></ul><ul><ul><li>(let’s leave nests to birds and aging mothers ) </li></ul></ul>
  8. 8. Bad Javascript <ul><li>Relies on the DOM (misusing jQuery, etc.) </li></ul>
  9. 10. Good JavaScript <ul><li>Modular </li></ul><ul><li>Reusable </li></ul><ul><li>Readable </li></ul>
  10. 11. Good JavaScript <ul><li>Efficient </li></ul>
  11. 12. Good JavaScript <ul><li>Stays out of the DOM (for the most part) </li></ul>
  12. 14. Types of Inheritance in JS <ul><li>Classical </li></ul>Prototypal
  13. 15. Types of Inheritance in JS <ul><li>Classical </li></ul>Prototypal Pseudo-Classical
  14. 16. Types of Inheritance in JS <ul><li>Classical </li></ul>Prototypal Pseudo-Classical ^----native (kind of) 
  15. 17. <ul><li>“ It doesn't matter what an object's lineage is, what matters is the quality of its contents .” </li></ul><ul><li>-Douglas Crockford </li></ul>
  16. 18. Prototypal Inheritance <ul><li>No Classes – just Objects </li></ul><ul><li>Objects inherit from Objects </li></ul>
  17. 19. Prototypal Inheritance <ul><li>Objects contain a “ link ” to another object </li></ul><ul><li>The “ parent ” Object is just a regular Object! </li></ul>
  18. 20. Prototypal Inheritance
  19. 21. Prototypal Lineage <ul><li>Changes in oldObject bubble to newObject </li></ul><ul><li>Changes in newObject do not affect oldObject </li></ul>
  20. 22. Prototypal Lineage <ul><li>Theoretically can go on forever — </li></ul><ul><li>(you shouldn’t need more than a few levels) </li></ul><ul><li>Differential Inheritance is fast (common-case) </li></ul><ul><li>and memory efficient </li></ul>
  21. 23. Pseudoclassical Inheritance <ul><li>The syntax is Classical but behaves prototypally </li></ul>
  22. 24. Pseudoclassical Inheritance <ul><li>3 Components to this pattern (the native pattern) </li></ul><ul><li>Constructor functions </li></ul><ul><li>` new ` </li></ul><ul><li>Function.prototype </li></ul>
  23. 25. Pseudoclassical Inheritance <ul><li>Classes in this pattern should be capitalized </li></ul><ul><li>Classes are named/defined by their </li></ul><ul><li>Constructor functions </li></ul>
  24. 26. Pseudoclassical Inheritance <ul><li>function Constructor (){ </li></ul><ul><li>this.instance_member = …; </li></ul><ul><li>// automatically returns `this` when invoked </li></ul><ul><li>// with the `new` operator </li></ul><ul><li>} </li></ul><ul><li>var myObject = new Constructor(); </li></ul>
  25. 27. Pseudoclassical Inheritance <ul><li>Methods and properties that are intended to be inherited are added to the function’s ‘ prototype ’ </li></ul>
  26. 28. Pseudoclassical Inheritance <ul><li>The code inside the function is there to help ‘set up’ or ‘ construct ’ the returned object </li></ul><ul><li>function Constructor(val){ this.val = val; } </li></ul><ul><li>Constructor.prototype.method1 = function(){…}; </li></ul><ul><li>Constructor.prototype.staticVal = 100; </li></ul><ul><li>var newObject = new Constructor(‘val’); </li></ul>
  27. 29. Pseudoclassical Inheritance <ul><li>The ‘ new ’ operator creates a new object, with a link back to its parent’s prototype object. </li></ul><ul><li>It is REQUIRED . </li></ul>
  28. 30. Pseudoclassical Inheritance <ul><li>This would be much like the prototypal </li></ul><ul><li>way of doing: </li></ul><ul><li>// prototypal equivalent </li></ul><ul><li>var newObject = Object.create(Constructor.prototype); </li></ul>
  29. 31. Pseudoclassical Inheritance <ul><li>// prototypal equivalent </li></ul><ul><li>var newObject = Object.create(Constructor.prototype); </li></ul>
  30. 32. Classical Inheritance <ul><li>At it’s core, Javascript is prototypal , and does not support the Classical model </li></ul>
  31. 33. Classical Inheritance <ul><li>Javascript is extremely versatile </li></ul><ul><li>Using a few simple tricks, </li></ul><ul><li>it’s easy to make believe </li></ul>
  32. 34. Classical Inheritance <ul><li>The ‘key’ is that any Objects ‘ prototype ’ member is mutable and can be replaced with another object. </li></ul><ul><li>This enables a new hierarchy. </li></ul>
  33. 35. Purely Prototypal <ul><li>Very short and easy to mimic in Javascript </li></ul><ul><li>Native function in ECMAscript 5 (approved) </li></ul><ul><li>Gets rid of ‘ new ’ and constructor functions </li></ul>
  34. 36. Purely Prototypal <ul><li>if (typeof Object.create !== 'function') { </li></ul><ul><li>Object.create = function (o) { </li></ul><ul><li>function F() {} </li></ul><ul><li>F.prototype = o; </li></ul><ul><li>return new F(); </li></ul><ul><li>}; </li></ul><ul><li>} </li></ul><ul><li>var newObject = Object.create(OldObject); //yay! </li></ul>
  35. 37. Classical Inheritance in Javascript <ul><li>A little tougher to implement, but there are plenty already written </li></ul><ul><li>simple-inheritance | MooTools Class | Prototype Class | Lowpro | Base2 |Way More… </li></ul>
  36. 38. Classical Inheritance in Javascript <ul><li>There is a small penalty in overhead since it’s not all native, but generally still fairly quick </li></ul><ul><li>Enhanced API gives easier access to the superclasses methods and often more </li></ul><ul><li>Easier than teaching old dogs new tricks </li></ul>
  37. 39. simple-inheritance (api) by John Resig but pretty much stolen from Prototype and Base2 <ul><li>var  Person =  Class .extend ({   init:  function( isDancing ){      this .dancing = isDancing;    } ,   dance:  function(){      return   this .dancing;    } </li></ul><ul><li>}) ; </li></ul><ul><li>var  Ninja = Person.extend ({   init:  function(){      this ._super (   false   ) ; //  SEE?!!! SUPER CLASSY!    } ,   dance:  function(){      // Call the inherited version of dance()      return   this ._super () ;    } ,   swingSword:  function(){      return   true ;    } </li></ul><ul><li>}) ; </li></ul><ul><li>var  p =  new  Person (true) ; </li></ul><ul><li> () ;  // => true </li></ul><ul><li>var  n =  new  Ninja () ; </li></ul><ul><li> () ;  // => false </li></ul><ul><li>n.swingSword () ;  // => true </li></ul><ul><li>// Should all be true </li></ul><ul><li>p  instanceof  Person && p  instanceof   Class  && </li></ul><ul><li>n  instanceof  Ninja && n  instanceof  Person && n  instanceof   Class </li></ul>
  38. 40. Information Hiding <ul><li>Use the “Module Pattern” – a function that takes advantage of closures and returns an object with access to private information that isn’t available outside of the function scope . </li></ul><ul><li>Or something… </li></ul>
  39. 41. The Module Pattern <ul><li>function module(){ </li></ul><ul><li>var privateFunction = function() { </li></ul><ul><li>return “private”; </li></ul><ul><li>}; </li></ul><ul><li>return { </li></ul><ul><li>publicFunction: function(){ </li></ul><ul><li>return “public: “ + privateFunction(); </li></ul><ul><li>} </li></ul><ul><li>}; </li></ul><ul><li>} </li></ul><ul><li>var newModule = Object.create(module()); </li></ul><ul><li>newModule.publicFunction(); // “public: private” </li></ul><ul><li>newModule.privateFunction(); // error </li></ul><ul><li>// Great for Getters and Setters of member values </li></ul>
  40. 42. <ul><li>“ But this doesn’t apply to my real life applications with X Library or Y Scripts!” </li></ul><ul><li>-Abe Lincoln </li></ul>
  41. 43. Real Life <ul><li>Rofl… that’s not a real quote guys… </li></ul><ul><li>It fits just fine. Stop trying to use the DOM as your point of access for everything . </li></ul>
  42. 44. Real Life <ul><li>Your library may actually address the issue – </li></ul><ul><li>or not … </li></ul>
  43. 45. <ul><li>“ I just think that the intersection between jQuery and classical inheritance is quite small.” </li></ul><ul><li>-John Resig </li></ul>
  44. 46. Real Life <ul><li>Build an API </li></ul><ul><li>Speakers should ‘ speak() ’ not append text to DOM elements </li></ul>
  45. 47. A Badass Function <ul><li>I like to call it “Stolen Identity” – it shows how versatile Javascript really is when it comes to inheritance </li></ul>
  46. 48. A Badass Function <ul><li>// example from Stoyan Stefanov for YUI inheritance </li></ul><ul><li>// Steal the member variables along with the prototype </li></ul><ul><li>function Programmer() { </li></ul><ul><li>// initialize the parent using the child as &quot;this&quot; </li></ul><ul><li>Programmer.superclass.constructor.apply(this, arguments); </li></ul><ul><li>} </li></ul>
  47. 49. A Demo: Goals <ul><li>Use inheritance(s) along with a framework </li></ul><ul><li>Tie the DOM and the Object together </li></ul><ul><li>in a clean manner </li></ul><ul><li>Pretty code! </li></ul>
  48. 50. <ul><li>(switch to codez) </li></ul>
  49. 51. Fin. <ul><li>Alex Sexton </li></ul><ul><li>[email_address] </li></ul><ul><li> </li></ul><ul><li> / </li></ul><ul><li>http:// / </li></ul><ul><li>Special Thanks to: </li></ul><ul><li>Douglas Crockford </li></ul><ul><li>John Resig </li></ul><ul><li>Stoyan Stefanov </li></ul><ul><li>Prototype | Base2 | Dojo | jQuery etc… </li></ul><ul><li>#jquery on </li></ul><ul><li>(YAYQUERY == Paul Irish, Rebecca Murphey, Adam Sontag) </li></ul>