Anything But Typical: Learning to Love JavaScript Prototypes
•Download as PPTX, PDF•
16 likes•6,710 views
Frightened and confused by the term "prototype"? Tired of praying that there's some plugin for a framework that will do exactly what you need to do? Unlock a whole new world of interactivity with object-oriented JavaScript programming.
Recommended
Recommended
More Related Content
Viewers also liked
Viewers also liked (9)
Similar to Anything But Typical: Learning to Love JavaScript Prototypes
Similar to Anything But Typical: Learning to Love JavaScript Prototypes (20)
More from Razorfish
More from Razorfish (17)
Recently uploaded
Recently uploaded (20)
Anything But Typical: Learning to Love JavaScript Prototypes
- 1. Anything But Typical Learning to Love JavaScript Prototypes Page 1© 2010 Razorfish. All rights reserved. Dan Nichols March 14, 2010
- 2. JavaScript Page 2© 2010 Razorfish. All rights reserved.
- 3. Object-Oriented Programming Page 3© 2010 Razorfish. All rights reserved.
- 4. class Page 4© 2010 Razorfish. All rights reserved.
- 5. Inheritance Page 5© 2010 Razorfish. All rights reserved.
- 6. prototype(not the library) Page 6© 2010 Razorfish. All rights reserved.
- 7. The story so far… Page 7© 2010 Razorfish. All rights reserved.
- 8. <a onclick=“javascript:alert(‘chaos!’)”> Page 8© 2010 Razorfish. All rights reserved.
- 9. Page 9© 2010 Razorfish. All rights reserved.
- 10. …except it wasn’t all good. Page 10© 2010 Razorfish. All rights reserved.
- 11. Page 11© 2010 Razorfish. All rights reserved.
- 12. Page 12© 2010 Razorfish. All rights reserved.
- 13. Page 13© 2010 Razorfish. All rights reserved.
- 14. Page 14© 2010 Razorfish. All rights reserved.
- 15. Sound familiar? Page 15© 2010 Razorfish. All rights reserved.
- 16. Page 16© 2010 Razorfish. All rights reserved. prototype(not the library) to the rescue!
- 17. Page 17© 2010 Razorfish. All rights reserved. Everything is an object
- 18. Page 18© 2010 Razorfish. All rights reserved. Every object has a prototype
- 19. Page 19© 2010 Razorfish. All rights reserved. prototypes do good things
- 20. Page 20© 2010 Razorfish. All rights reserved. Encourage modularityand reusability
- 21. Page 21© 2010 Razorfish. All rights reserved. Provide a consistent wayto do (different) things
- 22. Page 22© 2010 Razorfish. All rights reserved. Keep code to a minimum
- 23. Page 23© 2010 Razorfish. All rights reserved. Make complexity easy
- 24. What is a prototype, exactly? Page 24© 2010 Razorfish. All rights reserved.
- 25. Page 25© 2010 Razorfish. All rights reserved. A reference point for other objects
- 26. Property lookup chain Page 26© 2010 Razorfish. All rights reserved.
- 27. Property lookup chain Page 27© 2010 Razorfish. All rights reserved. instance Date Object
- 28. Property lookup chain Page 28© 2010 Razorfish. All rights reserved. instance Date Object
- 29. Property lookup chain Page 29© 2010 Razorfish. All rights reserved. instance Date Object
- 30. Property lookup chain Page 30© 2010 Razorfish. All rights reserved. instance Date Object
- 31. Page 31© 2010 Razorfish. All rights reserved. JavaScript is different frommost other OOP languages
- 32. Anatomy of a prototype Page 32© 2010 Razorfish. All rights reserved. rex Poodle Dog Object
- 33. Anatomy of a prototype Page 33© 2010 Razorfish. All rights reserved. Constructor
- 34. Anatomy of a prototype Page 34© 2010 Razorfish. All rights reserved. Property Method
- 35. Anatomy of a prototype Page 35© 2010 Razorfish. All rights reserved. Constructor Inheritance
- 36. Anatomy of a prototype Page 36© 2010 Razorfish. All rights reserved. Instance Instance Property
- 37. this and the lookup chain Page 37© 2010 Razorfish. All rights reserved. fluffy socks Cat Object
- 38. this and the lookup chain Page 38© 2010 Razorfish. All rights reserved. socks Cat Object
- 39. this and the lookup chain Page 39© 2010 Razorfish. All rights reserved. fluffy Cat Object
- 40. Execution context: this and call() Page 40© 2010 Razorfish. All rights reserved.
- 41. Execution context: this and call() Page 41© 2010 Razorfish. All rights reserved.
- 42. Execution context with instances Page 42© 2010 Razorfish. All rights reserved. Same outcome
- 43. Page 43© 2010 Razorfish. All rights reserved. Inheritance
- 44. Working with inherited behavior Page 44© 2010 Razorfish. All rights reserved. LimitedContainer Container Object
- 45. Working with inherited behavior Page 45© 2010 Razorfish. All rights reserved. LimitedContainer Container Object
- 46. Working with inherited behavior Page 46© 2010 Razorfish. All rights reserved. LimitedContainer Container Object
- 47. Page 47© 2010 Razorfish. All rights reserved. JavaScript is the Frankensteinof the OOP world
- 48. Borrowing from multiple prototypes Page 48© 2010 Razorfish. All rights reserved.
- 49. Page 49© 2010 Razorfish. All rights reserved. One small problem
- 50. The constructor problem Page 50© 2010 Razorfish. All rights reserved.
- 51. The constructor problem Page 51© 2010 Razorfish. All rights reserved.
- 52. Fixing the constructor problem Page 52© 2010 Razorfish. All rights reserved.
- 53. Fixing the constructor problem Page 53© 2010 Razorfish. All rights reserved.
- 54. Page 54© 2010 Razorfish. All rights reserved. prototype isn’t love at first sight
- 55. Page 55© 2010 Razorfish. All rights reserved. Putting prototypes to work
- 57. Required
- 58. Email
- 59. Number
- 60. Zip Code
- 61. Multiple rules can apply to one field
- 62. Rules need to be inferred from data-rich, standard HTML
- 63. Error messages should be specific
- 64. Flexible enough to be:
- 65. Usable for all other forms on the site
- 66. Extended for use in other projectsPage 56© 2010 Razorfish. All rights reserved.
- 68. Page 58© 2010 Razorfish. All rights reserved. NumberValidator EmailValidator RequiredValidator PatternValidator ValidatingForm Validator Object
- 69. Page 59© 2010 Razorfish. All rights reserved. Libraries are there to make life easier
- 70. Page 60© 2010 Razorfish. All rights reserved. Think about your approach
- 71. Page 61© 2010 Razorfish. All rights reserved. Dive in!
- 72. Thank You Dan Nichols dan.nichols@razorfish.com Blog: http://heydanno.com/blog Code demo: http://heydanno.com/sxsw Page 62© 2010 Razorfish. All rights reserved.
Editor's Notes
- Web was a scary placeBrowser compatibility and features all over the mapDevs hop from site to site grabbing snippets of code
- JS libraries emerge several years agoSmooth over cross browser differencesMake complex behavior easyProvide frameworks for enhancement
- New dependency on libraries and plugins is growingDevs spend a lot of time… (series)
- Searching for a JS library extension that does what they need
- Changing site to fit what the extension does
- Brute-force coding requirements back in
- Live in fear of repeating it allwhen make updateson the next project
- One of JS most powerful featues goesUnusedIgnoredMisunderstoodAnd it can help
- JS is OOP language
- Objects are containers forProperties - DataMethods - BehaviorsWork with objects all the time
- Template for properties + methodsWork with prototypes every dayEven if you don’t realize itDate, Array, etc
- Code you writeCode loaded in memory
- Easy to…BuildModifyExpand on complex interactions
- Reference point that serves as basis for an objectTo understand prototypeNeed to understand property lookup chain
- Simple exampleCreate a date var named “instance”Define a new property on the varCall several methods
- PLC for instance var looks like thisInstance prototype = DateDate prototype = ObjectJS uses PLC to find values of referenced properties
- Look up instance.fooJS finds it on the var itselfStops looking
- Lookup instance.getTimeDoesn’t find it on the varFinds it on DateStops looking
- Lookup instance.hasOwnPropertyDoesn’t find it on varDoesn’t find it on DateFinds it on Object
- Prototypes are put together different than most
- More complicated exampleRex is var instance of PoodlePoodle prototype = DogDog prototype = Object
- Closer look at DogFunctionAll functions have prototype propertyPrototype defaults to ObjectConstructor is Function paired with NEW operatorUsed to create instances
- Dog’s prototype property used to build the templateFunctions on a prototype are methodsNon-functions on a prototype are propertiesAnything defined on function’s prototype available to instances
- Poodle is second typeFunction, just like DogInheritanceSet Poodle.prototype to new instance of DogCreates link between Poodle and Dog in PLCCreate properties on Poodle.prototypeAvailable to instances of Poodle
- Rex is instance of PoodleProperty “name” defined on rex – instance propertyHas access to all of Poodle’s prototype propertiesAnd to other properties up PLC
- Probably recognize THIS operatorLook at how THIS interacts with prototypeIn example:Socks and fluffy both instances of CatCat inherits from Object
- When call socks.speakFinds speak property on Cat.prototypeInside of speak, encounter THISProperties on THIS walk PLC starting at instanceGreeting not a property of socks instanceGreeting is a property of Cat prototype
- When call fluffy.speakSpeak function found on Cat.prototype, same as socksUnlike socks, fluffy has own greeting propertylookup stops at instance
- Functions have call method that lets set execution contextTHIS operator refers back to execution context
- When sayFoo called with exec context objTHIS = obj
- Calling a method on an instance is same asUsing CALL to supply instance as exec context prototype method
- Shown some basic examples so far, but don’t really take advantageDive deeper into inheritance
- In example:Container type hasarray that it can store items inMethod to add itemsinherits from ObjectLimitedContainerInherits from ContainerChanges inherited behavior to limit how many items can be in array
- Behavior in Container constructor creates items arrayTo get LC to also have that behaviorCALL Container constructor with THIS as exec context within LC constructor
- Container’s addItem method just pushes into arrayWant to set a limit to how many items can be in arrayDefine new addItem method on LC prototypeThe new addItem is higher in the PLC, so it will be found before old oneAdd logic into new method to throw error if there are too many itemsCALL Container’s addItem method with THIS as exec context to get original behavior
- Have kind of a patchwork natureCan take advantage of that to bring together lots of complicated behaviors
- In example, CatDog borrows behavior from Cat and DogCat instances are furious when call swim methodDog instances are delightedCatDog is both delighted and furious when you call its swim method
- May have noticed an issue in earlier examples
- Have two types: Parent and ChildChild inherits from parent
- When Child linked to ParentParent constructor is calledParent constructor has undesirable behaviorAlert goes off when set up inheritance
- Get around issue with a simple helper function
- Helper:Creates intermediate function that does nothingAssigns parent prototype to itInstantiates intermediate as prototypeBecause prototype is same b/t intermediate and parent, PLC stays intactAlso define constructor on child while we’re at itNo more undesirable behavior
- Prototypes have never been accused of being very prettyBut they are very powerful
- Up to now, haven’t had any real world examplesLet’s see what they can really doEXAMPLEPretty standard HTML formCommon problem is validating a formLet’s do it with prototypes!
- Helper:Creates intermediate function that does nothingAssigns parent prototype to itInstantiates intermediate as prototypeBecause prototype is same b/t intermediate and parent, PLC stays intactAlso define constructor on child while we’re at itNo more undesirable behavior
- Helper:Creates intermediate function that does nothingAssigns parent prototype to itInstantiates intermediate as prototypeBecause prototype is same b/t intermediate and parent, PLC stays intactAlso define constructor on child while we’re at itNo more undesirable behavior
- And do a really good job of itStart to get into trouble when depend totally on the libraryStart to get into bad trouble when depending totally on plugins
- Easy to…BuildModifyExpand on complex interactions
- Help you design the interactionthe way it needs to workand in a reusable, extensible way that plays well with others
- Any questions?