word camp c bus 2016

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

Upload: bobby-bryant

Post on 09-Jan-2017

75 views

Category:

Internet


0 download

TRANSCRIPT

Page 1: Word camp c bus 2016

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

Object Creation Patterns in JavaScript

Bobby Bryant

Page 2: Word camp c bus 2016

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

About Me

• Web Engineer at 10up

• Father of 3

• JavaScript Junkie

Page 3: Word camp c bus 2016

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

Why Cover such a weird topic?

Page 4: Word camp c bus 2016

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

Page 5: Word camp c bus 2016

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

Classical vs Prototypal Inheritance

Page 6: Word camp c bus 2016

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.

Page 7: Word camp c bus 2016

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.

Page 8: Word camp c bus 2016

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

Page 9: Word camp c bus 2016

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

How Does JavaScript use these prototypes?

Page 10: Word camp c bus 2016

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

Page 11: Word camp c bus 2016

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

Lots of them

Page 12: Word camp c bus 2016

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

Understanding the Prototype

Page 13: Word camp c bus 2016

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

Prototypal Inheritance

Page 14: Word camp c bus 2016

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

Prototypal Inheritance

Page 15: Word camp c bus 2016

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

Static Methods

Page 16: Word camp c bus 2016

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

Constructor

Page 17: Word camp c bus 2016

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

Extending a Prototype

Page 18: Word camp c bus 2016

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

Object Literal

Page 19: Word camp c bus 2016

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

Delegation

Page 20: Word camp c bus 2016

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

Delegation

Page 21: Word camp c bus 2016

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

Object Creation Patterns

Page 22: Word camp c bus 2016

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

Object.create

Page 23: Word camp c bus 2016

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

Factory Function

Page 24: Word camp c bus 2016

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

Factory Fn #2

Page 25: Word camp c bus 2016

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

Composition vs Inheritance

Page 26: Word camp c bus 2016

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.

Page 27: Word camp c bus 2016

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

Object.assign

Page 28: Word camp c bus 2016

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

Object.assign

Page 29: Word camp c bus 2016

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

Composition

Page 30: Word camp c bus 2016

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