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.