A quick quiz question on javascript scoping. Try and figure this out before executing in browser
If you were to create this object:
var person = {
name: 'Dave',
weight: 100,
height: 180,
calculateBMI: function() {
console.log(this);
function innerFunction() {
console.log(this);
}
innerFunction();
}
}
When running person.calculateBMI()
what object will this
be mapped to when logged by the innerFunction?
Oldest comments (6)
It is going to return window all the time
Trick question, it won't run because it will throw a SyntaxError when parsing the code, so
this
won't be mapped to anything :PDepends on whether you 1) fix the code (you're missing a comma after the height and a closing
}
at the end) and 2) don't have"use strict"
before the code (in which casethis
is set to undefined until explicitly set by call/apply or in prototypal methods); then the first console.log will show the person and the second one window/global (depending on your JS runtime).Well spotted on the code error. Was not intentional and have since updated it :P
The calculateBMI method
this
mapping to theperson
object makes sense to me, but the innerFunction mapping to the Window object was a surprise. Anybody care to explain?Because innerFunction have another different scope. Then
this
inside reference to function and not to person.You can solve it adding
self
:Or with arrow function: