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.

1. bobby | @mrbobbybryant #wcnash
Javascript Prototypal
Inheritance.
How its different, and why you need
to know it
Bobby Bryant

2. Bobby Bryant | @mrbobbybryant #wcnash
About Me
• Web Engineer at 10up
• Father of 3
• JavaScript Junkie

3. Bobby Bryant | @mrbobbybryant #wcnash
Why Cover such a
weird topic?

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.”
https://github.com/getify/You-Dont-Know-JS

5. Bobby Bryant | @mrbobbybryant #wcnash
Classical vs Prototypal
Inheritance

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. 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. 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. Bobby Bryant | @mrbobbybryant #wcnash
How Does JavaScript
use these prototypes?

10. Bobby Bryant | @mrbobbybryant #wcnash

11. Bobby Bryant | @mrbobbybryant #wcnash
Lots of them

12. Bobby Bryant | @mrbobbybryant #wcnash
Understanding the
Prototype

13. Bobby Bryant | @mrbobbybryant #wcnash
Prototypal Inheritance

14. Bobby Bryant | @mrbobbybryant #wcnash
Prototypal Inheritance

15. Bobby Bryant | @mrbobbybryant #wcnash
Static Methods

16. Bobby Bryant | @mrbobbybryant #wcnash
Real World Example

17. Bobby Bryant | @mrbobbybryant #wcnash
Constructor

18. Bobby Bryant | @mrbobbybryant #wcnash
Extending a Prototype

19. Bobby Bryant | @mrbobbybryant #wcnash
Object Literal

20. Bobby Bryant | @mrbobbybryant #wcnash
Delegation

21. Bobby Bryant | @mrbobbybryant #wcnash
Delegation

22. Bobby Bryant | @mrbobbybryant #wcnash
Object Creation
Patterns

23. Bobby Bryant | @mrbobbybryant #wcnash
Object.create

24. Bobby Bryant | @mrbobbybryant #wcnash
Factory Function

25. Bobby Bryant | @mrbobbybryant #wcnash
Factory Fn #2

26. Bobby Bryant | @mrbobbybryant #wcnash
Composition vs
Inheritance

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. Bobby Bryant | @mrbobbybryant #wcnash
Object.assign

29. Bobby Bryant | @mrbobbybryant #wcnash
Object.assign

30. Bobby Bryant | @mrbobbybryant #wcnash
Composition

31. Bobby Bryant | @mrbobbybryant #wcnash
ES6 Classes

32. Bobby Bryant | @mrbobbybryant #wcnash
Is class syntax in ECMAScript 6 just a
syntactic sugar for classical prototypes?
https://www.quora.com/Is-class-syntax-in-ECMAScript-6-just-a-
syntactic-sugar-for-classical-prototypes

33. Bobby Bryant | @mrbobbybryant #wcnash
Delegation again

34. bobby | @mrbobbybryant #wcnash
Thank You!
I have a Javascript Problem.