Kyle Simpson - Advanced JavaScript
-
Upload
abdurrachman-mappuji -
Category
Software
-
view
93 -
download
3
Transcript of Kyle Simpson - Advanced JavaScript
![Page 1: Kyle Simpson - Advanced JavaScript](https://reader038.fdocuments.us/reader038/viewer/2022102703/58ed3c101a28ab292d8b4587/html5/thumbnails/1.jpg)
1
![Page 3: Kyle Simpson - Advanced JavaScript](https://reader038.fdocuments.us/reader038/viewer/2022102703/58ed3c101a28ab292d8b4587/html5/thumbnails/3.jpg)
Kyle Simpson@getify
http://getify.me
http://speakerdeck.com/getify
3
![Page 5: Kyle Simpson - Advanced JavaScript](https://reader038.fdocuments.us/reader038/viewer/2022102703/58ed3c101a28ab292d8b4587/html5/thumbnails/5.jpg)
5
![Page 6: Kyle Simpson - Advanced JavaScript](https://reader038.fdocuments.us/reader038/viewer/2022102703/58ed3c101a28ab292d8b4587/html5/thumbnails/6.jpg)
6
![Page 7: Kyle Simpson - Advanced JavaScript](https://reader038.fdocuments.us/reader038/viewer/2022102703/58ed3c101a28ab292d8b4587/html5/thumbnails/7.jpg)
7
https://developer.mozilla.org/en-US/docs/JavaScript
https://github.com/rwldrn/idiomatic.js
http://www.ecma-international.org/ecma-262/5.1/
http://wiki.ecmascript.org/doku.php?id=harmony:proposals
![Page 8: Kyle Simpson - Advanced JavaScript](https://reader038.fdocuments.us/reader038/viewer/2022102703/58ed3c101a28ab292d8b4587/html5/thumbnails/8.jpg)
Advanced JavaScriptThe “What you need to know” Parts
8
![Page 9: Kyle Simpson - Advanced JavaScript](https://reader038.fdocuments.us/reader038/viewer/2022102703/58ed3c101a28ab292d8b4587/html5/thumbnails/9.jpg)
9
![Page 10: Kyle Simpson - Advanced JavaScript](https://reader038.fdocuments.us/reader038/viewer/2022102703/58ed3c101a28ab292d8b4587/html5/thumbnails/10.jpg)
Scope, Closures• Nested Scope• Hoisting• this• Closure
Agenda10
![Page 11: Kyle Simpson - Advanced JavaScript](https://reader038.fdocuments.us/reader038/viewer/2022102703/58ed3c101a28ab292d8b4587/html5/thumbnails/11.jpg)
Scope
Scope: where to look for things
11
![Page 12: Kyle Simpson - Advanced JavaScript](https://reader038.fdocuments.us/reader038/viewer/2022102703/58ed3c101a28ab292d8b4587/html5/thumbnails/12.jpg)
Scope
JavaScript has function scope only*
12
![Page 13: Kyle Simpson - Advanced JavaScript](https://reader038.fdocuments.us/reader038/viewer/2022102703/58ed3c101a28ab292d8b4587/html5/thumbnails/13.jpg)
Scope
13
![Page 14: Kyle Simpson - Advanced JavaScript](https://reader038.fdocuments.us/reader038/viewer/2022102703/58ed3c101a28ab292d8b4587/html5/thumbnails/14.jpg)
Scope
14
![Page 15: Kyle Simpson - Advanced JavaScript](https://reader038.fdocuments.us/reader038/viewer/2022102703/58ed3c101a28ab292d8b4587/html5/thumbnails/15.jpg)
Scope
15
![Page 16: Kyle Simpson - Advanced JavaScript](https://reader038.fdocuments.us/reader038/viewer/2022102703/58ed3c101a28ab292d8b4587/html5/thumbnails/16.jpg)
Scope: function scope?
16
![Page 17: Kyle Simpson - Advanced JavaScript](https://reader038.fdocuments.us/reader038/viewer/2022102703/58ed3c101a28ab292d8b4587/html5/thumbnails/17.jpg)
Scope: block scope?
17
![Page 18: Kyle Simpson - Advanced JavaScript](https://reader038.fdocuments.us/reader038/viewer/2022102703/58ed3c101a28ab292d8b4587/html5/thumbnails/18.jpg)
Scope
lexical scope
dynamic scope
18
![Page 19: Kyle Simpson - Advanced JavaScript](https://reader038.fdocuments.us/reader038/viewer/2022102703/58ed3c101a28ab292d8b4587/html5/thumbnails/19.jpg)
Scope
19
![Page 20: Kyle Simpson - Advanced JavaScript](https://reader038.fdocuments.us/reader038/viewer/2022102703/58ed3c101a28ab292d8b4587/html5/thumbnails/20.jpg)
Scope: lexical
20
![Page 21: Kyle Simpson - Advanced JavaScript](https://reader038.fdocuments.us/reader038/viewer/2022102703/58ed3c101a28ab292d8b4587/html5/thumbnails/21.jpg)
Scope: WAT!?
21
![Page 22: Kyle Simpson - Advanced JavaScript](https://reader038.fdocuments.us/reader038/viewer/2022102703/58ed3c101a28ab292d8b4587/html5/thumbnails/22.jpg)
Scope: WAT!?
22
![Page 23: Kyle Simpson - Advanced JavaScript](https://reader038.fdocuments.us/reader038/viewer/2022102703/58ed3c101a28ab292d8b4587/html5/thumbnails/23.jpg)
Function Scope
23
IIFE
http://benalman.com/news/2010/11/immediately-invoked-function-expression/
![Page 24: Kyle Simpson - Advanced JavaScript](https://reader038.fdocuments.us/reader038/viewer/2022102703/58ed3c101a28ab292d8b4587/html5/thumbnails/24.jpg)
Function Scope
24
![Page 25: Kyle Simpson - Advanced JavaScript](https://reader038.fdocuments.us/reader038/viewer/2022102703/58ed3c101a28ab292d8b4587/html5/thumbnails/25.jpg)
Block Scope
25
![Page 26: Kyle Simpson - Advanced JavaScript](https://reader038.fdocuments.us/reader038/viewer/2022102703/58ed3c101a28ab292d8b4587/html5/thumbnails/26.jpg)
Block Scope
let (ES6+)
26
![Page 27: Kyle Simpson - Advanced JavaScript](https://reader038.fdocuments.us/reader038/viewer/2022102703/58ed3c101a28ab292d8b4587/html5/thumbnails/27.jpg)
Block Scope: let
27
![Page 28: Kyle Simpson - Advanced JavaScript](https://reader038.fdocuments.us/reader038/viewer/2022102703/58ed3c101a28ab292d8b4587/html5/thumbnails/28.jpg)
Block Scope: let
28
![Page 29: Kyle Simpson - Advanced JavaScript](https://reader038.fdocuments.us/reader038/viewer/2022102703/58ed3c101a28ab292d8b4587/html5/thumbnails/29.jpg)
Block Scope: let
29
![Page 30: Kyle Simpson - Advanced JavaScript](https://reader038.fdocuments.us/reader038/viewer/2022102703/58ed3c101a28ab292d8b4587/html5/thumbnails/30.jpg)
Block Scope: let
30
https://gist.github.com/getify/5285514
![Page 31: Kyle Simpson - Advanced JavaScript](https://reader038.fdocuments.us/reader038/viewer/2022102703/58ed3c101a28ab292d8b4587/html5/thumbnails/31.jpg)
Block Scope: let
31
https://github.com/getify/let-er
![Page 32: Kyle Simpson - Advanced JavaScript](https://reader038.fdocuments.us/reader038/viewer/2022102703/58ed3c101a28ab292d8b4587/html5/thumbnails/32.jpg)
Block Scope: let
32
https://github.com/getify/let-er
![Page 33: Kyle Simpson - Advanced JavaScript](https://reader038.fdocuments.us/reader038/viewer/2022102703/58ed3c101a28ab292d8b4587/html5/thumbnails/33.jpg)
Scope
dynamic scope
33
![Page 34: Kyle Simpson - Advanced JavaScript](https://reader038.fdocuments.us/reader038/viewer/2022102703/58ed3c101a28ab292d8b4587/html5/thumbnails/34.jpg)
Scope: dynamic!?!?
34
![Page 35: Kyle Simpson - Advanced JavaScript](https://reader038.fdocuments.us/reader038/viewer/2022102703/58ed3c101a28ab292d8b4587/html5/thumbnails/35.jpg)
Scope
35
Quiz1. What type of scoping rule(s) does JavaScript have? Exceptions?2. What are the different ways you can create a new scope?3. What’s the difference between undeclared and undefined?
![Page 36: Kyle Simpson - Advanced JavaScript](https://reader038.fdocuments.us/reader038/viewer/2022102703/58ed3c101a28ab292d8b4587/html5/thumbnails/36.jpg)
Scope: hoisting
36
![Page 37: Kyle Simpson - Advanced JavaScript](https://reader038.fdocuments.us/reader038/viewer/2022102703/58ed3c101a28ab292d8b4587/html5/thumbnails/37.jpg)
Scope: hoisting
37
![Page 38: Kyle Simpson - Advanced JavaScript](https://reader038.fdocuments.us/reader038/viewer/2022102703/58ed3c101a28ab292d8b4587/html5/thumbnails/38.jpg)
Scope: hoisting
38
![Page 39: Kyle Simpson - Advanced JavaScript](https://reader038.fdocuments.us/reader038/viewer/2022102703/58ed3c101a28ab292d8b4587/html5/thumbnails/39.jpg)
Scope: hoisting
39
![Page 40: Kyle Simpson - Advanced JavaScript](https://reader038.fdocuments.us/reader038/viewer/2022102703/58ed3c101a28ab292d8b4587/html5/thumbnails/40.jpg)
Scope: hoisting
40
![Page 41: Kyle Simpson - Advanced JavaScript](https://reader038.fdocuments.us/reader038/viewer/2022102703/58ed3c101a28ab292d8b4587/html5/thumbnails/41.jpg)
Hoisting: functions first
41
![Page 42: Kyle Simpson - Advanced JavaScript](https://reader038.fdocuments.us/reader038/viewer/2022102703/58ed3c101a28ab292d8b4587/html5/thumbnails/42.jpg)
Hoisting: recursion
42
![Page 43: Kyle Simpson - Advanced JavaScript](https://reader038.fdocuments.us/reader038/viewer/2022102703/58ed3c101a28ab292d8b4587/html5/thumbnails/43.jpg)
Hoisting: let gotcha
43
![Page 44: Kyle Simpson - Advanced JavaScript](https://reader038.fdocuments.us/reader038/viewer/2022102703/58ed3c101a28ab292d8b4587/html5/thumbnails/44.jpg)
(exercise #1: 10min)
44
![Page 45: Kyle Simpson - Advanced JavaScript](https://reader038.fdocuments.us/reader038/viewer/2022102703/58ed3c101a28ab292d8b4587/html5/thumbnails/45.jpg)
this
45
![Page 46: Kyle Simpson - Advanced JavaScript](https://reader038.fdocuments.us/reader038/viewer/2022102703/58ed3c101a28ab292d8b4587/html5/thumbnails/46.jpg)
this
46
Every function, while executing, has a reference to its current execution context,
called this.
![Page 47: Kyle Simpson - Advanced JavaScript](https://reader038.fdocuments.us/reader038/viewer/2022102703/58ed3c101a28ab292d8b4587/html5/thumbnails/47.jpg)
this
47
Remember lexical scope vs. dynamic scope?
JavaScript’s version of “dynamic scope” is this.
![Page 48: Kyle Simpson - Advanced JavaScript](https://reader038.fdocuments.us/reader038/viewer/2022102703/58ed3c101a28ab292d8b4587/html5/thumbnails/48.jpg)
Scope
48
![Page 49: Kyle Simpson - Advanced JavaScript](https://reader038.fdocuments.us/reader038/viewer/2022102703/58ed3c101a28ab292d8b4587/html5/thumbnails/49.jpg)
this: implicit & default binding
49
![Page 50: Kyle Simpson - Advanced JavaScript](https://reader038.fdocuments.us/reader038/viewer/2022102703/58ed3c101a28ab292d8b4587/html5/thumbnails/50.jpg)
this: implicit & default binding
50
![Page 51: Kyle Simpson - Advanced JavaScript](https://reader038.fdocuments.us/reader038/viewer/2022102703/58ed3c101a28ab292d8b4587/html5/thumbnails/51.jpg)
this: binding confusion
51
![Page 52: Kyle Simpson - Advanced JavaScript](https://reader038.fdocuments.us/reader038/viewer/2022102703/58ed3c101a28ab292d8b4587/html5/thumbnails/52.jpg)
this: binding confusion
52
![Page 53: Kyle Simpson - Advanced JavaScript](https://reader038.fdocuments.us/reader038/viewer/2022102703/58ed3c101a28ab292d8b4587/html5/thumbnails/53.jpg)
this: explicit binding
53
![Page 54: Kyle Simpson - Advanced JavaScript](https://reader038.fdocuments.us/reader038/viewer/2022102703/58ed3c101a28ab292d8b4587/html5/thumbnails/54.jpg)
this: hard binding
54
![Page 55: Kyle Simpson - Advanced JavaScript](https://reader038.fdocuments.us/reader038/viewer/2022102703/58ed3c101a28ab292d8b4587/html5/thumbnails/55.jpg)
this: hard binding
55
![Page 56: Kyle Simpson - Advanced JavaScript](https://reader038.fdocuments.us/reader038/viewer/2022102703/58ed3c101a28ab292d8b4587/html5/thumbnails/56.jpg)
this: hard binding
56
![Page 57: Kyle Simpson - Advanced JavaScript](https://reader038.fdocuments.us/reader038/viewer/2022102703/58ed3c101a28ab292d8b4587/html5/thumbnails/57.jpg)
this: hard binding
57https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Function/bind
![Page 58: Kyle Simpson - Advanced JavaScript](https://reader038.fdocuments.us/reader038/viewer/2022102703/58ed3c101a28ab292d8b4587/html5/thumbnails/58.jpg)
this: new
58
![Page 59: Kyle Simpson - Advanced JavaScript](https://reader038.fdocuments.us/reader038/viewer/2022102703/58ed3c101a28ab292d8b4587/html5/thumbnails/59.jpg)
this: new, order of precedence
59
![Page 60: Kyle Simpson - Advanced JavaScript](https://reader038.fdocuments.us/reader038/viewer/2022102703/58ed3c101a28ab292d8b4587/html5/thumbnails/60.jpg)
this: determination
60
1. Was the function called with `new`?2. Was the function called with `call` or `apply` specifying an explicit this?3. Was the function called via a containing/owning object (context)?4. DEFAULT: global object (except strict mode)
![Page 61: Kyle Simpson - Advanced JavaScript](https://reader038.fdocuments.us/reader038/viewer/2022102703/58ed3c101a28ab292d8b4587/html5/thumbnails/61.jpg)
this
61
Quiz1. What determines which object a function’s this points to? What’s the default?2. How do you “borrow” a function by implicit assignment of this?3. How do you explicitly bind this?4. How can you seal a specific this to a function? Why do that? Why not?5. How do you create a new this?
![Page 62: Kyle Simpson - Advanced JavaScript](https://reader038.fdocuments.us/reader038/viewer/2022102703/58ed3c101a28ab292d8b4587/html5/thumbnails/62.jpg)
Closure
62
![Page 63: Kyle Simpson - Advanced JavaScript](https://reader038.fdocuments.us/reader038/viewer/2022102703/58ed3c101a28ab292d8b4587/html5/thumbnails/63.jpg)
Closure
63
Remember lexical scope?
Closure absolutely depends on it. Go review it if you’re still
confused. :)
![Page 64: Kyle Simpson - Advanced JavaScript](https://reader038.fdocuments.us/reader038/viewer/2022102703/58ed3c101a28ab292d8b4587/html5/thumbnails/64.jpg)
Closure
64
Closure is when a function “remembers” its lexical scope even when the function is
executed outside that lexical scope.
![Page 65: Kyle Simpson - Advanced JavaScript](https://reader038.fdocuments.us/reader038/viewer/2022102703/58ed3c101a28ab292d8b4587/html5/thumbnails/65.jpg)
Closure
65
![Page 66: Kyle Simpson - Advanced JavaScript](https://reader038.fdocuments.us/reader038/viewer/2022102703/58ed3c101a28ab292d8b4587/html5/thumbnails/66.jpg)
Closure
66
![Page 67: Kyle Simpson - Advanced JavaScript](https://reader038.fdocuments.us/reader038/viewer/2022102703/58ed3c101a28ab292d8b4587/html5/thumbnails/67.jpg)
Closure
67
![Page 68: Kyle Simpson - Advanced JavaScript](https://reader038.fdocuments.us/reader038/viewer/2022102703/58ed3c101a28ab292d8b4587/html5/thumbnails/68.jpg)
Closure
68
![Page 69: Kyle Simpson - Advanced JavaScript](https://reader038.fdocuments.us/reader038/viewer/2022102703/58ed3c101a28ab292d8b4587/html5/thumbnails/69.jpg)
Closure: shared scope
69
![Page 70: Kyle Simpson - Advanced JavaScript](https://reader038.fdocuments.us/reader038/viewer/2022102703/58ed3c101a28ab292d8b4587/html5/thumbnails/70.jpg)
Closure: nested scope
70
![Page 71: Kyle Simpson - Advanced JavaScript](https://reader038.fdocuments.us/reader038/viewer/2022102703/58ed3c101a28ab292d8b4587/html5/thumbnails/71.jpg)
Closure: loops
71
![Page 72: Kyle Simpson - Advanced JavaScript](https://reader038.fdocuments.us/reader038/viewer/2022102703/58ed3c101a28ab292d8b4587/html5/thumbnails/72.jpg)
Closure: loops
72
![Page 73: Kyle Simpson - Advanced JavaScript](https://reader038.fdocuments.us/reader038/viewer/2022102703/58ed3c101a28ab292d8b4587/html5/thumbnails/73.jpg)
Closure: loops + block scope
73
![Page 74: Kyle Simpson - Advanced JavaScript](https://reader038.fdocuments.us/reader038/viewer/2022102703/58ed3c101a28ab292d8b4587/html5/thumbnails/74.jpg)
Closure?
74
![Page 75: Kyle Simpson - Advanced JavaScript](https://reader038.fdocuments.us/reader038/viewer/2022102703/58ed3c101a28ab292d8b4587/html5/thumbnails/75.jpg)
Closure: classic module pattern
75
![Page 76: Kyle Simpson - Advanced JavaScript](https://reader038.fdocuments.us/reader038/viewer/2022102703/58ed3c101a28ab292d8b4587/html5/thumbnails/76.jpg)
Closure: modified module pattern
76
![Page 77: Kyle Simpson - Advanced JavaScript](https://reader038.fdocuments.us/reader038/viewer/2022102703/58ed3c101a28ab292d8b4587/html5/thumbnails/77.jpg)
Closure: modern module pattern
77
![Page 78: Kyle Simpson - Advanced JavaScript](https://reader038.fdocuments.us/reader038/viewer/2022102703/58ed3c101a28ab292d8b4587/html5/thumbnails/78.jpg)
Closure: future/ES6+ module pattern
78foo.js:
![Page 79: Kyle Simpson - Advanced JavaScript](https://reader038.fdocuments.us/reader038/viewer/2022102703/58ed3c101a28ab292d8b4587/html5/thumbnails/79.jpg)
Closure
79
Quiz1. What is a closure and how is it created?2. How long does its scope stay around?3. Why doesn’t a function callback inside a loop behave as expected? How do we fix it?4. How do you use a closure to create an encapsulated module? What’s the benefits of that approach?
![Page 80: Kyle Simpson - Advanced JavaScript](https://reader038.fdocuments.us/reader038/viewer/2022102703/58ed3c101a28ab292d8b4587/html5/thumbnails/80.jpg)
(exercise #2: 20min)
80
![Page 81: Kyle Simpson - Advanced JavaScript](https://reader038.fdocuments.us/reader038/viewer/2022102703/58ed3c101a28ab292d8b4587/html5/thumbnails/81.jpg)
81
![Page 82: Kyle Simpson - Advanced JavaScript](https://reader038.fdocuments.us/reader038/viewer/2022102703/58ed3c101a28ab292d8b4587/html5/thumbnails/82.jpg)
Object-Orienting• Common OO Patterns• prototype• “Inheritance” vs. “Behavior Delegation”
(OO vs. OLOO)
Agenda82
![Page 83: Kyle Simpson - Advanced JavaScript](https://reader038.fdocuments.us/reader038/viewer/2022102703/58ed3c101a28ab292d8b4587/html5/thumbnails/83.jpg)
OO Design Patterns
83
![Page 84: Kyle Simpson - Advanced JavaScript](https://reader038.fdocuments.us/reader038/viewer/2022102703/58ed3c101a28ab292d8b4587/html5/thumbnails/84.jpg)
OO Design Patterns
84
Singleton
![Page 85: Kyle Simpson - Advanced JavaScript](https://reader038.fdocuments.us/reader038/viewer/2022102703/58ed3c101a28ab292d8b4587/html5/thumbnails/85.jpg)
OO Design Patterns: singleton
85
![Page 86: Kyle Simpson - Advanced JavaScript](https://reader038.fdocuments.us/reader038/viewer/2022102703/58ed3c101a28ab292d8b4587/html5/thumbnails/86.jpg)
OO Design Patterns: singleton
86
![Page 87: Kyle Simpson - Advanced JavaScript](https://reader038.fdocuments.us/reader038/viewer/2022102703/58ed3c101a28ab292d8b4587/html5/thumbnails/87.jpg)
OO Design Patterns
87
Observer
![Page 88: Kyle Simpson - Advanced JavaScript](https://reader038.fdocuments.us/reader038/viewer/2022102703/58ed3c101a28ab292d8b4587/html5/thumbnails/88.jpg)
OO Design Patterns: observer
88
![Page 89: Kyle Simpson - Advanced JavaScript](https://reader038.fdocuments.us/reader038/viewer/2022102703/58ed3c101a28ab292d8b4587/html5/thumbnails/89.jpg)
prototype
89
![Page 90: Kyle Simpson - Advanced JavaScript](https://reader038.fdocuments.us/reader038/viewer/2022102703/58ed3c101a28ab292d8b4587/html5/thumbnails/90.jpg)
prototype
90
Every single “object” is built by a constructor
function
![Page 91: Kyle Simpson - Advanced JavaScript](https://reader038.fdocuments.us/reader038/viewer/2022102703/58ed3c101a28ab292d8b4587/html5/thumbnails/91.jpg)
prototype
91
Each time a constructor is called, a new object is
created
![Page 92: Kyle Simpson - Advanced JavaScript](https://reader038.fdocuments.us/reader038/viewer/2022102703/58ed3c101a28ab292d8b4587/html5/thumbnails/92.jpg)
prototype
92
A constructor makes an object “based on” its own
prototype
![Page 93: Kyle Simpson - Advanced JavaScript](https://reader038.fdocuments.us/reader038/viewer/2022102703/58ed3c101a28ab292d8b4587/html5/thumbnails/93.jpg)
prototype
93
A constructor makes an object linked to its own
prototype
![Page 94: Kyle Simpson - Advanced JavaScript](https://reader038.fdocuments.us/reader038/viewer/2022102703/58ed3c101a28ab292d8b4587/html5/thumbnails/94.jpg)
prototype
94
![Page 95: Kyle Simpson - Advanced JavaScript](https://reader038.fdocuments.us/reader038/viewer/2022102703/58ed3c101a28ab292d8b4587/html5/thumbnails/95.jpg)
prototype
95
![Page 96: Kyle Simpson - Advanced JavaScript](https://reader038.fdocuments.us/reader038/viewer/2022102703/58ed3c101a28ab292d8b4587/html5/thumbnails/96.jpg)
prototype
96
![Page 97: Kyle Simpson - Advanced JavaScript](https://reader038.fdocuments.us/reader038/viewer/2022102703/58ed3c101a28ab292d8b4587/html5/thumbnails/97.jpg)
prototype
97
![Page 98: Kyle Simpson - Advanced JavaScript](https://reader038.fdocuments.us/reader038/viewer/2022102703/58ed3c101a28ab292d8b4587/html5/thumbnails/98.jpg)
Scope
98
![Page 99: Kyle Simpson - Advanced JavaScript](https://reader038.fdocuments.us/reader038/viewer/2022102703/58ed3c101a28ab292d8b4587/html5/thumbnails/99.jpg)
prototype: objects linked
99
![Page 100: Kyle Simpson - Advanced JavaScript](https://reader038.fdocuments.us/reader038/viewer/2022102703/58ed3c101a28ab292d8b4587/html5/thumbnails/100.jpg)
prototype: objects linked
100
![Page 101: Kyle Simpson - Advanced JavaScript](https://reader038.fdocuments.us/reader038/viewer/2022102703/58ed3c101a28ab292d8b4587/html5/thumbnails/101.jpg)
prototype: objects linked
101
![Page 102: Kyle Simpson - Advanced JavaScript](https://reader038.fdocuments.us/reader038/viewer/2022102703/58ed3c101a28ab292d8b4587/html5/thumbnails/102.jpg)
prototype
102
Quiz1. What is a constructor?2. What is a [[Prototype]] and where does it come from?3. How does a [[Prototype]] affect an object?4. How do we find out where an object’s [[Prototype]] points to (3 ways)?
![Page 103: Kyle Simpson - Advanced JavaScript](https://reader038.fdocuments.us/reader038/viewer/2022102703/58ed3c101a28ab292d8b4587/html5/thumbnails/103.jpg)
prototype: this redux
103
remember how this has a pesky way of getting
unassigned?
![Page 104: Kyle Simpson - Advanced JavaScript](https://reader038.fdocuments.us/reader038/viewer/2022102703/58ed3c101a28ab292d8b4587/html5/thumbnails/104.jpg)
prototype: this redux
104
![Page 105: Kyle Simpson - Advanced JavaScript](https://reader038.fdocuments.us/reader038/viewer/2022102703/58ed3c101a28ab292d8b4587/html5/thumbnails/105.jpg)
(exercise #3: 10min)
105
![Page 106: Kyle Simpson - Advanced JavaScript](https://reader038.fdocuments.us/reader038/viewer/2022102703/58ed3c101a28ab292d8b4587/html5/thumbnails/106.jpg)
OO
106
Inheritance
![Page 107: Kyle Simpson - Advanced JavaScript](https://reader038.fdocuments.us/reader038/viewer/2022102703/58ed3c101a28ab292d8b4587/html5/thumbnails/107.jpg)
OO: classical inheritance
107
Foo
Bar
a1
a2
b1
b2
![Page 108: Kyle Simpson - Advanced JavaScript](https://reader038.fdocuments.us/reader038/viewer/2022102703/58ed3c101a28ab292d8b4587/html5/thumbnails/108.jpg)
OO: “prototypal inheritance”
108
Foo.prototype a1
a2
b1
b2
(another design pattern)
Bar.prototype
![Page 109: Kyle Simpson - Advanced JavaScript](https://reader038.fdocuments.us/reader038/viewer/2022102703/58ed3c101a28ab292d8b4587/html5/thumbnails/109.jpg)
OO: js
109
JS “Inheritance”“Behavior Delegation”
![Page 110: Kyle Simpson - Advanced JavaScript](https://reader038.fdocuments.us/reader038/viewer/2022102703/58ed3c101a28ab292d8b4587/html5/thumbnails/110.jpg)
OO: inheritance delegation
110
![Page 111: Kyle Simpson - Advanced JavaScript](https://reader038.fdocuments.us/reader038/viewer/2022102703/58ed3c101a28ab292d8b4587/html5/thumbnails/111.jpg)
OO: behavior delegation
111
Let’s simplify!
![Page 112: Kyle Simpson - Advanced JavaScript](https://reader038.fdocuments.us/reader038/viewer/2022102703/58ed3c101a28ab292d8b4587/html5/thumbnails/112.jpg)
OLOO
112
OLOO:Objects Linked to Other
Objects
![Page 113: Kyle Simpson - Advanced JavaScript](https://reader038.fdocuments.us/reader038/viewer/2022102703/58ed3c101a28ab292d8b4587/html5/thumbnails/113.jpg)
OLOO: delegated objects
113
![Page 114: Kyle Simpson - Advanced JavaScript](https://reader038.fdocuments.us/reader038/viewer/2022102703/58ed3c101a28ab292d8b4587/html5/thumbnails/114.jpg)
OLOO: delegated objects
114
![Page 115: Kyle Simpson - Advanced JavaScript](https://reader038.fdocuments.us/reader038/viewer/2022102703/58ed3c101a28ab292d8b4587/html5/thumbnails/115.jpg)
OLOO: delegated objects
115
![Page 116: Kyle Simpson - Advanced JavaScript](https://reader038.fdocuments.us/reader038/viewer/2022102703/58ed3c101a28ab292d8b4587/html5/thumbnails/116.jpg)
OLOO: delegated objects
116
![Page 117: Kyle Simpson - Advanced JavaScript](https://reader038.fdocuments.us/reader038/viewer/2022102703/58ed3c101a28ab292d8b4587/html5/thumbnails/117.jpg)
117
OO: old & busted
![Page 118: Kyle Simpson - Advanced JavaScript](https://reader038.fdocuments.us/reader038/viewer/2022102703/58ed3c101a28ab292d8b4587/html5/thumbnails/118.jpg)
OO: old & busted
118
![Page 119: Kyle Simpson - Advanced JavaScript](https://reader038.fdocuments.us/reader038/viewer/2022102703/58ed3c101a28ab292d8b4587/html5/thumbnails/119.jpg)
119
OLOO: new hotness
![Page 120: Kyle Simpson - Advanced JavaScript](https://reader038.fdocuments.us/reader038/viewer/2022102703/58ed3c101a28ab292d8b4587/html5/thumbnails/120.jpg)
120
OLOO: new hotness
![Page 121: Kyle Simpson - Advanced JavaScript](https://reader038.fdocuments.us/reader038/viewer/2022102703/58ed3c101a28ab292d8b4587/html5/thumbnails/121.jpg)
OLOO: Object.create()
121
![Page 122: Kyle Simpson - Advanced JavaScript](https://reader038.fdocuments.us/reader038/viewer/2022102703/58ed3c101a28ab292d8b4587/html5/thumbnails/122.jpg)
OLOO: object creation
122
https://gist.github.com/getify/5572383
https://gist.github.com/getify/5226305
![Page 123: Kyle Simpson - Advanced JavaScript](https://reader038.fdocuments.us/reader038/viewer/2022102703/58ed3c101a28ab292d8b4587/html5/thumbnails/123.jpg)
OLOO: js
123
Quiz1. How is JavaScript’s [[Prototype]] chain not like traditional/classical inheritance?2. What does “behavior delegation” mean and how does it describe object linking in JS?3. Why is “behavior delegation” as a design pattern a helpful thing? What are the tradeoffs?
![Page 124: Kyle Simpson - Advanced JavaScript](https://reader038.fdocuments.us/reader038/viewer/2022102703/58ed3c101a28ab292d8b4587/html5/thumbnails/124.jpg)
(exercise #4: 15min)
124
![Page 125: Kyle Simpson - Advanced JavaScript](https://reader038.fdocuments.us/reader038/viewer/2022102703/58ed3c101a28ab292d8b4587/html5/thumbnails/125.jpg)
125
![Page 126: Kyle Simpson - Advanced JavaScript](https://reader038.fdocuments.us/reader038/viewer/2022102703/58ed3c101a28ab292d8b4587/html5/thumbnails/126.jpg)
126
Async Patterns• Callbacks• Generators/Coroutines• Promises
Agenda
![Page 127: Kyle Simpson - Advanced JavaScript](https://reader038.fdocuments.us/reader038/viewer/2022102703/58ed3c101a28ab292d8b4587/html5/thumbnails/127.jpg)
Async Patterns
127
Callbacks
![Page 128: Kyle Simpson - Advanced JavaScript](https://reader038.fdocuments.us/reader038/viewer/2022102703/58ed3c101a28ab292d8b4587/html5/thumbnails/128.jpg)
Async Patterns: callbacks
128
![Page 129: Kyle Simpson - Advanced JavaScript](https://reader038.fdocuments.us/reader038/viewer/2022102703/58ed3c101a28ab292d8b4587/html5/thumbnails/129.jpg)
Async Patterns: “callback hell”
129
![Page 130: Kyle Simpson - Advanced JavaScript](https://reader038.fdocuments.us/reader038/viewer/2022102703/58ed3c101a28ab292d8b4587/html5/thumbnails/130.jpg)
Async Patterns: “callback hell”
130
![Page 131: Kyle Simpson - Advanced JavaScript](https://reader038.fdocuments.us/reader038/viewer/2022102703/58ed3c101a28ab292d8b4587/html5/thumbnails/131.jpg)
Async Patterns: “callback hell”
131
Inversion of Control
![Page 132: Kyle Simpson - Advanced JavaScript](https://reader038.fdocuments.us/reader038/viewer/2022102703/58ed3c101a28ab292d8b4587/html5/thumbnails/132.jpg)
Async Patterns: separate callbacks
132
![Page 133: Kyle Simpson - Advanced JavaScript](https://reader038.fdocuments.us/reader038/viewer/2022102703/58ed3c101a28ab292d8b4587/html5/thumbnails/133.jpg)
Async Patterns: “error-first style”
133
![Page 134: Kyle Simpson - Advanced JavaScript](https://reader038.fdocuments.us/reader038/viewer/2022102703/58ed3c101a28ab292d8b4587/html5/thumbnails/134.jpg)
Async Patterns: nested-callback tasks
134
![Page 135: Kyle Simpson - Advanced JavaScript](https://reader038.fdocuments.us/reader038/viewer/2022102703/58ed3c101a28ab292d8b4587/html5/thumbnails/135.jpg)
Async Patterns
135
Generators (yield)
![Page 136: Kyle Simpson - Advanced JavaScript](https://reader038.fdocuments.us/reader038/viewer/2022102703/58ed3c101a28ab292d8b4587/html5/thumbnails/136.jpg)
Async Patterns: generators
136
![Page 137: Kyle Simpson - Advanced JavaScript](https://reader038.fdocuments.us/reader038/viewer/2022102703/58ed3c101a28ab292d8b4587/html5/thumbnails/137.jpg)
Async Patterns: generator coroutines
137
![Page 138: Kyle Simpson - Advanced JavaScript](https://reader038.fdocuments.us/reader038/viewer/2022102703/58ed3c101a28ab292d8b4587/html5/thumbnails/138.jpg)
Async Patterns: generator messages
138
![Page 139: Kyle Simpson - Advanced JavaScript](https://reader038.fdocuments.us/reader038/viewer/2022102703/58ed3c101a28ab292d8b4587/html5/thumbnails/139.jpg)
Async Patterns: yield tasks
139
![Page 140: Kyle Simpson - Advanced JavaScript](https://reader038.fdocuments.us/reader038/viewer/2022102703/58ed3c101a28ab292d8b4587/html5/thumbnails/140.jpg)
Async Patterns
140
Promises
“continuation events”
![Page 141: Kyle Simpson - Advanced JavaScript](https://reader038.fdocuments.us/reader038/viewer/2022102703/58ed3c101a28ab292d8b4587/html5/thumbnails/141.jpg)
Async Patterns: jQuery-style promises
141
![Page 142: Kyle Simpson - Advanced JavaScript](https://reader038.fdocuments.us/reader038/viewer/2022102703/58ed3c101a28ab292d8b4587/html5/thumbnails/142.jpg)
Async Patterns: jQuery-style promises
142
![Page 143: Kyle Simpson - Advanced JavaScript](https://reader038.fdocuments.us/reader038/viewer/2022102703/58ed3c101a28ab292d8b4587/html5/thumbnails/143.jpg)
Async Patterns: (native) promise tasks
143
![Page 144: Kyle Simpson - Advanced JavaScript](https://reader038.fdocuments.us/reader038/viewer/2022102703/58ed3c101a28ab292d8b4587/html5/thumbnails/144.jpg)
Async Patterns: promises sequence
144
sequence = automatically chained promises
![Page 145: Kyle Simpson - Advanced JavaScript](https://reader038.fdocuments.us/reader038/viewer/2022102703/58ed3c101a28ab292d8b4587/html5/thumbnails/145.jpg)
Async Patterns: sequences & gates
145https://github.com/getify/asynquence
![Page 146: Kyle Simpson - Advanced JavaScript](https://reader038.fdocuments.us/reader038/viewer/2022102703/58ed3c101a28ab292d8b4587/html5/thumbnails/146.jpg)
Async Patterns: sequence tasks
146
![Page 147: Kyle Simpson - Advanced JavaScript](https://reader038.fdocuments.us/reader038/viewer/2022102703/58ed3c101a28ab292d8b4587/html5/thumbnails/147.jpg)
Async Patterns: generator+sequence tasks
147
![Page 148: Kyle Simpson - Advanced JavaScript](https://reader038.fdocuments.us/reader038/viewer/2022102703/58ed3c101a28ab292d8b4587/html5/thumbnails/148.jpg)
Async Patterns: CSP-style generators
148
![Page 149: Kyle Simpson - Advanced JavaScript](https://reader038.fdocuments.us/reader038/viewer/2022102703/58ed3c101a28ab292d8b4587/html5/thumbnails/149.jpg)
Async Patterns
149
Quiz1. What is “callback hell”? Why do callbacks suffer from “inversion of control”?2. How do you pause a generator? How do you resume it?3. What is a Promise? How does it solve inversion of control issues?4. How do we combine generators and promises for flow control?
![Page 150: Kyle Simpson - Advanced JavaScript](https://reader038.fdocuments.us/reader038/viewer/2022102703/58ed3c101a28ab292d8b4587/html5/thumbnails/150.jpg)
(exercise #5: 15min)
150
![Page 151: Kyle Simpson - Advanced JavaScript](https://reader038.fdocuments.us/reader038/viewer/2022102703/58ed3c101a28ab292d8b4587/html5/thumbnails/151.jpg)
151