Upload
bobby-bryant
View
75
Download
0
Embed Size (px)
Citation preview
Name | @twitter #hashtag | url:slides.com
Object Creation Patterns in JavaScript
Bobby Bryant
Name | @twitter #hashtag | url:slides.com
About Me
• Web Engineer at 10up
• Father of 3
• JavaScript Junkie
Name | @twitter #hashtag | url:slides.com
Why Cover such a weird topic?
Name | @twitter #hashtag | url:slides.com
–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
Name | @twitter #hashtag | url:slides.com
Classical vs Prototypal Inheritance
Name | @twitter #hashtag | url:slides.com
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.
Name | @twitter #hashtag | url:slides.com
Classical Inheritance
• Class Based languages are built around the concept of:
• Building Base Classes.
• Extending the base classes to build a hierarchy of inheritance.
Name | @twitter #hashtag | url:slides.com
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.”
Name | @twitter #hashtag | url:slides.com
How Does JavaScript use these prototypes?
Name | @twitter #hashtag | url:slides.com
Name | @twitter #hashtag | url:slides.com
Lots of them
Name | @twitter #hashtag | url:slides.com
Understanding the Prototype
Name | @twitter #hashtag | url:slides.com
Prototypal Inheritance
Name | @twitter #hashtag | url:slides.com
Prototypal Inheritance
Name | @twitter #hashtag | url:slides.com
Static Methods
Name | @twitter #hashtag | url:slides.com
Constructor
Name | @twitter #hashtag | url:slides.com
Extending a Prototype
Name | @twitter #hashtag | url:slides.com
Object Literal
Name | @twitter #hashtag | url:slides.com
Delegation
Name | @twitter #hashtag | url:slides.com
Delegation
Name | @twitter #hashtag | url:slides.com
Object Creation Patterns
Name | @twitter #hashtag | url:slides.com
Object.create
Name | @twitter #hashtag | url:slides.com
Factory Function
Name | @twitter #hashtag | url:slides.com
Factory Fn #2
Name | @twitter #hashtag | url:slides.com
Composition vs Inheritance
Name | @twitter #hashtag | url:slides.com
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.
Name | @twitter #hashtag | url:slides.com
Object.assign
Name | @twitter #hashtag | url:slides.com
Object.assign
Name | @twitter #hashtag | url:slides.com
Composition
Name | @twitter #hashtag | url:slides.com
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