this value in JavaScript anonymous function

Question

Can anybody explain to me why A is true and B is false? I would have expected B to be true as well.

function MyObject() {

};

MyObject.prototype.test = function () {
    console.log("A", this instanceof MyObject);
    (function () {
        console.log("B", this instanceof MyObject);
    }());
}

new MyObject().test();

update: since ecmascript-6 you can use arrow functions which would make it easy to refer to MyObject like this:

function MyObject() {

};

MyObject.prototype.test = function () {
    console.log("A", this instanceof MyObject);
    (() => {//a change is here, which will have the effect of the next line resulting in true
        console.log("B", this instanceof MyObject);
    })(); //and here is a change
}

new MyObject().test();

You might want to use an additional pair of parens to improve readability: ( new MyObject() ).test() — Šime Vidas
– Šime Vidas, Commented Dec 29, 2011 at 17:11
@SLaks, I've edited my comment to correctly reflect the usage of the anonymous function, although it is being used as a closure. — zzzzBov
– zzzzBov, Commented Dec 29, 2011 at 17:11
No; it's not being used as a closure. It's not closing over anything. Scope is not really relevant. — SLaks
– SLaks, Commented Dec 29, 2011 at 17:12

Marek Lisý · Accepted Answer · 2022-12-11 19:42:32Z

40

Inside of your anonymous function this is the global object.

Inside of test, this is the instance of MyObject on which the method was invoked.

Whenever you call a function like this:

someFunction(); // called function invocation

this is always the global object, or undefined in strict mode (unless someFunction was created with bind^** — see below)

Whenever you call a function like this

foo.someMethod();  //called method invocation

this is set to foo

^**EcmaScript5 defines a bind function that allows you to create a function that has a pre-set value for this

So this

    var obj = { a: 12 };
    var someFunction = (function () { alert(this.a); }).bind(obj);
    someFunction();

Causes someFucntion to be invoked with this equal to obj, and alerts 12. I bring this up only to note that this is a potential exception to the rule I mentioned about functions invoked as

someFunction();

always having this equal to the global object (or undefined in strict mode)

edited Dec 11, 2022 at 19:42

Marek Lisý

3,4112 gold badges23 silver badges28 bronze badges

answered Dec 29, 2011 at 17:09

Adam Rackis

83.5k57 gold badges281 silver badges402 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

jonny Over a year ago

The line (function () { alert(this.a); }).bind(obj) is exactly what I was looking for - binding context to an anonymous function. Works perfectly, +1

Omu Over a year ago

you can also set the this using func.call(this, arg1, arg2..)

Cameron · Accepted Answer · 2011-12-29 17:16:58Z

26

this is special. It refers to the object that the function is being called on behalf of (most commonly via dot syntax).

So, in the case of A, the function is being called on behalf of a new MyObject object. B is in a different function that isn't explicitly being called on behalf of any object, so this defaults to the global object (window).

In other words, this changes depending on how the function is called, not where or how it is defined. The fact that you're using an anonymous function (defined inside another function) is coincidental and has no effect on the value of this.

edited Dec 29, 2011 at 17:16

answered Dec 29, 2011 at 17:10

Cameron

99.4k29 gold badges206 silver badges233 bronze badges

1 Comment

Navigateur Over a year ago

Your statement "this changes depending on how the function is called, not where or how it is defined", can be misleading. In fact, this is simply the called function's owner - and that is in itself always either is explicitly defined or defaults to the global object. myVar.doSomething = doSomething; defines the function myVar.doSomething as doSomething where this will always refer to myVar when calling myVar.doSomething(), regardless of where myVar.doSomething() is called from. Your statement might suggest otherwise.

ThiefMaster · Accepted Answer · 2011-12-29 17:09:19Z

11

In the anonymous function, this is bound to the global object (window in a browser environment).

There are various ways of accessing the instance:

var self = this;
(function () {
    console.log("B", self instanceof MyObject);
}());

or

(function () {
    console.log("B", this instanceof MyObject);
}).call(this);

answered Dec 29, 2011 at 17:09

ThiefMaster

320k85 gold badges608 silver badges648 bronze badges

Comments

SLaks · Accepted Answer · 2011-12-29 17:09:11Z

4

this is set based on how you call the function.
Your anonymous function is a normal function call, so this is the global object.

You could write (function() { ... }).call(this) to explicitly call it with your this.

answered Dec 29, 2011 at 17:09

SLaks

891k182 gold badges1.9k silver badges2k bronze badges

2 Comments

Šime Vidas Over a year ago

Well, I'm assuming strict mode, so... :)

Šime Vidas Over a year ago

... so this is undefined.

Collectives™ on Stack Overflow

this value in JavaScript anonymous function

4 Answers 4

2 Comments

1 Comment

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

1 Comment

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related