Javascript sub methods / namespacing with constructor functions

Question

I cannot thank you enough for your time and help! I've searched for almost 2 days and cannot find my exact answer. To begin:

I've always used object literal notation to create my objects. However, I've recently come across a situation where I need to create multiple instances of the same object. I believe what I'm attempting to create are "constructor functions":

I need to have the ability to create multiple "Window" objects:

var window1 = new Window();
var window2 = new Window();
var window3 = new Window();

I want the ability to be able to organize methods as such:

window1.errorMessage.show();
window2.errorMessage.hide();
window3.errorMessage.hide();

Instead of something like:

window1.showErrorMessage();
window2.hideErrorMessage();
window3.hideErrorMessage();

An example of how I would build my window object in literal notation:

var Window = {
    id: null,
    
    init : function(id) {
        this.id = id;
    },

    errorMessage : {
        show : function(message) {
            // jquery that will simply take the id of this window,
            //  find the errorMessage html element within the window,
            //  insert the "message" and show it.
        },
    
        hide : function() {
            // jquery that will simply take the id of this window,
            //  find the errorMessage html element within this window and hide it.
        }
    }
}

An example of how I would attempt to build my window object using constructor functions and prototyping:

function Window(id) {
    this.id = id;

    this.errorMessage = function() {}
}

Window.prototype.errorMessage = function() {}

Window.errorMessage.prototype.show = function(message) {
    // jquery that will simply take the id of this window,
    //  find the errorMessage html element within the window,
    //  insert the "message" and show it.
}

Window.errorMessage.prototype.hide = function() {
    // jquery that will simply take the id of this window,
    //  find the errorMessage html element within this window and hide it.
}

When I attempt to execute the following code:

var window1 = new Window();

window1.errorMessage.show('An error message');

(Ultimately I would like to call it using:)

this.errorMessage.show('An error message');

I receive the following console errors from Firefox:

• TypeError: Window.errorMessage is undefined
• TypeError: Window.errorMessage.show is not a function

Thank so much for you help. I appreciate it.

Answer 1

I would still declare your methods on the function's prototype like you attempted, but you'll have to declare show and hide methods on a new ErrorMessage type. I think something like this is the best and most efficient (because instances of ErrorMessage will all share the same show and hide methods) thing to do (if I understand your needs correctly).

function Window(id) {
    this.id = id;
    this.errorMessage = new ErrorMessage();
}

function ErrorMessage() { }
ErrorMessage.prototype.show = function() {}
ErrorMessage.prototype.hide = function() {}

Answer 2

You only need to use prototype if you're doing inheritance. Since you're not doing inheritance forget about prototype for now.

Each Window has an instance of ErrorMessage. So I would write it like:

function Window(id) {
  this.id = id;
  this.errorMessage = new ErrorMessage();
}
function ErrorMessage() {
   this.show = function () {};
   this.hide = function () {};
}
var window1 = new Window();
window1.errorMessage.show();