性能方面哪个更好：对象原型还是构造函数本机函数？ [复制]答案

【问题标题】：Performance wise which is better: An object protype or an constructors native function? [duplicate]性能方面哪个更好：对象原型还是构造函数本机函数？ [复制]
【发布时间】：2016-05-17 22:45:13
【问题描述】：

在性能方面什么是更好的做法：创建原型或将方法添加到构造函数。

这是我的代码：

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();
}

我也可以将this.greeting 变成原型，但这会提高性能还是降低性能？（或者什么都不做……）

我应该始终将方法放在原型中还是在构造函数中？

【问题讨论】：

看：stackoverflow.com/questions/12180790/…

标签： javascript oop

【解决方案1】：

当创建许多DateGreeting 类型的对象时，它们都将拥有您在构造函数中定义的那些方法的副本。
在使用这些对象时，您通常会更改它们的属性，但方法保持不变。
因此在原型上声明方法将是一种更节省资源的方法。因此，您可以使用许多共享相同方法的对象，而无需将方法复制到每个实例。
在自定义原型上声明方法肯定会更好地提高性能：

// 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:

向构造函数添加方法时，会在每个对象实例上创建每个方法的副本：

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:

【讨论】：

【解决方案2】：

工程是一场权衡取舍的游戏。没有普遍的最佳解决方案。为简单的权衡感到高兴，就像您在这里所做的那样。答案是：

无论函数/原型对性能有何影响，代码中 99% 的主要部分是 this.element.innerHTML = whatever;。与呈现 HTML 的成本相比，开销很小。

性能优化成本高昂，通常会导致代码更难理解和维护。大多数时候，您希望使用最容易理解和最简单的方式来做某事，而不是优化性能。了解绩效决策的重要性和概况；优化每一件事几乎都是净损失。

至于最佳实践，我担心这些在 Stack Overflow 上是题外话，因为它们总是非常主观并且会吸引非常固执己见的答案，不太可能很有帮助。您可以尝试一些编程论坛，或者只是阅读一本书或一些文章。

【讨论】：