javascript - 使用继承时，构造函数和原型(prototype)对象有什么区别吗？

Question

考虑以下 JavaScript 片段:

function foo() {
  this.bar = function() { };
}

// or... (if we used an empty constructor function)

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

我这样做有什么区别:

function baz() {
}

baz.prototype = new foo();

在这两种情况下，baz 最终都有一个成员 bar 但有什么不同呢？为什么我要在不同的地方这样做？

Answer 1

区别在于属性位于原型(prototype)链中的位置。

假设我们有 f = new foo(); 和 b = new baz()。那么我们有以下几种情况:

不使用原型(prototype)定义foo:

+-----------+     +---------------+
|     f     |     | foo.prototype |
| __proto__-+---->| constructor   |  
| bar       |     |               |
+-----------+     +---------------+

bar 是对象本身的属性(f.howOwnProperty('bar') 返回 true)。

如果您改为将属性分配给原型(prototype)，情况是:

+-----------+     +---------------+
|     f     |     | foo.prototype |
| __proto__-+---->| constructor   |  
|           |     | bar           |
+-----------+     +---------------+

f 没有自己的属性 bar，但该属性与所有其他 foo 实例共享 .

与第二个片段类似，结果是

+-----------+     +---------------+     +---------------+
|     b     |     | foo instance  |     | foo.prototype |
| __proto__-+---->| __proto__    -+---->| constructor   |  
|           |     | bar           |     |               |
+-----------+     +---------------+     +---------------+

或

+-----------+     +---------------+     +---------------+
|     b     |     | foo instance  |     | foo.prototype |
| __proto__-+---->| __proto__    -+---->| constructor   |  
|           |     |               |     | bar           |
+-----------+     +---------------+     +---------------+

---

为什么要这样做？

主要是结构，不浪费内存。您可以在构造函数中向对象添加函数:

function Foo() {
    this.bar = function() {};
}

但这也意味着 Foo 的每个实例都有自己的函数，即 f1.bar === f2.bar 是 false，尽管这两个函数都在做完全相同的事情。

使用原型(prototype)为您提供了一种清晰的方法来分离所有实例的公共(public)属性和实例特定的属性。

最后，“只是”继承 是软件开发中的一个概念(如聚合)，可以在任何有意义的地方使用。你的第二个片段基本上意味着 baz is-a foo，所以一个 baz 实例，除了它的自己的属性，具有与 foo 实例相同的属性(继承)。