Doane from the Noun Project What is this JakeGinnivan githubcom jakeginnivan Jake Ginnivan Tech Lead Scope this Context Scope defines the variables that you currently have access to ID: 792843
Download The PPT/PDF document "Shrug Emoticon by Andrew" is the property of its rightful owner. Permission is granted to download and print the materials on this web site for personal, non-commercial use only, and to display it on your personal computer provided you do not modify the materials and that you retain all copyright notices contained in the materials. By downloading content from our website, you accept the terms of this agreement.
Slide1
Shrug Emoticon by Andrew Doane from the Noun Project
What is
this
?
Slide2@JakeGinnivan
github.com/jakeginnivan
Jake
Ginnivan
Tech Lead @
Slide3Scope
this
Context
Slide4Slide5“Scope defines the variables that you currently have access to”
Slide6Global scope
Local scope
Local scope
Local scope
console
.
log
(
a
)
console?
console?
console?
console?
✓
a?
✓
console
.
log
(a)
console
.
log
(
a
)
Slide7Global scope
Local scope
Local scope
Local scope
console
.
log
(
foo
)
foo?
foo?
foo?
foo?
ReferenceError
: foo is not defined
Slide8DemoScopes in ECMAScript5
Slide9Scopes in ECMAScript 5 Summary
ES5 uses functions to create scopesWhich variables you can reference is controlled by the 'scopes' your code currently have access to
Slide10function
createCounter
()
{
var
count
= 0 function
increment
()
{
count
=
count
+
1
return
count
}
return
{
increment
}}
var counter
=
createCounter()
counter.increment
() //?
count: 0increment: functioncreateCounter: functioncounter: Object
count: 0
increment: function
createCounter
: function
counter: Object
Lexical Scoping
The scope is tied to the declaration,
not the execution!
Slide11function
foo
()
{
var
testFoo
= 5
inner
()
}
function
bar
()
{
var
testBar
=
5
inner
()
}
Dynamic Scoping
The scope is tied to the execution,
not the declaration!
function
inner()
{ testFoo
// 5, when called by foo, undefined when called by bar testBar // 5, when called by bar, undefined when called by foo}
foo
()
bar
()
Slide12Scopes summary
”JavaScript is a lexically scoped language, which before ES6 used functions to create scopes.”“When executing your code, you can reference variables declared in your local scope, local scopes which wrap your code and the global scope”
Slide13🤔
So if scopes define the
visibility
of a variable, how does JavaScript
access
variable values outside it’s local scope at runtime?
Slide14Demo: Closures
Closures, what are they and why do we need them?
Slide15Closures summary
“When a JavaScript function references a variable in any local scope other than it’s own, the JavaScript runtime will automatically create a closure to allow access”
Slide16Slide17let
const
Slide18Scope
this
Context
Slide19Pop quiz!
What is the value
Slide20What is the return value at //?
var
name
=
'
Bob’function
sayName() { name
//
?
var
name
=
'
Jake
’
name
//
?
}
sayName
()
Jake
undefined
Slide21What is the return value at //?
var
name
=
'
Bob’function
sayName() { name
//
?
let
name
=
'
Jake
’
name
//
?
}
sayName
()
Jake
ReferenceError
: name is not defined
Slide22What is the return value at //?
function
sayName
()
{
arguments
// ?}sayName
('Jake')
[
'
Jake
'
]
Slide23Calling a function in JavaScript
function
sayName
(name)
{
greeting
var greeting
= 'Hi'
function
inner
()
{}
}
sayName
(
'
Jake
'
)
Execution Context: {
variableObjects
: {
arguments: {
[0]: 'Jake',
length: 1
},
inner: function, name: 'Jake',
greeting: undefined }, scopeChain: []}
Execution Context: {
variableObjects: { arguments: { [0]: 'Jake',
length: 1 }, inner: function, name: 'Jake', greeting: 'Hi' },
scopeChain: []}
Slide24Pop quiz!
What is ‘this’
Slide25What is the return value at //?
function
whatIsThis
()
{
this //?
}whatIsThis()
global or window
Slide26What is the return value at //?
var
greeter
=
{
name: "
YOW!", greet
()
{
return
`
Hi
${
this
.
name
}
`
}
}
greeter
.
greet
()
//
?
Hi YOW!
Slide27What is the return value at //?
function
greet
()
{
return
`Hi ${this.
name}`}
var
greeter
=
{
name
:
"
YOW!
"
,
greet: greet
}
greeter
.
greet
()
//
?
Hi YOW!
Slide28What is the return value at //?
var
greeter
=
{
name: "
YOW!", greet
()
{
return
`
Hi
${
this
.
name
}
`
}
}
var
button
=
{
onClick:
greeter.
greet }
button.
onClick() //
?
Hi undefined
Slide29What is the return value at //?
function
greet
()
{
return
`Hi ${this.
name}`}
var
greeter
=
{
name
:
"
YOW!"
}
greet
.call
(greeter)
//
?
Hi YOW!
Slide30What is the return value at //?
function
greet
()
{
return
`Hi ${this.
name}`}
var
greeter
=
{
name
:
"
YOW!
"
}
greet
.bind
(greeter)
//
?
Hi YOW!
Slide31What is the return value at //?
function
greet
()
{
return
`Hi ${this.
name}`}
var
greeter
=
{
name
:
"
YOW!
"
}
greet
.bind
(greeter).call({ name: 'Jake' })
//
?
Hi YOW!
Slide32Demo!
Slide33‘this’ summary
before.dot()
The variable
the
^
will be assigned to “this” for the function scope
unless that function has been bound, or is invoked with call or apply and the first
argument is passed
Slide34new, Classes and ES6!
Slide35Scope
this
Context
Slide36https://github.com/getify
/You-Dont-Know-JS
Want to learn more?
Kyle Simpson (@
getify
)
Slide37What is
this
?
Questions?