CODEWITHSUNDEEP
javascript
Paul Thompson
Paul Thompson

Reputation: 77

Scope of this in javascript function

If you have the following code:

var global = this;
function A () {
    function B () {
        return this;
    }
    return B();
}
var C = new A();
C === global // true

Why does the this in function B refer to the global space and not the this of the object A?

Upvotes: 3

Views: 286

Answers (3)

Esailija
Esailija

Reputation: 140220

this has nothing to do with scope, it's not a variable. It's a keyword that evaluates to the currently executing function's object context. The function's object context is determined by how you call it. It doesn't matter where or how the function is defined.

When you call a function like fn() then it is not in object context and the language wrongly attempts to work around it when it should just throw an error at the mere sight of this. This is somewhat fixed in strict mode where it would evaluate to undefined.

When you call a function as a property of some object I.E. obj.fn() then obj is bound to this for that call.

Since it would be clunky having to attach a function to some object just to get the right object context for the call, all functions inherit a .call method that allows you to specify the object context explicitly:

return B.call(this);

Upvotes: 2

LetterEh
LetterEh

Reputation: 26696

To accompany Pointy's correct answer:

The reasoning for this is because you can do whatever you want with functions. You can return function B from function A, and save it as a global variable.

Or you could append function B as a method to an Object, or a dozen objects. Or you could use it in an AJAX callback, or use it as a callback from a timer.

Because the engine doesn't know what's going to happen with function B, the language says that this refers to whatever the function is being called on, at the time it's called.

This adds a lot of dynamism to the language, but it also adds a lot of headache, if you're not sure what "this" is pointing to at any given time.

Rule of thumb:

If the function is directly attached as the method of an object, or a function is being called with .call or .apply and being fed a context, like myFunc.call(myObj), then this refers to window.

Upvotes: 0

Pointy
Pointy

Reputation: 413709

The value of this is determined upon every function call. Because B is called without any context, the value of this is the global object.

It's possible to preserve this in an outer context by simply copying it:

function A() {
  var x = this;
  function B() {
    return x;
  }
  return B();
}

Upvotes: 3

Related Questions