JavaScript constructor and namespace in object literal style

Question

Is this a good way to create a class with a constructor and namespace in object literal style?

// root namespace
var myApp = myApp || {};

// sub namespace
myApp.model = {
    // Constructor
    Person: function (name) {
        this.name = name;
    }
};


myApp.model.Person.prototype = {
    sayName: function () {
        alert(this.name);
    },
    sayHi: function () {
        alert("Hi, " + this.name);
    }
};

var p1 = new myApp.model.Person("CK");
p1.sayName();
p1.sayHi();

JSHint shows no error and the full source code is here.

Answer 1

This looks good to me. From a once over;

• Consider using 'use strict'
• You cannot have 'private' functions or properties, that should be fine
• Naming is fine. As I personally dislike namespaces I would probably go for a 1 character namespace for myApp.
• Indenting is fine
• 0 comments, you might want to consider one-liner comments separating the different sections of your code.
• Somewhat to krillgar's point, instanceof checks will have to check against myApp.model.Person with your approach, this should be fine as well

All in all, JavaScript is not Java. I would not go so far as to say that namespaces are not idiomatic, but I would invite you read this.

Answer 2

I would suggest splitting the addition of the methods as follows:

myApp.model.Person.prototype.sayName = function () {
    alert(this.name);
};

myApp.model.Person.prototype.sayHi = function () {
    alert("Hi, " + this.name);
};

This way you can define additional methods in different places (if needed), as you're not replacing the entire prototype in one go.

Answer 3

Based on comment from konijin, here is the updated version

// root namespace
var myApp = myApp || {};

// sub namespace
myApp.model = myApp.model || {};

// constructor
myApp.model.Person = function (name) {
    this.name = name;
}

myApp.model.Person.prototype = {
    sayName: function () {
        alert(this.name);
    },
    sayHi: function () {
        alert("Hi, " + this.name);
    }
};

var p1 = new myApp.model.Person("CK");
p1.sayName();
p1.sayHi();

alert(p1 instanceof myApp.model.Person); // true
alert(p1 instanceof Object); // true
alert(p1 instanceof Person); // Uncaught ReferenceError: Person is not defined

http://jsfiddle.net/cklee75/1d6jgx4k/3/

Answer 4

When you assign an object to a prototype it changes the prototypal inheritance of that object. The prototype of the object will no longer have the original constructor function and it will point to Object instead!

This affects your code, as it is evidenced by adding the following line:

console.log(p1.constructor === Object); // returns: true

Two ways to correct this:

A. Assign the functions directly. Don't wrap them in an object. That would look like this:

myApp.model.Person.prototype.sayName = function(){
   alert(this.name);
};

myApp.model.Person.prototype.sayHi = function(){
    alert("Hi, " + this.name);
};

B. Reassign the constructor to your object. You can do that by adding a line of code into your object, like this:

myApp.model.Person.prototype = {
    constructor: myApp.model.Person, //  <========
    sayName: function () {
        alert(this.name);
    },
    sayHi: function () {
        alert("Hi, " + this.name);
    }
};

Which is the same as this:

myApp.model.Person.prototype.constructor = myApp.model.Person;

It's worth noting that restoring the constructor in this manner creates a property with enumerable set to true. Native constructors are not enumerable by default. So if you're using ES5, this might be the preferred way to restore the constructor:

Object.defineProperty(myApp.model.Person.prototype, 'constructor', {
enumerable: false,
value: myApp.model.Person
});

More reading on this: http://javascript.info/tutorial/constructor