The document is a presentation about object creation patterns in JavaScript. It discusses the differences between classical and prototypal inheritance, how JavaScript uses prototypal inheritance, and various patterns for object creation in JavaScript like Object.create(), factory functions, and composition using Object.assign(). It also notes that while prototypal inheritance is how JavaScript works under the hood, functional programming using composition is growing in popularity over inheritance-based approaches.

1. Name | @twitter #hashtag | url:slides.com
Object Creation
Patterns in JavaScript
Bobby Bryant

2. Name | @twitter #hashtag | url:slides.com
About Me
• Web Engineer at 10up
• Father of 3
• JavaScript Junkie

3. Name | @twitter #hashtag | url:slides.com
Why Cover such a
weird topic?

4. 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

5. Name | @twitter #hashtag | url:slides.com
Classical vs Prototypal
Inheritance

6. 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.

7. 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.

8. 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.”

9. Name | @twitter #hashtag | url:slides.com
How Does JavaScript
use these prototypes?

10. Name | @twitter #hashtag | url:slides.com

11. Name | @twitter #hashtag | url:slides.com
Lots of them

12. Name | @twitter #hashtag | url:slides.com
Understanding the
Prototype

13. Name | @twitter #hashtag | url:slides.com
Prototypal Inheritance

14. Name | @twitter #hashtag | url:slides.com
Prototypal Inheritance

15. Name | @twitter #hashtag | url:slides.com
Static Methods

16. Name | @twitter #hashtag | url:slides.com
Constructor

17. Name | @twitter #hashtag | url:slides.com
Extending a Prototype

18. Name | @twitter #hashtag | url:slides.com
Object Literal

19. Name | @twitter #hashtag | url:slides.com
Delegation

20. Name | @twitter #hashtag | url:slides.com
Delegation

21. Name | @twitter #hashtag | url:slides.com
Object Creation
Patterns

22. Name | @twitter #hashtag | url:slides.com
Object.create

23. Name | @twitter #hashtag | url:slides.com
Factory Function

24. Name | @twitter #hashtag | url:slides.com
Factory Fn #2

25. Name | @twitter #hashtag | url:slides.com
Composition vs
Inheritance

26. 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.

27. Name | @twitter #hashtag | url:slides.com
Object.assign

28. Name | @twitter #hashtag | url:slides.com
Object.assign

29. Name | @twitter #hashtag | url:slides.com
Composition

30. 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