Question

I have been studying framework development for a few weeks, and I ran across what is highly suggested and pressured in the world of lib development, Immediately-invoking Anonymous Functions.

I never can get it to work, and I have failed to find a resource that explains in-detail the use and logic behind it.

Here’s what I know so far:

• It’s immediately invoking – It runs everything anonymously, immediately.
• It’s anonymous – It does not carry a name therefore the code inside of it is not “reachable” by exterior code.
• You can pass global window, object and undefined parameters – That’s about all I know on that, but do not understand them completely.

I am looking not only for a detailed resource, but one that explains the logic behind it. Because I find it very illogical.

Here’s what I have:

(function( window, document, undefined ) {
    window.myThingy = myThingy;

    var myThingy = function() {
    };

    myThingy.prototype = {
        constructor: myThingy,
        create: function( elementToBeCreated ) {
            return document.createElement( elementToBeCreated );
        }
    };

})( window, document );

Then,

myThingy().create("div");

But it is still saying myThingy() [object] is not a function.

What am I doing wrong? Why should I use immediately-invoking functions and not just create a global myThingy = function() object? Why do I have to use window?

I know there are several resources on the net about this, but I can’t understand any of it. Some of them go half-way into detail, some of them try to go into detail, but fail to explain the critical stuff. Why is this so stressed when developing a framework?

Don’t worry, I’m not trying to “re-invent the wheel”, but I am trying, however, to actually learn JavaScript, not just the pre-packaged stuff.

A good answer should contain:

• A good resource where it explains the logic behind immediately invoking anonymous functions
• An insight to that link
• What I am doing wrong with the code I provided

Answer 1

First off, you have not yet defined your function when you try to assign it to the global object so it is undefined:

window.myThingy = myThingy;
console.log(myThingy);//undefined

You need to do the assignment after myThingy is defined:

(function( window, document, undefined ) {


 var myThingy = function() {
 };

 myThingy.prototype = {
    constructor: myThingy,
    create: function( elementToBeCreated ) {
        return document.createElement( elementToBeCreated );
    }
 };

 window.myThingy = myThingy;

})( window, document );

Okay, next, you cannot use

myThingy.create("div");

because myThingy is a function and not an object. Function objects are created when the new keyword is issued to a function. You can make this change to convert your function into a function object:

window.myThingy = new myThingy();//create a function object

This pattern is not how all frameworks are implemented, but similar. Sometimes there is more abstraction. However, making these changes will allow your approach to work.

Here is a demo of your code: http://jsfiddle.net/ZjRJW/

---

Links

Here are some of my favorites:

http://ejohn.org/blog/simple-class-instantiation/

http://ejohn.org/apps/learn/

http://ejohn.org/blog/simple-javascript-inheritance/

http://jibbering.com/faq/notes/closures/

https://developer.mozilla.org/en-US/docs/JavaScript/Guide/Details_of_the_Object_Model

http://javascript.crockford.com/prototypal.html