JavaScript 原型 - 困惑

Question

我现在正在研究原型，并认为我快到了，但我对一个主题有点困惑。

假设我们有：

function Animal(name, gender) {
  this.name = name;
  this.gender = gender;
}

function Cat(species) {
  this.species = species;
}

Cat.prototype.color = null;

Cat.prototype = new Animal();

我的问题是，为什么新属性需要prototype？

为什么我们不能这样做：

Cat.color = null;

编辑::

所有的白色块都来自另一个 SO 帖子的 uml 图。我添加了橙色框以适应我提供的这个示例。我添加的这张图还有意义吗？

我认为我的主要问题是我让函数构造函数和实际原型对象过于相似，而实际上它们是完全不同的东西。一个是函数，一个是对象。

编辑 2

通过此图，我试图阐明constructor 属性如何交互以及它与什么确切连接，更具体地说，它如何影响this 的使用。任何关于有效性的 cmets 都会有所帮助。

Answer 1

好问题：

Cat.color = null;只在那个Cat 上设置颜色，如果你把它放在prototype 上，任何'Cat' 之后实例化也将包含color 属性。

假设您有类似var tabby = new Cat('feline') 的代码，上面的代码没有prototype tabby 不会有color。

Answer 2

“Javascript 中的一切都是对象”

有没有想过为什么不用Number.toString = function(){....?就可以在数字50上使用.toString()

因为它是内置在 Javascript 中的。所有 Number.prototypes 都有.toString 方法。数组、对象、字符串等不胜枚举。

每次在 JS 中编写 Number 时，想象（实际上没有调用构造函数）调用 Number 构造函数，类似于 Animal 和 Cat 的构造函数。

这就是构造函数的作用。他们创建了一个（他们的名字）.prototype 的实例。这就是为什么function Animal() 制造了一些Animal.prototype 等等。

function Animal() 和 function Cat() 否则与 Animal.prototype 和 Cat.prototype 无关。如果你真的用new Animal()创建了一个新的Animal然后改变了构造函数，你刚刚创建的新Animal不会被更新，因为它是在构造函数改变之前构造的。

假设你制作了一个Cat“霍布斯”

然后，当你说Cat.prototype.color = null; 时，你是说 Cat.prototype 的所有对象都应该有一个“null”的颜色值。这将更新您之前构建的 Cats，因为现在当您尝试查找 Hobbe 的颜色时，它会吐出 undefined，因为您没有在 function Cat() 中为 Hobbes 本人指定颜色，但随后 JS 将回溯到 Hobbe 的 Cat.prototype发现颜色其实是null。

希望对您有所帮助。

Answer 3

需要提醒的几件事；

1. 构造函数用于实例化新对象。如果构造函数具有使用前面的 this. 关键字定义的变量，那么这些将是实例化对象的属性。使用前面的 var 关键字定义的变量不会成为实例化对象的一部分。
2. 由构造函数实例化的对象会将其原型分配给构造函数的原型，因此它们可以直接访问构造函数的原型。这意味着他们可以使用（共享）构造函数原型中的属性和函数，就好像它们是他们自己的一样。
3. 当您考虑从构造函数实例化数千个对象时，原型非常有用。每个对象的唯一属性，例如名称、id、颜色或任何应该在构造函数中使用前面的this. 定义的东西。例如this.name 或this.color，但是它们应该共享的功能应该在构造函数原型中定义，因为在每个实例化对象中为它们保留空间显然会浪费内存。