CODEWITHSUNDEEP
javascriptfunctionframeworksanonymous
ModernDesigner
ModernDesigner

Reputation: 7717

Cannot wrap my head around Immediately Invoking Anonymous Functions in Javascript

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:

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:

Upvotes: 5

Views: 294

Answers (2)

Bryan A
Bryan A

Reputation: 3634

If you want to learn about JS design patterns, I highly recommend Addy Osmani's books/articles. He keeps things very simple and usually supplies quite a bit of example code to help you understand. As far as your code and implementing a design pattern is concerned, it depends on what you want your code to do, and how you want your code/objects to behave. Understanding your requirements/goals are very important before you start coding so you don't get lost in a spaghetti of patterns that really aren't solving a specific problem.

In some cases, implementing a pattern intended for a complex, large application is simply overkill.

Since someone else already correctly pointed out the issues with your code, I'll just leave it there.

Upvotes: 2

Travis J
Travis J

Reputation: 82297

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

Upvotes: 4

Related Questions