Javascript: Is the "this" useful or necessary in the case?

Question

Reviewing some legacy code and saw it. The function body was done in pure Javascript without using any 3rd party library.

Could anyone shed a light on the use of "this" in (function() { })(this)?

Full codes:

(function() {
var root = this;
var SOMEVAR;
SOMEVAR = root.SOMEVAR = {};

SOMEVAR.windowOffset = 0;
SOMEVAR.defaultBase = 195;

SOMEVAR.resizeIFrame = function(){
  // some codes     
};

SOMEVAR.resetIFrameSize = function(height) {
  // some codes
}   

window.SOMEVAR = SOMEVAR;
})(this);

I actually read all "this" related usages before I asked the question. I just couldn't find this usage fits in those I read. And somehow, I don't think the "this" here is not even necessary because all the codes want is to create the "SOMEVAR" and bind it to "window". Am I correct?

Thanks

`this` means anything you want it to or everything by default. — dandavis, Apr 16 '15 at 05:12
It seems to be a IIFE http://en.m.wikipedia.org/wiki/Immediately-invoked_function_expression given access to the outer object not using it directly but maybe through arguments? — dec, Apr 16 '15 at 05:12
for functional JS programmers it's the un-named yet still-passed argument. — dandavis, Apr 16 '15 at 05:18

score 0 · Answer 1 · edited May 23 '17 at 11:51

0

You're defining an anonymous function and then immediately invoking it with the this parameter.

If you're just looking to understand the meaning of this, then refer to this other question.

edited May 23 '17 at 11:51

Community

1
1

answered Apr 16 '15 at 05:12

Krease

14,501
8
47
82

score 0 · Accepted Answer · answered Apr 16 '15 at 05:13

0

This is a somewhat weird example of an Immediately-Invoked Function Expression (IIFE). The first part:

(function(){})

simply defines a function (the outer parentheses are unnecessary). This function is then called, passing this as an argument. Usually one would actually declare a parameter and then do something to the parameter inside the function:

(function(context) {
    // do something to or with context
})(this);

What object is actually referenced by this depends on where this code is executing and whether strict mode is in effect. See the docs for this for more information.

answered Apr 16 '15 at 05:13

Ted Hopp

222,293
47
371
489

The full codes are: (function() { var root = this; var SOMEVAR; SOMEVAR = root.SOMEVAR = {}; SOMEVAR.windowOffset = 0; SOMEVAR.defaultBase = 195; SOMEVAR.resizeIFrame = function(){ // some codes }; SOMEVAR.resetIFrameSize = function(height) { // some codes } window.SOMEVAR = SOMEVAR; })(this); What confused me is the "this" here doesn't seem like useful. Is it? – Justin_J May 07 '15 at 16:28
@Justin_J - No, it doesn't seem useful. As I said, this is a weird example. It would at least make some sense if it were written `(function(root) { var SOMEVAR; ... })(this);`. Then `root` would be bound to whatever `this` referred to in the calling code. – Ted Hopp May 07 '15 at 17:04

score 0 · Answer 3 · answered Apr 16 '15 at 05:14

Ah, what is this. The oldest question in the javascript book. Generally speaking, this refers to the context that the current code is being executed in. If you have "top level" code being run straight in a script tag, it refers to window. In a click event? The current element. In a constructor? The object that will be constructed. You can even make it whatever you want with call and apply.

score 0 · Answer 4 · answered Apr 16 '15 at 06:16

If you see this construct:

(function(ns) { })(this);

not inside other function then this is a reference of default namespace of script execution. In browsers that default namespace has quite strange name window therefore the following will output true:

(function(ns) {
  console.log( ns === window );
 })(this);

Such ns (namespace) variable is useful when you need for example check variable existence in namespace. This, for example:

  alert(foo);

will rise an error "undefined variable foo", but this:

(function(ns) {
  alert(ns.foo);
 })(this);

will show alert with the word "undefined".

Another usage is in modules that can work as inside browser as in node.js and the like. Node.js has no notion of window so that construct above is the only reliable way to get reference to default namespace/scope object.

Javascript: Is the "this" useful or necessary in the case?

4 Answers4