javascript - object.key = fn() と object.prototype.key = fn() の違いは?

Question

オプション1：

NotificationsService.push = function (notifications) {}

オプション 2:

NotificationsService.prototype.push = function (notifications){}

関数を直接定義する場合とプロトタイプチェーンで定義する場合の違いは何ですか? 遺産ですか？

Answer 1

NotificationsServiceここは何ですか？

それがfunctionである場合の違いは、2 番目のケースでは のすべてのインスタンスがNotificationsServiceを継承することpushです。

var instance = new NotificationsService();
instance.push(...);

最初のケースでは、単に拡張するだけNotificationsServiceで、それによって作成されたインスタンスには何の影響もありません:

var instance = new NotificationsService();
instance.push(...); // will throw an error
NotificationsService.push(); // will work

---

NotificationsServiceがobjectであり、 が存在し、 がオブジェクトであると仮定した場合NotificationsService.prototype、プロトタイプ チェーンとは何の関係もありません。関数を 2 つの異なる場所で定義するだけです。これはより簡単な例です:

var foo = {};
var foo.prototype = {};

// defines a method on foo
foo.push = function() {...};

// defines a method on foo.prototype
foo.prototype.push = function() {...};

ただし、これらの 2 つのプロパティは互いに関係がありません。

---

結論: どちらの場合も、異なるオブジェクトでメソッドを定義しているため、異なる方法で使用する必要があります。何をすべきかは、ユースケースによって異なります。

Answer 2

最初のケースは、宣言しているオブジェクトの現在のインスタンスのみに影響します

var NotificationsService=new WhateverService();
NotificationsService.push=function(notifications) { 
    console.log('Instance function',notifications) 
};
NotificationsService.push('hello')

インスタンス関数 Hello

2番目のケースは、親の「クラス」に適用する必要があります（ただし、jsにはクラスがありません）この場合、WhateverService

WhateverService.prototype.push=function(notifications) {
 console.log('Prototype function',notifications);   
}
var NotificationsService=new WhateverService();
NotificationsService.push('hello')

プロトタイプ関数 Hello

WhatseverService の 2 番目のインスタンスを宣言すると、親のプロトタイプにバインドされたすべてのメソッドが継承され、兄弟インスタンスに直接アタッチされたメソッドは継承されません。

Answer 3

私があなたに与えることができる最善のアドバイスは、これを読むことです.これには、私がこれまでに見たプロトタイピングの最良の説明の1つがあります.このためのプロトタイプが本当に必要でない限り、最初のものを使用することをお勧めします。

Answer 4

プロトタイプは、オブジェクトの拡張と同じです。

クラスAで使用する場合

var b = new A()
b.prototype.job = "Nothing"

var c = new B()

console.log(c.job); //Nothing

//すべての変数にはインスタンス A があり、A からの次のインスタンスには prop ジョブがあります

しかし、置くだけなら

b.job = "何も";

変数 C には prop "job" がありません

console.log(c.job); //undefined