Notifications
Sign Up Sign In
Q&A

Function call; `this` gets bound to unexpected value

+6
−0

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?
Why should this post be closed?

0 comments

2 answers

+3
−0

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.

JS this is confusing

3 comments

If the image is not appropriate (due to F-word), please let me know and I'll remove it ‭hkotsubo‭ 22 days ago

It's not appropriate. But it is funny! ‭manassehkatz‭ 22 days ago

ResolveThisBinding and GetThisEnvironment are very useful to know about! ‭Gershy‭ 20 days ago

+2
−0

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 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)
  • 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?
  1. 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.

1 comment

Wow, thanks for showing (obj.b) = 'value'; - I had no idea that was valid javascript, and it's really the best example demonstrating that parentheses are not exactly what I've always expected them to be! ‭Gershy‭ 21 days ago

Sign up to answer this question »