Question

What is the calling context of an invoked method or function within another function?

In browsers, the default calling context is the window object. In various situations, how do I avoid this?

If a function is invoked — for example, by theFunction(); — within a containing function, is the invoked function’s calling context the containing function?

In these two examples

(function ()
{
    something.initialize();
}());

and

(function ()
{
    something.initialize.call(this);
}());

…, is the calling context the same?

Answer 1

They are not the same. In the following I assume you were talking about this when you mentioned context.

In the first example, inside initialize, this will refer to something. In the second one, it will refer to the global object, which is window in browsers.

---

What this refers to is determined by how the function was called. There are five cases:

• func(), calling a function “standalone”: this refers to the global object.

• new func(), calling a function as constructor method: this will refer to an empty object which inherits from func.prototype.

• obj.func(), calling a function as property of an object: this will refer to the object obj.

• func.apply(foo), func.call(foo), invoking a function with apply or call: this refers to the object passed as first argument.

ECMAScript 5 also introduced .bind() ^[MDN] which enables you to bind this to a certain object, without immediately calling the function.

---

Now you understand why in your second example, inside initialize, this will refer to window:

The outer function is called “standalone” (first case), so this inside of it will refer to window. Next you are passing this to call, which sets this inside initialize to window (fourth case).

---

Further reading:

• MDN – this, explains all I write above with some examples.