Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Does the comma operator influence the execution context in Javascript?

var a = 1; var b = {   a : 2,   c : function () {     console.log(this.a);   } };  b.c(); // logs 2 (b.c)(); // logs 2 (0, b.c)(); // logs 1 

The first is understandable, for "this" is pointed to Object "b". But why does the second one log the same result? I thought "this" should be pointed to the global execution context. And the third one, it seems that the comma operator influences the execution context.

like image 277
Ziqi Avatar asked Mar 18 '16 05:03

Ziqi


People also ask

What does a comma do in JavaScript?

The comma operator ( , ) evaluates each of its operands (from left to right) and returns the value of the last operand. This lets you create a compound expression in which multiple expressions are evaluated, with the compound expression's final value being the value of the rightmost of its member expressions.

Is comma required in JavaScript?

JavaScript has allowed trailing commas in array literals since the beginning, and later added them to object literals, and more recently, to function parameters and to named imports and named exports. JSON, however, disallows trailing commas.

What is execution context in JavaScript medium?

Execution context (EC) is defined as the environment in which the JavaScript code is executed. By environment, I mean the value of this , variables, objects, and functions JavaScript code has access to at a particular time.

What is the execution context & stack in JavaScript?

When the JavaScript engine first encounters your script, it creates a global execution context and pushes it to the current execution stack. Whenever the engine finds a function invocation, it creates a new execution context for that function and pushes it to the top of the stack.


1 Answers

You really have a nice corner case there! My take on it:

  • the first is straightforward. Just a standard call. The '.' operator lets you call the function setting b as the execution context.
  • the second is exactly the same thing: the parens are entirely optional and the interpreter is treating the expression inside it as a bound function call. Actually I didn't expect this: I thought the interpreter would be going to reset this to the global object, but actually it's keeping it linked. Probably just so "casual" language users do not freak out.
  • the third one is more standard (at least for those who live in JavaScript land): as soon as your function is passed on in an expression (in this case by the , operator) the this value is lost. This is because b.c is a Property Reference (deep rabbit hole details in the specification, here, courtesy of T.J.Crowder). So, you are actually passing around the function itself, no more bound to the declaring object. So when you call it this is going to be passed in as the global object.

See it this way: (object.function)() gets simplyfied into object.function(), because the enclosing parens are completely optional; (0, object.function)() is parsed as (expression yielding a function)() which is going to lose the object binding to this, because function is already unbound.

Really nice example!

like image 164
A. Chiesa Avatar answered Oct 08 '22 10:10

A. Chiesa