Module pattern with prototype

  • (2 Pages)
  • +
  • 1
  • 2

15 Replies - 7204 Views - Last Post: 03 March 2012 - 03:36 PM

#1 hiddenghost  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 39
  • View blog
  • Posts: 621
  • Joined: 15-December 09

Module pattern with prototype

Post icon  Posted 01 March 2012 - 04:15 PM

On this page:
http://briancray.com...module-pattern/
some code is shown mostly to demonstrate the module pattern.

I kinda get the module pattern in it's basic form.

What I am having trouble understanding is this little bit of code in the examples on that page.

var module = (function () {
    // private variables and functions
    var foo = 'bar';
 
    // constructor
    var module = function () {
    };
 
    // prototype
    module.prototype = {
        constructor: module,
        something: function () {
        }
    };
 
    // return module
    return module;
})();
 
var my_module = new module();


Especially this piece right here.
    // constructor
    var module = function () {
    };
 
    // prototype
    module.prototype = {
        constructor: module,
        something: function () {
        }
    };


What happens when module.prototype = {} with a constructor: module member?

I don't want to give up trying to understand this.
It's the most confusing thing I've come across while using javascript.

This post has been edited by Dormilich: 03 March 2012 - 01:18 AM
Reason for edit:: featuring this thread


Is This A Good Question/Topic? 3
  • +

Replies To: Module pattern with prototype

#2 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3569
  • View blog
  • Posts: 10,402
  • Joined: 08-June 10

Re: Module pattern with prototype

Posted 01 March 2012 - 11:28 PM

it is indeed confusing. I have checked both articles and it seems they take different approaches to the pattern.

the module pattern I came to know goes along Snook's "description"

http://snook.ca/archives/javascript/no-love-for-module-pattern said:

The Module Pattern is the use of closures to create, in essence, private functions that are only accessible by other functions created within that closure.


and Cray's module pattern lives of the effect provided by the factory pattern (essentially I would call it a Factory with private methods, while "Snook's" module pattern is more like a Singleton). I may point out that Cray doesn't talk about any point Snook is complaining about.

the part you have highlighted in your question is nothing more than a regular object constructor which is able to use private functions/variables through the module pattern.

in the end, whether ot not to use the module pattern solely depends on your preferences, your likings and of course your implementation.
Was This Post Helpful? 0
  • +
  • -

#3 hiddenghost  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 39
  • View blog
  • Posts: 621
  • Joined: 15-December 09

Re: Module pattern with prototype

Posted 02 March 2012 - 01:07 AM

View PostDormilich, on 02 March 2012 - 12:28 AM, said:

it is indeed confusing. I have checked both articles and it seems they take different approaches to the pattern.

the module pattern I came to know goes along Snook's "description"

http://snook.ca/archives/javascript/no-love-for-module-pattern said:

The Module Pattern is the use of closures to create, in essence, private functions that are only accessible by other functions created within that closure.


and Cray's module pattern lives of the effect provided by the factory pattern (essentially I would call it a Factory with private methods, while "Snook's" module pattern is more like a Singleton). I may point out that Cray doesn't talk about any point Snook is complaining about.

the part you have highlighted in your question is nothing more than a regular object constructor which is able to use private functions/variables through the module pattern.

in the end, whether ot not to use the module pattern solely depends on your preferences, your likings and of course your implementation.


I think that's my problem. The page is mostly about discounting Snook's examples with more examples by Cray.

There isn't exactly a clear explanation of what's happening in that code.

I like the module pattern, but in Cray's first example I saw that strange constructor(at least it's strange to me right now).

The usage of prototype in from of the literal is confounding to me.

And this code line - constructor: module, is confusing me too.
Was This Post Helpful? 0
  • +
  • -

#4 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3569
  • View blog
  • Posts: 10,402
  • Joined: 08-June 10

Re: Module pattern with prototype

Posted 02 March 2012 - 02:31 AM

View Posthiddenghost, on 02 March 2012 - 09:07 AM, said:

I like the module pattern, but in Cray's first example I saw that strange constructor(at least it's strange to me right now).

The usage of prototype in from of the literal is confounding to me.

that part is plain object construction. it has nothing to do with the module pattern itself.
function MyClass() {
}
// or
var MyClass = function() {
};

MyClass.prototype.someMethod = function() {};
// or
MyClass.prototype = {
    someMethod: function() {}
};

var my_object = new MyClass;



View Posthiddenghost, on 02 March 2012 - 09:07 AM, said:

And this code line - constructor: module, is confusing me too.

that is just resetting the constructor property (since it uses a function statement, not a function declaration). you'll come across that when you dive into Javascript inheritance.
Was This Post Helpful? 1
  • +
  • -

#5 hiddenghost  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 39
  • View blog
  • Posts: 621
  • Joined: 15-December 09

Re: Module pattern with prototype

Posted 02 March 2012 - 01:45 PM

Oh, I feel so dumb.

So when the module name is used in his code is that all the same object that is also being the constructor.
Was This Post Helpful? 0
  • +
  • -

#6 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3569
  • View blog
  • Posts: 10,402
  • Joined: 08-June 10

Re: Module pattern with prototype

Posted 02 March 2012 - 01:46 PM

View Posthiddenghost, on 02 March 2012 - 09:45 PM, said:

So when the module name is used in his code is that all the same object that is also being the constructor.

???
Was This Post Helpful? 0
  • +
  • -

#7 hiddenghost  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 39
  • View blog
  • Posts: 621
  • Joined: 15-December 09

Re: Module pattern with prototype

Posted 02 March 2012 - 04:44 PM

View PostDormilich, on 02 March 2012 - 02:46 PM, said:

View Posthiddenghost, on 02 March 2012 - 09:45 PM, said:

So when the module name is used in his code is that all the same object that is also being the constructor.

???

Hahahahaha! :bigsmile:
var module = (function () { // module here is equal to self executing anonymous function
    // private variables and functions
    var foo = 'bar';
 
    // constructor
    var module = function () { // module here is equal to function
    };
 
    // prototype
    module.prototype = { // module here is prototyped to {}
        constructor: module, // module here is constructor
        something: function () {
        }
    };
 
    // return module
    return module; // module here with prototype set to {} is returned. 
})();
 
var my_module = new module(); // module is new object here but what the hell?





When new module(); is happening is it using
var module = (function(){})(); // module is equal to self executing anonymous function 

or is it using:
    var module = function () { // module here is equal to function
    };


And when this is going on:
    // prototype
    module.prototype = { // module here is prototyped to {}
        constructor: module, // module here is constructor
        something: function () {
        }
    };


How is something: function(){} using constructor: module like a constructor?
Or what is using constructor: module as a constructor? module = (function(){})();?

So many assignments to the word module I'm losing track of what module is.

My understanding of what a constructor is - is that it's a parameter setter for when and object is created.

This syntax for it in javascript is screwing me up though.

This post has been edited by hiddenghost: 02 March 2012 - 04:48 PM

Was This Post Helpful? 0
  • +
  • -

#8 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3569
  • View blog
  • Posts: 10,402
  • Joined: 08-June 10

Re: Module pattern with prototype

Posted 02 March 2012 - 04:54 PM

ok, you definitely need to read more about object construction. your understanding problems have almost nothing to do with th module pattern.


    // constructor
    var module = function () { // module here is equal to function
    };
 
    // prototype
    module.prototype = { // module here is prototyped to {}
        constructor: module, // module here is constructor
        something: function () {
        }
    };


this is nothing more than an object constructor. you would use that as
var obj1 = new module();
var obj2 = new module();

obj1.something();

again, the constructor property is for internal purposes only (cf. inheritance), so you donít need to consider it now.


Quote

When new module(); is happening is it using
var module = (function(){})(); // module is equal to self executing anonymous function


or is it using:
var module = function () { // module here is equal to function
};

what would you guess? (hint: objects are passed by reference) or in other words, what dou you get when you execute the module object (the self-executing function)?

(note: the naming of "module" for the module object and the constructor at the same time adds to your confusion)
Was This Post Helpful? 1
  • +
  • -

#9 hiddenghost  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 39
  • View blog
  • Posts: 621
  • Joined: 15-December 09

Re: Module pattern with prototype

Posted 02 March 2012 - 05:16 PM

Holy (%@P!

I think I'm seeing something here.

When the new module() is being called there is an execution of
(function(){})();

And a simultaneous call to the internal module that is being called through the return and being assigned to the outer module that did equal (function(){})();. I suppose also that the return of module was actually done on assignment of that anonymous function.

something: function(){} is now a method of module = function(){} that now belongs to the new module().

Now for the constructor: module part.

Is constructor being used in it's user created property sense or is it still the stock javascript constructor?

Would module.constructor just return:
function () { // module here is equal to function
};


That originally was assigned to the returned module in the first place?

This post has been edited by hiddenghost: 02 March 2012 - 05:25 PM

Was This Post Helpful? 0
  • +
  • -

#10 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3569
  • View blog
  • Posts: 10,402
  • Joined: 08-June 10

Re: Module pattern with prototype

Posted 02 March 2012 - 05:44 PM

View Posthiddenghost, on 03 March 2012 - 01:16 AM, said:

When the new module() is being called there is an execution of
(function(){})();

nope. a >>>self-executing<<< function is always immediately invoked. what happens is that the self-executing function returns a function itself, which can be invoked at any time.

View Posthiddenghost, on 03 March 2012 - 01:16 AM, said:

And a simultaneous call to the internal module that is being called through the return and being assigned to the outer module that did equal (function(){})();. I suppose also that the return of module was actually done on assignment of that anonymous function.

"called through a return" is a bad description. the return statement gives you a function here (which according to Javascript is passed by reference)

View Posthiddenghost, on 03 March 2012 - 01:16 AM, said:

Is constructor being used in it's user created property sense or is it still the stock javascript constructor?

itís still the standard Javascript constructor property of the Function object.
Was This Post Helpful? 0
  • +
  • -

#11 hiddenghost  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 39
  • View blog
  • Posts: 621
  • Joined: 15-December 09

Re: Module pattern with prototype

Posted 02 March 2012 - 07:38 PM

Ok. I'm gonna run through the process of execution.

I'll post back when I think I have it right.
Was This Post Helpful? 0
  • +
  • -

#12 hiddenghost  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 39
  • View blog
  • Posts: 621
  • Joined: 15-December 09

Re: Module pattern with prototype

Posted 02 March 2012 - 09:47 PM

I'm going to break down the process backwards.
Not exactly what's happening I'm sure, but it might look like
this if we stripped the outer parts away as it executes.

This is what the code looks like to start with as we already know.
var module = (function () {
    // private variables and functions
    var foo = 'bar';
 
    // constructor
    var module = function () {
    };
 
    // prototype
    module.prototype = {
        constructor: module,
        something: function () {
        }
    };
 
    // return module
    return module;
})();
 
var my_module = new module();


When the script starts to run it does this.
var foo = 'bar'; // Because this was in the self exectuting function it's private to module as a closure
// and exists with module still able to access even though it's outside of it and protected.

// The return from (function(){})(); is assigned to module
var module = function (){ // Was inside of the anonymous function.

};

// prototype
module.prototype = {
    constructor: module,
    something: function () {
    }
};


We use the new operator to call
module = function(){};
which has the prototype {} which makes the prototype
prototype.constructor
prototype.something
var moduleMake = new module();


If we take the code as a literal created from the main function and prototype we finally get this.
var foo = 'bar';
var module = function(){
    return {
        constructor: function(){ // contains what the constructor has?
            return {
                    constructor: function(){       
                    },
                    something: function(){
                    }
            };
        },
        something: function(){
        }
    };
};


Ok this looks wrong.
What am I looking at here.
Am I imagining things? :)
Was This Post Helpful? 0
  • +
  • -

#13 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3569
  • View blog
  • Posts: 10,402
  • Joined: 08-June 10

Re: Module pattern with prototype

Posted 03 March 2012 - 01:16 AM

it indeed looks wrong. itís more like
var module = (function() {
    return function module() {
        // constructor code here
    };
})();

the only point why we donít do it like that is that in the above code we cannot set the prototype to use the private variables. still, we could use normal prototyping.

var outer_module = (function() {
    return function inner_module() {
        // constructor code here
    };
})();

// set prototype
// the variable outer_module is a function, therefore it
// can be used as object constructor
outer_module.prototype = {
    someMethod: function() {}
};

var myobj = new outer_module;
myobj.someMethod();

Was This Post Helpful? 1
  • +
  • -

#14 hiddenghost  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 39
  • View blog
  • Posts: 621
  • Joined: 15-December 09

Re: Module pattern with prototype

Posted 03 March 2012 - 04:22 AM

View PostDormilich, on 03 March 2012 - 02:16 AM, said:

outer_module.prototype = {
    someMethod: function() {}
};



So any method added to that literal will inherit from outer_module?

Does it still go by reference in the prototype?

Like:
var newModuleObject = new outer_module();

newModuleObject.someMethod(); // Is it used by reference?

Was This Post Helpful? 0
  • +
  • -

#15 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3569
  • View blog
  • Posts: 10,402
  • Joined: 08-June 10

Re: Module pattern with prototype

Posted 03 March 2012 - 02:17 PM

Quote

So any method added to that literal will inherit from outer_module?

outer_module is only the reference to the inner_module function



Quote

Does it still go by reference in the prototype?

since objects are passed by reference, yes.
Was This Post Helpful? 1
  • +
  • -

  • (2 Pages)
  • +
  • 1
  • 2