bobby | @mrbobbybryant #wcnash
Javascript Prototypal Inheritance.
How its different, and why you need to know itBobby Bryant
Bobby Bryant | @mrbobbybryant #wcnash
About Me
• Web Engineer at 10up
• Father of 3
• JavaScript Junkie
Bobby Bryant | @mrbobbybryant #wcnash
Why Cover such a weird topic?
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
Bobby Bryant | @mrbobbybryant #wcnash
Classical vs Prototypal Inheritance
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.
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.
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.”
Bobby Bryant | @mrbobbybryant #wcnash
How Does JavaScript use these prototypes?
Bobby Bryant | @mrbobbybryant #wcnash
Bobby Bryant | @mrbobbybryant #wcnash
Lots of them
Bobby Bryant | @mrbobbybryant #wcnash
Understanding the Prototype
Bobby Bryant | @mrbobbybryant #wcnash
Prototypal Inheritance
Bobby Bryant | @mrbobbybryant #wcnash
Prototypal Inheritance
Bobby Bryant | @mrbobbybryant #wcnash
Static Methods
Bobby Bryant | @mrbobbybryant #wcnash
Real World Example
Bobby Bryant | @mrbobbybryant #wcnash
Constructor
Bobby Bryant | @mrbobbybryant #wcnash
Extending a Prototype
Bobby Bryant | @mrbobbybryant #wcnash
Object Literal
Bobby Bryant | @mrbobbybryant #wcnash
Delegation
Bobby Bryant | @mrbobbybryant #wcnash
Delegation
Bobby Bryant | @mrbobbybryant #wcnash
Object Creation Patterns
Bobby Bryant | @mrbobbybryant #wcnash
Object.create
Bobby Bryant | @mrbobbybryant #wcnash
Factory Function
Bobby Bryant | @mrbobbybryant #wcnash
Factory Fn #2
Bobby Bryant | @mrbobbybryant #wcnash
Composition vs Inheritance
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.
Bobby Bryant | @mrbobbybryant #wcnash
Object.assign
Bobby Bryant | @mrbobbybryant #wcnash
Object.assign
Bobby Bryant | @mrbobbybryant #wcnash
Composition
Bobby Bryant | @mrbobbybryant #wcnash
ES6 Classes
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
Bobby Bryant | @mrbobbybryant #wcnash
Delegation again
bobby | @mrbobbybryant #wcnash
Thank You!I have a Javascript Problem.