あるオブジェクトのプロパティを上書きするときに、ドット演算子を使って上書きする方法とオブジェクトリテラルで上書きする方法では同様の結果が得られます。ですがprototypeの場合は訳が違うようです。具体的な例を示します。
オブジェクトリテラルとオブジェクトのプロパティの関係
下記の結果からオブジェクトリテラルによる上書きと、オブジェクトのプロパティへの上書きについては同じ動作をするものと思い込んでいました。
オブジェクトリテラルで定義したあとにプロパティに上書きをする
|
1 2 3 4 5 6 7 8 |
var hoge; hoge = { message: 'hello' } hoge.message = 'bye'; alert(hoge.message); // 「bye」と表示される |
プロパティで定義したあとにオブジェクトリテラルで上書きする
|
1 2 3 4 5 6 7 8 |
var hoge; hoge.message = 'hello'; hoge = { message: 'bye' } alert(hoge.message); // 「bye」と表示される |
prototype で同じ事をやってみると結果に違いが現れます。継承が絡んでくると変わってくるようです。
prototypeにオブジェクトリテラルを上書きした場合
|
1 2 3 4 5 6 7 8 9 10 11 12 |
var Animal = function(){}; Animal.prototype.kind = '哺乳類'; var dog = new Animal(); // Animalオブジェクトをdogオブジェクトに継承する alert(dog.kind); // 「哺乳類」と表示される // オブジェクトリテラルで上書きする Animal.prototype = { kind: '爬虫類' } alert(dog.kind); // 「哺乳類」と表示される。インスタンスには影響を及ぼしていない。 |
prototype のプロパティに上書きした場合
|
1 2 3 4 5 6 7 8 9 10 |
var Animal = function(){}; Animal.prototype.kind = '哺乳類'; var dog = new Animal(); // Animalオブジェクトをdogオブジェクトに継承する alert(dog.kind); // 「哺乳類」と表示される // プロパティに上書きする Animal.prototype.kind = '爬虫類'; alert(dog.kind); // 「爬虫類」と表示される。インスタンスに影響を及ぼしている。 |
「prototypeにオブジェクトリテラルを上書きした場合」は継承関係が絶たれる
prototypeにオブジェクトリテラルで上書きすると継承関係が絶たれるようです。そう判断したのは下記の結果からです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
var Animal = function(){}; Animal.prototype.kind = '哺乳類'; var dog = new Animal(); // Animalオブジェクトをdogオブジェクトに継承する alert(dog.kind); // 「哺乳類」と表示される // オブジェクトリテラルで上書きする Animal.prototype = { kind: '爬虫類' } alert(dog.kind); // 「哺乳類」と表示される。インスタンスには影響を及ぼしていない。 Animal.prototype.kind = '魚類'; alert(dog.kind); // 「哺乳類」と表示される。継承されていれば「魚類」と表示されるはず。 |