2

I have just started to write JavaScript after some time and I am confused by plugins constructor set up. I went through this link for advice.

What does the exclamation mark do before the function?

I am interested in understanding this function set up..

I have seen seen three examples like this below:

(function(parameterOne, parameterTwo) {

    functionOne = function(...) {
       ...
   },

   functionTwo: new function() {
   },

   this.functionThree = function(...) {
   }

})()

My questions are as follows:

  1. When do one use the construct as given for functionOne vs functionTwo vs functionThree? How would I be able to call the functionOne, functionTwo or functionThree explicitly?

  2. I have seen functions like this:

    (function(parameter) {
    
        functionFour = function(..) {
       },
       ....
    })(document)
    

What does the document in this example indicate? I have been confused about this for a long time now.

  1. I have seen jQuery plugins that follow this structure?

    (function($) {
    
      $.fn.myCustomPlugin: function(...) {
      }
    })(jQuery)
    

Why is $ passed to the function and jQuery passed at the end? I apologize as this may be rudimentary questions to some of you but these have stymied me for couple of weeks now and I am desperate to get any answers I can.

Thanks,

Kartik

Community
  • 1
  • 1
Kartik
  • 2,541
  • 2
  • 37
  • 59
  • see this post...and follow links to other duplicates within it http://stackoverflow.com/questions/7894038/jquery-plugin-syntax-wrapper http://stackoverflow.com/questions/4484289/id-like-to-understand-the-jquery-plugin-syntax – charlietfl Nov 05 '12 at 05:23

1 Answers1

2

(function(parameterOne, parameterTwo) {

Does not make sense as you're not passing these arguments in the end. Also, looks like you're immediately trying to create anonymous code block - makes sense in some cases, but you don't need to do it unless you're trying to protect global scope from whatever happens inside this code block.

    functionOne = function(...) {
       ...
   },

This is a named function similar to var functionOne will be useful only inside parent function or constructor.

   functionTwo: new function() {
   },

UPDATE: Doesn't really make sense as you're trying to create instance here. You can definitely immediately instantiate what you have inside that function declaration (it is same as declaring a func. first and then using operator new) but in this case what you get is an object not a function. Try:

var f = function() {};
console.log(f); // "function"
var f = new function() {}
console.log(f); // "objest"

That object is the instance of your constructor function.

   this.functionThree = function(...) {
   }

this is a method of a class. Once you instantiate the class using operator new, you can access it from outside of the instance. Also when you use this. inside a class, remember that every time you instantiate a class, it will reserve memory for this value. When the variable is different for these instances than it's okay, but if it's a method, you're better of adding it to the constructor prototype, this way it's only declared once and new memory chunks are not reserved for it.

})()

here you would ordinarily pass params you request inside, e.g. parameterOne, parameterTwo

(function(parameter) {

    functionFour = function(..) {
   },
   ....
})(document)

This is a way to pass context or any objects to this anonymous code block. In this case it looks like a plug in that takes window.document but it can also take any other part of DOM. For instance, if you want to select all tags a and receive document as param, it will iterate through all links in window.document, but if you pass $('#somediv'), this plugin will iterate through links only inside div with this id.

(function($) {

  $.fn.myCustomPlugin: function(...) {
  }
})(jQuery)

This is a good way to make sure that in the code inside $ is a jQuery object. Thing is that in Chrome for example there's already a native function $, or in some production sites $ may be a Prototype JS function. But in the example inside you make sure that var $ is not native $ or not Prototype.

In general, you should not use (function() {...})() liberally -- this is only used in specific cases when you're protecting global environment as I mentioned above.

mvbl fst
  • 5,213
  • 8
  • 42
  • 59
  • My examples were possible wrong or incorrect because I don't know javascript that well. I am learning as I go but that is why I asked this question. – Kartik Nov 05 '12 at 05:37
  • I get it, I did not mean to be critical at all, I am just explaining what you got there :) – mvbl fst Nov 05 '12 at 05:51
  • May I ask how would I invoke the functions functionOne, functionTwo, and functionThree, if at all possible? – Kartik Nov 05 '12 at 05:54
  • if invoke function by using `()` after function name, e.g. `functionOne()` and by using `call` or `apply` methods. You can get an instance of a function, which is a JS object, by using keyword `new`. Remember that what you get by doing that is an object, not a function. In your example invocation for all of them is same -- `functionOne(args)` or `functionTwo.call(args)` or `this.functionThree.apply(args)`. – mvbl fst Nov 05 '12 at 05:59