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.

WordCamp Nashville 2016


Published on

A big hurdle for WordPress Developers when jumping into Javascript development is the paradigm switch from PHP’s Class based classical inheritance to Javascript’s more Functional prototypal inheritance.

In this talk we will be taking an in-depth look at how objects work in Javascript. We will also be look at different ways to handle inheritance in Javascript. In addition to reviewing what JS Prototypes are, we will also spend some time looking at object creation patterns in JS. How they differ from PHP, and in some ways how they are similar. We will even cover cool things that Javascript lets us do like borrowing methods from other objects. And much much more.

Published in: Internet
  • Be the first to comment

  • Be the first to like this

WordCamp Nashville 2016

  1. 1. bobby | @mrbobbybryant #wcnash Javascript Prototypal Inheritance. How its different, and why you need to know it Bobby Bryant
  2. 2. Bobby Bryant | @mrbobbybryant #wcnash About Me • Web Engineer at 10up • Father of 3 • JavaScript Junkie
  3. 3. Bobby Bryant | @mrbobbybryant #wcnash Why Cover such a weird topic?
  4. 4. Bobby Bryant | @mrbobbybryant #wcnash –Kyle Simpson @getify “Where it takes a pretty in-depth knowledge of a language like C or C++ to write a full-scale program, full-scale production JavaScript can, and often does, barely scratch the surface of what the language can do.”
  5. 5. Bobby Bryant | @mrbobbybryant #wcnash Classical vs Prototypal Inheritance
  6. 6. Bobby Bryant | @mrbobbybryant #wcnash Classical Inheritance • Allows you to create new objects using a class as a blueprint. • A blueprint as a few characteristics that make it distinct. • It implies that if you follow the instruction you will successfully create your object. • Class Based languages are built around the concept of: • Building base classes. • Extending the base classes to build a hierarchy of inheritance.
  7. 7. Bobby Bryant | @mrbobbybryant #wcnash Classical Inheritance • Class Based languages are built around the concept of: • Building Base Classes. • Extending the base classes to build a hierarchy of inheritance.
  8. 8. Bobby Bryant | @mrbobbybryant #wcnash Prototypal Inheritance • A prototype is one step farther than a blueprint. • It implies that you have a working version of something. • It not a contract that says if you follow these steps you will have a working object. • It implies that, “here is a working object, use it as is or make copies if you want.”
  9. 9. Bobby Bryant | @mrbobbybryant #wcnash How Does JavaScript use these prototypes?
  10. 10. Bobby Bryant | @mrbobbybryant #wcnash
  11. 11. Bobby Bryant | @mrbobbybryant #wcnash Lots of them
  12. 12. Bobby Bryant | @mrbobbybryant #wcnash Understanding the Prototype
  13. 13. Bobby Bryant | @mrbobbybryant #wcnash Prototypal Inheritance
  14. 14. Bobby Bryant | @mrbobbybryant #wcnash Prototypal Inheritance
  15. 15. Bobby Bryant | @mrbobbybryant #wcnash Static Methods
  16. 16. Bobby Bryant | @mrbobbybryant #wcnash Real World Example
  17. 17. Bobby Bryant | @mrbobbybryant #wcnash Constructor
  18. 18. Bobby Bryant | @mrbobbybryant #wcnash Extending a Prototype
  19. 19. Bobby Bryant | @mrbobbybryant #wcnash Object Literal
  20. 20. Bobby Bryant | @mrbobbybryant #wcnash Delegation
  21. 21. Bobby Bryant | @mrbobbybryant #wcnash Delegation
  22. 22. Bobby Bryant | @mrbobbybryant #wcnash Object Creation Patterns
  23. 23. Bobby Bryant | @mrbobbybryant #wcnash Object.create
  24. 24. Bobby Bryant | @mrbobbybryant #wcnash Factory Function
  25. 25. Bobby Bryant | @mrbobbybryant #wcnash Factory Fn #2
  26. 26. Bobby Bryant | @mrbobbybryant #wcnash Composition vs Inheritance
  27. 27. Bobby Bryant | @mrbobbybryant #wcnash Currently in the larger JS world, there is actually a completely different paradigm growing. Functional Programming. And at its core functional programming is about Composition over Inheritance.
  28. 28. Bobby Bryant | @mrbobbybryant #wcnash Object.assign
  29. 29. Bobby Bryant | @mrbobbybryant #wcnash Object.assign
  30. 30. Bobby Bryant | @mrbobbybryant #wcnash Composition
  31. 31. Bobby Bryant | @mrbobbybryant #wcnash ES6 Classes
  32. 32. Bobby Bryant | @mrbobbybryant #wcnash Is class syntax in ECMAScript 6 just a syntactic sugar for classical prototypes? syntactic-sugar-for-classical-prototypes
  33. 33. Bobby Bryant | @mrbobbybryant #wcnash Delegation again
  34. 34. bobby | @mrbobbybryant #wcnash Thank You! I have a Javascript Problem.