CODEWITHSUNDEEP
javascriptobjectprototype
McShaman
McShaman

Reputation: 3985

What is the best way to write object methods in JavaScript?

OOP suggests only exposing variables and methods that you want the user to be able to access. I have been using the public method declaration (i.e. prototype) for my object.

DrawShape = function() {

}

DrawShape.prototype.circle = function() {
    // draw logic here
}

DrawShape.prototype.square = function() {
    // draw logic here
}

This method seems to be the most efficient as the method isn't rewritten every time an instance in instantiated. However I have found that to create good DRY, modular code I have had to create methods that are only intended to be accessed by other methods (i.e. private methods).

DrawShape = function() {

}

DrawShape.prototype.circle = function() {
    var colour = this.setColour();
    // draw logic here
}

DrawShape.prototype.square = function() {
    var colour = this.setColour();
    // draw logic here
}

DrawShape.prototype.setColour = function() {
    return "blue";
}

Here I have created the method called setColour that is only intended to be run by the other methods. The problem is that the method is public and could be called by anyone or anything.

I could move the method into the object constructor... But this means that I am no longer saving memory (i.e. it will be rewritten every time an instance is instantiated) and it also means that I would have have to move all my other methods into the constructor.

What is the best practices in JavaScript when it comes to creating objects?

Upvotes: 1

Views: 435

Answers (2)

Qantas 94 Heavy
Qantas 94 Heavy

Reputation: 16020

The power of IIFEs (Immediately Invoked Function Expressions):

DrawShape = function() {

}

(function () {
    DrawShape.prototype.circle = function() {
        var colour = setColour();
        // draw logic here
        console.log(typeof setColour); // function
    }

    DrawShape.prototype.square = function() {
        var colour = setColour();
        // draw logic here
        console.log(typeof setColour); // function
    }

    function setColour() {
        return "blue";
    }
    console.log(typeof setColour); // function
})();
console.log(typeof setColour); // undefined

Note that if this is used in the setColour function, you'd have to call it with the current value of this, as you cannot reasonably bind this to a specific object (as far as I am aware, even ES6 does not make this easier):

setColour.call(this);

Anyway, those "u"s must hurt an American's eyes...

Upvotes: 5

Tony
Tony

Reputation: 7445

I would prefer this:

DrawShape = function() {
    var circle = function() {
        var colour = setColour();
        // draw logic here
    };

    var square = function() {
        var colour = setColour();
        // draw logic here
    };

    var setColour = setColour() {
        return "blue";
    };

    return {
        circle: circle,
        square: square
    };
};

I think it looks nice. And a readablity is good too.

EDIT:

According to comments we can rewrite it as follows:

DrawShape = function() {
    this.circle = function() {
        var colour = setColour();
        // draw logic here
    };

    this.square = function() {
        var colour = setColour();
        // draw logic here
    };

    var setColour = setColour() {
        return "blue";
    };

    return this;
};

I don't really like IIFCs.

Upvotes: 1

Related Questions