原型继承最佳实践？

Question

我刚刚接触 JavaScript，并试图了解原型继承。似乎有多种方法可以达到相同的效果，所以我想看看是否有任何最佳实践或理由以一种方式做事而不是另一种方式。这就是我要说的：

// Method 1
function Rabbit() {
    this.name = "Hoppy";

    this.hop = function() {
        console.log("I am hopping!");
    }
}

// Method 2
function Rabbit() {}

Rabbit.prototype = {
    name: "Hoppy",

    hop: function() {
        console.log("I am hopping!");
    }
}

// Method 3
function Rabbit() {
    this.name = "Hoppy";
}

Rabbit.prototype.hop = function() {
    console.log("I am hopping!");
}

// Testing code (each method tested with others commented out)
var rabbit = new Rabbit();
console.log("rabbit.name = " + rabbit.name);        
rabbit.hop();

所有这些看起来单独都有相同的效果（除非我遗漏了一些东西）。那么一种方法是否优于另一种方法呢？你怎么做？

Answer 1

当您将方法放在原型上时，每个实例对象都共享对该方法的相同引用。如果您有 10 个实例，则该方法有 1 个副本。

当您执行示例 1 中的操作时，每个实例对象都有其自己的同一方法版本，因此，如果您创建 10 个对象，则会运行 10 个代码副本。

使用原型之所以有效，是因为 javascript 具有将函数执行与实例相关联的机制，即它为函数的执行设置 this 属性。

因此，高度推荐使用原型，因为它占用的空间更少（当然，除非这就是您想要的）。

在方法 2 中，您通过将原型设置为等于对象字面量来设置原型。请注意，这里您正在设置一个属性，我认为您不打算这样做，因为所有实例都将获得相同的属性。

在方法 3 中，您一次构建一个作业的原型。

对于所有事情，我更喜欢方法 3。即在我的构造函数中我设置了属性值

myObj = function(p1){
   this.p1; // every instance will probably have its own value anyway.
}

myObj.prototype.method1 = function(){..} // all instances share the same method, but when invoked  **this** has the right scope.

Answer 2

让我们一次看一个例子。首先：

function Rabbit() {
    this.name = "Hoppy";

    this.hop = function() { //Every instance gets a copy of this method...
        console.log("I am hopping!");
    }
}
var rabbit = new Rabbit();

正如您在问题中所说，上面的代码将会起作用。它将创建一个 Rabbit 类的新实例。每次创建实例时，hop 方法的副本都会存储在该实例的内存中。

第二个示例如下所示：

function Rabbit() {}

Rabbit.prototype = {
    name: "Hoppy",

    hop: function() { //Now every instance shares this method :)
        console.log("I am hopping!");
    }
}
var rabbit = new Rabbit();

这一次，Rabbit 的每个实例都将共享 hop 方法的副本。这要好得多，因为它使用更少的内存。但是，每个 Rabbit 将具有相同的名称（假设您没有在构造函数中隐藏 name 属性）。这是因为该方法是从prototype继承的。在 JavaScript 中，当您尝试访问对象的属性时，将首先在对象本身上搜索该属性。如果在那里找不到，我们会查看 prototype （依此类推，沿着原型链向上，直到到达 prototype 属性为 null）。

你的第三个例子几乎就是我的做法。实例之间共享的方法应在原型上声明。您可能希望在构造函数中设置诸如 name 之类的属性，可以在每个实例的基础上进行声明：

function Rabbit(rabbitName) {
    this.name = rabbitName;
}
Rabbit.prototype.hop = function() {
    console.log("Hopping!");
}

Answer 3

这是一个经常被误解的重要问题。这取决于你想做什么。总体来说，hvgotcode的回答是对的。任何频繁实例化的对象都应该将方法和属性附加到原型上。

但在非常特殊的情况下，其他人也有优势。阅读本文，包括评论： http://net.tutsplus.com/tutorials/javascript-ajax/stop-nesting-functions-but-not-all-of-them/

有时上述方法 1 会有所帮助，使您能够“私有”可读/可写属性和方法。虽然在大量实例化的对象中，这通常不值得牺牲，但对于仅实例化一次或几次的对象，或者没有许多内部分配，或者如果您处于具有许多不同技能水平和敏感性的开发团队环境中，那么可能会有帮助。

一些开发人员采用了另一种好的策略，试图弥补其他策略的一些缺点。那是：

var Obj = function() {
    var private_read_only = 'value';

    return {
        method1: function() {},
        method2: function() {}
    };
};

Answer 4

// option 4
var Rabbit {
    constructor: function () {
        this.name = "Hoppy";
        return this;
    },

    hop: function() {
        console.log("I am hopping!");
    }
};

var rabbit = Object.create(Rabbit).constructor();
console.log("rabbit.name = " + rabbit.name);        
rabbit.hop();

在使用 new 进行原型 OO 时，构造函数是完全可选的。

正如已经指出的，如果您可以通过原型共享某些内容，请这样做。原型在内存方面更有效，并且在实例化时间方面更便宜。

然而，一个完全有效的替代方案是

function Rabbit() {
    // for some value of extend https://gist.github.com/1441105
    var r = extend({}, Rabbit);
    r.name = "Hoppy";
    return r;
}

使用“原型”的属性扩展“实例”。真正的原型面向对象的唯一优点是它是实时链接，这意味着对原型的更改会反映到所有实例。

Answer 5

做一些性能测试（声明大约 100 万个兔子变量）。第一种方法将是最消耗时间和内存的。