Javascript Prototype Pattern - Feedback

Question

I'm switching from using a Javascript revealing module pattern and what I have below seems to work. What I want to know is if what I'm doing is correct and does it follow best practices. For example, is the way I'm preserving the 'this' state and calling an init function in the constructor correct?

var testApp = function(){
    //Kick it off
    this.init();
};

testApp.prototype = {
    getUsers: function(callback){
        //do stuff
    },
    buildUserTable: function(data){
        //do stuff
    },
    refreshTable: function(){
        //Example
        this.getUsers();
    },
    init: function(){
        //Preserve 'this'
        var instance = this;
        //Callback + init
        this.getUsers(function(data){
            instance.buildUserTable(data);
        }); 
        $('.formSection .content').hide();
        $('.formSection .content:first').slideDown('slow').addClass('selected');
    }
};

window.onload = function () {
    var form = new testApp();
};

Other than `testApp -> TestApp` everything looks good... Convention for `instance` is usually `that` or my favorite, `var self = this`. — elclanrs, May 21 '13 at 20:32
Essentially the same question as http://stackoverflow.com/questions/1595611/how-to-properly-create-a-custom-object-in-javascript — Aaron Kurtzhals, May 21 '13 at 20:33
why have init only to call it in the constructor, shouldn't that code just be a part of the constructor function? — dandavis, May 21 '13 at 20:41
Yeah, I guess it should be 'TestApp' thanks. @dandavis The init will house all the initial event handlers, therefore I think these would be neater if placed within the init function instead of polluting the Constructor. Correct? — user1442404, May 21 '13 at 21:04
@user1442404: Depends on what the constructor does. In your case we can only see the call to `init`, so there is no pollution. And if you don't need to repeat the `init` call later, there is no reason to put the code outside of the constructor. — Bergi, May 21 '13 at 21:33

score 2 · Answer 1 · answered May 21 '13 at 20:30

2

You're overriding the prototype completely. You can't deal with inheritance that way.

Since {} is an object you are implicitly inheriting from Object but nothing else.

Inheritance looks like this:

function A() {};
function B() {};
B.prototype = new A();
var b = new B();
console.log(b instanceof A); // "true"

B now inherits from A and Object.

If you now do:

B.prototype = {
    foo: function () {}
};

var b = new B();
console.log(b instanceof A); // "false"

You're not longer inhering from A;

How to add functions to a prototype? Use this notation:

B.prototype.foo = function () {};

answered May 21 '13 at 20:30

Halcyon

57,230
10
89
128

The parent class can have the prototype overriden, I see no problem in that whatsoever, and in fact I use all the time for single classes that have to children. – elclanrs May 21 '13 at 20:31
If you don't need inheritance you can get away with more. Prototypes then only become a way to save some memory. You could always switch to just object literals if you don't need inheritance (and don't care about memory). – Halcyon May 21 '13 at 20:32
What's wrong with overwriting the prototype property completely (assumed you have no instances that already inherit from the old one)? – Bergi May 21 '13 at 21:35
It breaks inheritance. I can keep repeating myself ;) – Halcyon May 21 '13 at 21:35

Javascript Prototype Pattern - Feedback

1 Answers1