bobby | @mrbobbybryant #wcnash Javascript Prototypal Inheritance. How its different, and why you need to know it Bobby Bryant
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
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.
Related Documents
