Niels February 2016

Performance wise which is better: An object protype or an constructors native function?

Performance wise what is better practice: To create a prototype or to add the methood to the contructor.

This is my code:

function DateGreeting(selector) {
    this.element = document.querySelectorAll(selector)[0];
    this.date = new Date();
    this.hours = this.date.getHours();
    this.greeting = function () {
        if(this.hours <= 11) {
            return "Morning";
        } else if (this.hours >= 12 && this.hours <= 17) {
            return "Afternoon";
        } else {
            return "Evening";
        }
    }
}
DateGreeting.prototype.append = function () {
    this.element.innerHTML = this.greeting();
}

I could also turn this.greeting into an prototype, but will this increased the performance or decrease it? (Or do nothing..)

Should I always put methods in a prototype or in the constructor?

Answers


Luaan February 2016

Engineering is a game of trade-offs. There's no universally best solutions. Be glad for the simple trade-offs, like the one you have here. The answer is:

Whatever the performance impact of functions / prototypes, the 99% dominant part of your code is the this.element.innerHTML = whatever;. The overheads are tiny compared to the cost of rendering HTML.

Performance optimization is costly, and usually results in code that's harder to understand and maintain. Most of the time, you want to use the most easily understandable and simple way to do something, rather than optimizing for performance. Understand the places where performance decisions matter, and profile; optimizing every single thing is almost always a net loss.

As for best practices, I'm affraid those are off-topic on Stack Overflow, since they are always very subjective and attract very opinionated answers, unlikely to be very helpful. You can try some programming forum, or just reading a book or some articles.


RomanPerekhrest February 2016

When creating many objects of type DateGreeting all of them will have a copy of those methods which you have defined on constructor.
While working with that objects you are usually changing their properties, but the methods remain the same.
So declaring methods on prototype would be a more resource-saving approach. Therefore, you can work with many objects which share the same methods without copying methods to each instance.
Declaring methods on custom prototype is definitely better for performance:

// this method will be shared by all DateGreeting instances
DateGreeting.prototype.greeting = function () {
    if(this.hours <= 11) {
        return "Morning";
    } else if (this.hours >= 12 && this.hours <= 17) {
        return "Afternoon";
    } else {
        return "Evening";
    }
}

var greeting1 = new DateGreeting(".greet");
var greeting2 = new DateGreeting(".greet");
console.log(greeting1, greeting2);
// the output:

output

While adding methods to constructor creates copy of each method on each object instance:

function DateGreeting(selector) {
    ...
    this.greeting = function () {
        if(this.hours <= 11) {
            return "Morning";
        } else if (this.hours >= 12 && this.hours <= 17) {
            return "Afternoon";
        } else {
            return "Evening";
        }
    }
}

var greeting1 = new DateGreeting(".greet");
var greeting2 = new DateGreeting(".greet");
console.log(greeting1, greeting2);
// the output:

output2

Post Status

Asked in February 2016
Viewed 3,754 times
Voted 12
Answered 2 times

Search




Leave an answer