Question

It’s common to see CommonJS modules defined using the following idiom:

(function() {
   var logThis = function() { console.log(this); }
   module.exports = logThis;
}).call(this);

Underscore.js, for example, does this.

I just spend half an hour discussing with a colleague why they invoke the closure with call(this). This will cause the value of this inside the closure to be inherited from the caller, rather than being set to the global object. However, when I tested this in Node.js, the value of this inside the module was always the global object, even when I loaded and ran it like this:

var bar = {};
bar.foo = function() { var foo = require("./foo"); foo(); }

I was really expecting to see the bar object in the console, but actually I see the global object. It then occurred to me that this might be because modules like Underscore.js are also used in a web context. But in that case it would be loaded with a <script> tag so this will always be equal to the global object anyway.

What gives? I’m sure there is a reason for using this construct but I can’t see the practical difference in this particular case whether the module is being used in Node.js or in a webpage.

Update: Just to clarify, I can think of a number of cases where this could make a difference. For example, if I say:

var bar = {}
var foo = require("./foo");
bar.foo = foo;
bar.foo();

(Thanks to @Pointy for correcting my original example.)

I would expect the closure in the module to be evaluated when require() is called, which means that the value of this inside it would be bound to the global object, which would be written to the console even though foo() is then invoked as a member of the “bar” object. However, I am seeing the “bar” object in the console even in this example. I guess that this is not being bound to the closure as I expected?

In a nutshell, I’m looking for one example where a module like Underscore.js will have different behavior due to being wrapped in a closure invoked with fn.call(this) instead of just fn(), either in Node.js or in a web page.

Answer 1

Your call to “foo” inside “bar.foo” is made without any context, so the global context is used. The fact that it’s inside a function where this refers to “bar” is not relevant; that’s just not how JavaScript works. The only thing that matters is how the function is invoked, not where it’s invoked, in other words.

If “bar.foo” looked like this:

bar.foo = function() { require("./foo"); foo.call(this); }

then you’d see “bar” in the console. Or, you could do this:

var bar = {};
require("./foo");
bar.foo = foo; 

Then calling bar.foo() would also log the “bar” object. (Does that really work in Node? That is, I thought require() returned an object, and that it didn’t just leave things in the global scope. I’m a rank novice at Node however.)

edit — OK thanks for updating. Thus, my example would be corrected as follows. First, I think that your module should look like this:

(function() {
   var logThis = function() { console.log(this); }
   module.exports.logThis = logThis;
}).call(this);

That is, I think that you want to explort the “logThis” function, so it needs to be bound to the “exports” object as a named property.

Then:

var bar = {};
var foo = require("./foo");
// At this point, foo.logThis is the function 
bar.foo = foo.logThis;
// Now the "foo" property of "bar" is a reference to the same function
bar.foo(); // logs the "bar" object

var fee = { fie: foo.logThis };
fee.fie(); // logs the "fee" object