Five ways to create objects…

1. Simple Object Literal

myApp.notepad  = {};
myApp.notepad.writeable = true;
myApp.notepad.font  = 'helvetica';
myApp.notepad.setFont = function(theFont) {
    myApp.notepad.font = theFont;
}

2. Nested Object Literal

myApp.notepad  = {
    writeable: true,
    font: 'helvetica',
    setFont: function(theFont) {
        this.font = theFont;
    }
}

3. Constructor using Object Literal

myApp.Notepad = function(defaultFont) {
    var  that = {};
    that.writeable = true;
    that.font = defaultFont;
    that.setFont = function(theFont) {
        that.font = theFont;
    }
    return that;
}

myApp.notepad1 =  myApp.Notepad('helvetica');

4. Simple Constructor for new

myApp.Notepad = function(defaultFont) {
    this.writeable = true;
    this.font = defaultFont;
    this.setFont = function(theFont) {
        this.font = theFont;
    }
}

myApp.notepad1  = new myApp.Notepad('helvetica');

5. Prototype with Constructor for new

myApp.Notepad = function(defaultFont) {
    this.font = defaultFont;
}
myApp.Notepad.prototype.writeable  = true;
myApp.Notepad.prototype.setFont  = function(theFont) {
    this.font = theFont;
}
myApp.notepad1  = new myApp.Notepad('helvetica');

The first two examples are best suited for creation of one-time objects. The last three describe templates for creation of multiple objects with a shared design.

All are useful. None are wrong. If I only needed one notebook in my app, I’d lean towards using Nested Object Literal since it neatly encapsulates all properties within its defining closures. For multiple notebook “instances” I like Prototype with Constructor for new simply because I can lock generic properties into the prototype object, making the constructor cleaner and more efficient

Next time I’ll talk about how to employ object inheritance with each methodology.

About these ads

12 thoughts on “Five ways to create objects…

  1. This is really helpful. When first learning javascript it took me a really long time to finally narrow down and sort out these differences. I use #5 the most but like you said it really depends on what you are doing.

  2. Pingback: Javascript Orienté Objet : syntaxe de base des classes JS à l’intention des développeurs PHP | BrainCracking - Veille technologique sur les applications Web

  3. I wouldn’t list #4 as a proper way to create an object as the setFont function is not shared between instances in the prototype. This means that if you create 1000 notepad objects, you will have 1000 separate setFont functions in memory. With the method in #5, you would only have one setFont function that is shared between all notepad objects.

  4. #3 is close to the module pattern, however I wouldn’t call it a constructor. If it returns a new object and is like a constructor, then better to say so in the name, e.g. “createNotepad”.

    You might also include Lasse Nielson’s clone (also known as Crockford’s beget) function.


    Rob

  5. Pingback: [번역] 자바스크립트 객체를 생성하는 5가지 방법 | Inside jQuery

  6. Pingback: Five ways to create objects… | JavaScript Way to Go!! | Scoop.it

  7. Pingback: JavaScript Object Creation Pattern | BlogoSfera

  8. Pingback: Javascript 객체를 생성하는 5가지 방법 - blog.hemapresso.com

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s