javascript - これらのプロトタイプ宣言の違いは何ですか?

Question

方法 1:

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

方法 2:

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

上記の各方法の違いと利点は何ですか?

Answer 1

2 番目のものは、継承チェーンを壊し、以前にプロトタイプに追加したすべてのプロパティを削除します。

この例で「継承チェーンの中断」が何を意味するか見てみましょう:

function A(){}
A.prototype.a = function(){}
function B(){}
B.prototype = new A();
B.prototype.b = function(){}

hereのインスタンスはメソッドBを継承しaます。

しかし、もしそうなら

B.prototype = { b: function(){} }

それはもはやそうではありません。

Answer 2

最初のケースでは、新しいプロパティを既存のオブジェクトに追加しています。2 番目のケースでは、新しい値 (オブジェクト) で上書きしています。 Rectangle.prototype

プロトタイプを上書きすると、次の結果が生じます。

• Rectangle.prototype.constructorはもう指していRectangleません。オブジェクト リテラルを使用すると、代わりに を指しObjectます。これは、割り当てることで簡単に解決できます

  Rectangle.prototype.constructor = Rectangle;
  

• プロトタイプの既存のすべてのプロパティを失う可能性があります ( のように再度追加しない限りconstructor)。

• の既存のインスタンスはRectangle変更の影響を受けません。それらは引き続き古いプロトタイプを参照し、新しいメソッド/プロパティを継承しません。

• instanceofはプロトタイプを比較し、前のポイントで述べたように、既存のインスタンスは古いプロトタイプへの参照を保持するため、既存のインスタンス (つまりrect instanceof Rectangle)に対するテストは失敗します。instanceof

インスタンスを作成する前にプロトタイプをセットアップした場合は、最後の 3 つの点を気にする必要はありません。

上記の各方法の違いと利点は何ですか?

オブジェクト リテラルを使用してプロトタイプを上書きする唯一の利点は、構文がより簡潔になることです。ただし、IMO は欠点を上回るものではありません。

2 つのオブジェクトをマージすると、プロトタイプを上書きせずにオブジェクト リテラルを使用できます。2 つの JavaScript オブジェクトのプロパティを動的にマージするにはどうすればよいですか? .

Answer 3

Rectangle.prototypeがの場合{}、2 つの方法に違いはありません。