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, 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.

The grouping operator (parenthesis) strictly controls the order of operations, not the result¹. 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)

• this binding - How the this keyword 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 this is bound.

• Where in the spec is this behaviour outlined?

• this keyword: 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

posted over 4 years ago

CC BY-SA 4.0

Moshi‭

2366 reputation 16 36 273 55

This MDN link might help to explain that:

When a function is called as a method of an object, its this is set to the object the method is called on.

Which is your first example (calling obj.a()). But the link above also mentions that "this behavior is not at all affected by how or where the function was defined". So I could do the opposite of what you did, and create the function outside the object and then attach it:

let obj = {
  b: 'hello'
};

function f() {
    return (this === obj) ? this.b : 'bye';
}

obj.a = f;
console.log(obj.a()); // hello
console.log(f()); // bye

That's because what really matters is how you invoke the function. If called from a member of the object, the this value is set to the object, regardless of where the function was defined. So calling it in a "non-object" context doesn't set this to the object.

BTW, calling (obj.a)() is the same as obj.a() because in this case the first pair of parenthesis is redundant ((obj.a) evaluates to the obj.a function, and obj.a === (obj.a) is true). But it's not the same as setting a variable f = obj.a and then calling f() because, as said above, how the function is called influences the value of this, and by calling f(), I'm not invoking the function as a method of an object.

To accomplish the behaviour of "preserving" this, you could use bind or call, which are two ways of controlling which value of this the function sees:

let obj = {
  a: function() { return (this === obj) ? this.b : 'bye'; },
  b: 'hello'
};
let a = obj.a;
console.log(a()); // bye

// with call, using "obj" as the "this" value
console.log(a.call(obj)); // hello

// bind, returns another function that uses "obj" as the "this" value
let boundFunc = obj.a.bind(obj);
console.log(boundFunc()); // hello

I'm not sure about the exact terminology, but this section of the spec mentions the ResolveThisBinding operation, whose definition says: "It determines the binding of the keyword this using the LexicalEnvironment of the running execution context." - and ResolveThisBinding operations calls GetThisEnvironment, whose definition says: "It finds the Environment Record that currently supplies the binding of the keyword this".

So I guess "binding" would be an appropriate term.

posted over 4 years ago

CC BY-SA 4.0

4y ago by Alexei‭

hkotsubo‭

5110 reputation 20 69 575 228