I had the same question and then found the answer, as follows:
It really is for
(0, foo.fn)();
Remember that in JavaScript, when foo.fn()
is invoked, then inside of fn
, the this
is bound to foo
. If you use
var g = foo.fn;
g();
then when g
is invoked above, the this
is bound to the global object (window
, in the context of a web browser).
So do you need to define g
like above? Can you do something such as
(foo.fn)();
The answer is no. JavaScript will treat it the same as foo.fn();
as it is just foo.fn
with the redundant ()
that can be removed.
But there is one way to get around it, and it is exactly to use the comma operator, which Mozilla stated as
The comma operator evaluates each of its operands (from left to right) and returns the value of the last operand
So using
(0, foo.fn)();
the (0, foo.fn)
will get evaluated to a reference to the function, like g
above, and then the function is invoked. And then, this
is not bound to foo
but is bound to the global object.
So the code written this way, is to "cut the binding".
Example:
var foo = {
fullName: "Peter",
sayName: function() { console.log("My name is", this.fullName); }
};
window.fullName = "Shiny";
foo.sayName(); // My name is Peter
(foo.sayName)(); // My name is Peter
(0, foo.sayName)(); // My name is Shiny
Now why would some code want to cut the binding? I read that in some case, if we have a function:
function foo() {
// using `this` here
}
Then the this
would point to the global object. But if foo()
together with other functions and values, are packaged into a module, then when the function is invoked using
someModule.foo();
Then the this
is bound to someModule
, and it has changed the behavior of foo()
. So to keep foo()
as original as it is, we cut the binding, so that inside of foo()
, the this
is bound to the global object like before.