Encounter following lines of code, but couldn't understand it.

What is this (/.../)(this); purpose in javascript? Does it have name for this pattern?

Code as below:

//Move.js
(function(exports){
  exports.Move = function(){

  };
})(this);

Encounter following lines of code, but couldn't understand it.

What is this (/.../)(this); purpose in javascript? Does it have name for this pattern?

Code as below:

//Move.js
(function(exports){
  exports.Move = function(){

  };
})(this);

• javascript

• this in javascript doesnt mean the class or the object but the context. Any javascript function can be called anyway , and you can change the value of this dinamically. in that exemple , it is just creating a function , calling it right away and assigning the value of this to the export argument. so in a nutsheel it is function definition then function calling with this as a parameter. – mpm Commented Apr 5, 2012 at 5:59
• @camus—that's a very confusing explanation. A function's this value is not really dynamic, it is set by how the function is called and can't be changed afterward. – RobG Commented Apr 5, 2012 at 6:24
• if you read me well , i talked about the context of the function that is dynamic. this is indeed dynamic as it is not set to one value , but depends on how the function is called. The explanation is pretty clear. this doesnt refer to one context ,therefore it is dynamic. – mpm Commented Apr 5, 2012 at 6:49

3 Answers 3

this pattern is an "Immediately Invoked Function Expresssion". in short, it's just a function that is executed immediately. the this on the end is a parameter to be sent to the inner function that will be accessed as exports

(function(exports){

    //that was "this" outside, is now "exports" in here

}(this));

in your example, we can assume that whatever this was, it's some object that has been added a Move method to it.

some also call this pattern the "Module Pattern" in a sense that it creates a "contained environment" so that the stuff inside it is not visible to the due to a new function scope. in other words, whatever is inside sees the outside, but the outside can only see what the inside lets it see

That pattern simply makes exports assigned to this at the time of execution.

Assuming the global scope and a browser, this will point to the window object.

With those assumptions in mind, window.Move should contain the function assigned inside of that IIFE (Immediately Invoked Function Expression).

If this function were called in a different context where this is not window, it will assign that method to whatever this was in the outer environment.

This pattern is called "Module Pattern". There are various sub patterns and this one used Augmented Module pattern.

First, we import the module, then we add properties, then we export it. Here's an example, augmenting our MODULE from above:

For more read about this Module pattern check out http://www.adequatelygood./2010/3/JavaScript-Module-Pattern-In-Depth

For more reading about general Javascript patterns check out http://addyosmani./resources/essentialjsdesignpatterns/book/