这些原型声明有什么区别？(What is the difference between these prototype declaration? [duplicate])

这些原型声明有什么区别？(What is the difference between these prototype declaration? [duplicate])

这个问题在这里已经有了答案：

定义一个Javascript原型 5个答案

方法1：

Rectangle.prototype.getArea = function() { return this.length * this.width; };

方法2：

Rectangle.prototype = { getArea: function() { return this.length * this.width; } };

上述每种方法有什么区别和优点？

This question already has an answer here:

Defining a Javascript prototype 5 answers

Method 1:

Rectangle.prototype.getArea = function() { return this.length * this.width; };

Method 2:

Rectangle.prototype = { getArea: function() { return this.length * this.width; } };

What are the differences and advantages of each of the methods above?

最满意答案

在第一种情况下，您将向现有对象添加新属性，第二种情况下，您将使用新值（对象） 覆盖 Rectangle.prototype 。

覆盖原型有以下后果：

Rectangle.prototype.constructor不再指向Rectangle 。 当使用对象字面量时，它将指向Object 。 这很容易通过分配来解决

Rectangle.prototype.constructor = Rectangle;

您可能会丢失原型上的所有现有属性（除非再次添加它们，例如使用constructor ）。

现有的Rectangle实例不会受到更改的影响。 他们仍然会引用旧的原型，并且不会继承新的方法/属性。

现有实例（即rect instanceof Rectangle ）的instanceof测试将失败 ，因为instanceof比较了原型，并且如前所述，现有实例保留对旧原型的引用。

如果您在创建任何实例之前设置了原型，那么您不必关心最后三点。

上述每种方法有什么区别和优点？

使用对象文本覆盖原型的唯一优点是语法更简洁。 IMO虽然没有超过这个缺点。

您可以使用对象文本，而不必通过合并两个对象来覆盖原型： 如何动态合并两个JavaScript对象的属性？ 。

In the first case you are adding a new property to an existing object, in the second case you are overwriting Rectangle.prototype with a new value (object).

Overwriting the prototype has the following consequences:

Rectangle.prototype.constructor does not point to Rectangle anymore. When you use an object literal, it will point to Object instead. This can easily by solved by assigning

Rectangle.prototype.constructor = Rectangle;

You potentially loose all existing properties on the prototype (unless you add them again, like with constructor).

Existing instances of Rectangle will not be affected by the change. They will still reference the old prototype and don't inherit the new methods/properties.

instanceof tests on existing instances (i.e. rect instanceof Rectangle) will fail, since instanceof compares prototypes and as mentioned in the previous point, existing instances keep their reference to the old prototype.

If you set up the prototype before you create any instances then you don't have to concern yourself with the last three points.

What are the differences and advantages of each of the methods above?

The only advantage of overwriting the prototype using an object literal is the more concise syntax. IMO it does not outweigh the disadvantages though.

You can use an object literal without overwriting the prototype by merging the two objects: How can I merge properties of two JavaScript objects dynamically?.