CODEWITHSUNDEEP
javascriptanonymous-functionuse-strict
T. Junghans
T. Junghans

Reputation: 11683

Why is "this" in an anonymous function undefined when using strict?

Why is this in an anonymous function undefined when using javascript in strict mode? I understand why this could make sense, but I couldn't find any concrete answer.

Example:

(function () {
    "use strict";

    this.foo = "bar"; // *this* is undefined, why?
}());

Test in a fiddle: http://jsfiddle.net/Pyr5g/1/ Check out the logger (firebug).

Upvotes: 102

Views: 42734

Answers (4)

Mohammad Rana
Mohammad Rana

Reputation: 47

Strict mode does not allow default binding, so try this:

**yourFunctionName.bind(this)**

I hope now it's working fine.

Upvotes: 0

ReverseTales
ReverseTales

Reputation: 139

According to This Stack Overflow answer, you can use this inside anonymous functions, simply by calling .call(this) at the end of it.

(function () {
    "use strict";

    this.foo = "bar";
}).call(this);

Upvotes: 13

Samuel Rossille
Samuel Rossille

Reputation: 19858

There is a mechanism called "boxing" which wraps or change the this object before entering the context of the called function. In your case, the value of this should be undefined because you are not calling the function as a method of an object. If non strict mode, in this case, this is replaced by the window object. In strict mode it's always unchanged, that's why it's undefined here.

You can find more information at
https://developer.mozilla.org/en/JavaScript/Strict_mode

Upvotes: 16

jAndy
jAndy

Reputation: 236092

It's because, until ECMAscript 262 edition 5, there was a big confusion if people who where using the constructor pattern, forgot to use the new keyword. If you forgot to use new when calling a constructor function in ES3, this referenced the global object (window in a browser) and you would clobber the global object with variables.

That was terrible behavior and so people at ECMA decided, just to set this to undefined.

Example:

function myConstructor() {
    this.a = 'foo';
    this.b = 'bar';
}

myInstance     = new myConstructor(); // all cool, all fine. a and b were created in a new local object
myBadInstance  = myConstructor(); // oh my gosh, we just created a, and b on the window object

The last line would throw an error in ES5 strict 

"TypeError: this is undefined"

(which is a much better behavior)

Upvotes: 119

Related Questions