wordcamp nashville 2016

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.