javascript でオブジェクトにメソッドを追加するには 2 つの方法があります。以下の方法の違いは何ですか?
1
var o = new Object();
o.method = function(){}
2
var o = new Object();
o.prototype.method = function(){}
javascript でオブジェクトにメソッドを追加するには 2 つの方法があります。以下の方法の違いは何ですか?
var o = new Object();
o.method = function(){}
var o = new Object();
o.prototype.method = function(){}
「プロトタイプ」はグローバルです。すべてのオブジェクトで使用できます。標準メソッドをオーバーライドまたは削除することもできます。
オブジェクトの新しいメソッドを定義している場合、そのローカルであり、オブジェクトのこのインスタンスでのみ使用されます
一方、プロトタイプスコープ内で定義すると、そのグローバルとメソッドはすべてのインスタンスに対して定義されます
プロトタイプについて、最初に理解しなければならないことがいくつかあります。ここに書いているのは大まかな概要です。プロトタイプがどのように機能するかについては他にもいくつかありますが、私はこれを単純にして基本にとどめようとしています.
このブログ投稿には、私が言っていることについての詳細がいくつかあります。
.prototype プロパティを持つのは関数だけです。インスタンスには .constructor プロパティがあります。あなたの例では、「o」はオブジェクトのインスタンスです。
すべてのコンストラクターは関数です。
使用しているブラウザーに応じて、インスタンスには次のようなプロトタイプ プロパティがあります。
.__proto__
これは、通常、関数の .prototype プロパティと考えられるものです。IE のほとんどの (すべて?) バージョンは、インスタンスに「_ _ proto _ _」(SO フォーマット用の余分なスペース) プロパティを提供しません。ECMA5 をサポートするブラウザーには、インスタンスのプロトタイプを返す getPrototypeOf() というメソッドがあります。
コンストラクターは関数であるため、.prototype プロパティがあります。したがって、o.constructor.prototype は、使いやすいクロスブラウザーの方法でプロトタイプにアクセスするための良い方法です。これは上書きされる可能性があるため、注意が必要です。詳細については、ブログ投稿を参照してください。
したがって、最初に行う必要があるのは、構文が実際に期待どおりに機能するようにコードを書き直すことです。この時点から、変数名を少し明確にするために変更しています。
var foo = new Object(); //a new instance of Object
foo.foo_method = function(){ console.log('foo'); } //add a function called 'foo_method' to our instance
var bar = new Object(); // a new instance of Object
bar.constructor.prototype.bar_method = function(){ console.log('bar'); } //add a function called 'bar_method' to the Object prototype
foo.foo_method(); //logs "foo"
foo.bar_method(); //logs "bar"
bar.bar_method(); //logs "bar"
try{
bar.foo_method();
}catch(err){
console.log(err); //Uncaught TypeError: Object #<Object> has no method 'foo_method' or "TypeError"
}
//Alternate way to add methods to prototypes. Only works in non-IE browsers.
bar.__proto__.woohoo_method = function(){ console.log('woohoo'); }
foo.woohoo_method(); //logs "woohoo"
bar.woohoo_method(); //logs "woohoo"