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

JavascriptAnonymous FunctionUse Strict

Javascript Problem Overview


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).

Javascript Solutions


Solution 1 - Javascript

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)

Solution 2 - Javascript

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

Solution 3 - Javascript

According to [This Stack Overflow answer][1], 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);

[1]: https://stackoverflow.com/questions/9551932/this-inside-an-anonymous-function "'this' inside an anonymous function?"

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionT. JunghansView Question on Stackoverflow
Solution 1 - JavascriptjAndyView Answer on Stackoverflow
Solution 2 - JavascriptSamuel RossilleView Answer on Stackoverflow
Solution 3 - JavascriptReverseTalesView Answer on Stackoverflow