Welcome to Software Development on Codidact!
Will you help us build our independent community of developers helping developers? We're small and trying to grow. We welcome questions about all aspects of software development, from design to code to QA and more. Got questions? Got answers? Got code you'd like someone to review? Please join us.
Comments on Function call; `this` gets bound to unexpected value
Parent
Function call; `this` gets bound to unexpected value
I recently encountered a strange situation in javascript; if I have:
let obj = {
a: function() {
return (this === obj) ? this.b : 'bye';
},
b: 'hello'
};
I can call obj.a with this bound to obj by simply calling obj.a() (producing "hello").
The following allows me to call obj.a with this bound to the global object (and the result is "bye"):
let a = obj.a;
console.log(a());
I assumed that I could shorten my code to call obj.a, with this unbound from obj, using:
console.log((obj.a)())
I was surprised to find that when the above function is called, this is still bound to obj! It seems that here, (obj.a) resolves to not just the function, but also holds information about the "boundedness" of the function!
I was especially surprised since I had assumed that any code which declares let v = <some code>; and then goes on to use v was always interchangeable with using <some code> inline, so long as it is wrapped in parentheses.
- Is this intentional functionality? (I assume so)
- What technical vocabulary can be used to describe this situation? (E.g. "boundedness" is my own invention)
- Where in the spec is this behaviour outlined?
Post
Why parenthesis don't work as you expect
You seem to have a rough idea how the this keyword is resolved, so I'll skip explaining that and go straight to your question.
I was surprised to find that when the above function is called,
thisis still bound toobj! It seems that here,(obj.a)resolves to not just the function, but also holds information about the "boundedness" of the function!I was especially surprised since I had assumed that any code which declares
let v = <some code>;and then goes on to usevwas always interchangeable with using<some code>inline, so long as it is wrapped in parentheses.
The grouping operator (parenthesis) strictly controls the order of operations, not the result1. This means that for all intents and purposes, (obj.a) is exactly the same as obj.a. For illustration, here is another example.
obj.b = "hello again"
console.log(obj.b); // logs "hello again"
(obj.b) = "goodbye again"; // Note the parenthesis around obj.b!
console.log(obj.b); // logs "goodbye again"
More technically, neither obj.a nor (obj.a) resolve to a function; they resolve to a reference. This is why both of them are assignable as shown above. This is also why in your example they appear to hold information about the "boundedness" of the function - references in JavaScript contain information such as the parent of the referenced property (what the specification calls a "base value component") and this is part of what determines what this gets bound to.
Misc answers
- Is this intentional functionality? (I assume so)
Yes.
- What technical vocabulary can be used to describe this situation? (E.g. "boundedness" is my own invention)
-
thisbinding - How thethiskeyword is bound to a reference. - References - JavaScript has a kind of weird way of doing references, so you should probably look at this more in depth.
- Execution context - This determines how
thisis bound.
- Where in the spec is this behaviour outlined?
-
thiskeyword: https://tc39.es/ecma262/#sec-this-keyword - Grouping operator: https://tc39.es/ecma262/#sec-grouping-operator
- References: https://tc39.es/ecma262/#sec-reference-specification-type
-
This in itself is sort of an abstraction, but it shows the concept. The really technical details are beyond this answer, so go read the spec if you're interested. ↩
0 comment threads