シングルページWebアプリケーション――Node.js、MongoDBを活用したJavaScript SPAの学習メモです。
プロトタイプチェーンの説明がわかりやすく、面白かったのでまとめました。
__proto__ プロパティを使ってプロトタイプチェーンを手動でさかのぼる
次のサンプルを見てみましょう。
var proto = {
sentence : 4,
probation : 2
};
var makePrisoner = function( name, id ) {
var prisoner = Object.create( proto );
prisoner.name = name;
prisoner.id = id;
return prisoner;
};
var firstPrisoner = makePrisoner( 'joe', '12A' );
console.log( firstPrisoner );
// { name: 'joe', id: '12A' }
console.log( firstPrisoner.__proto__ );
// { sentence: 4, probation: 2 }
console.log( firstPrisoner.__proto__.__proto__);
// {}
console.log( firstPrisoner.__proto__.__proto__.__proto__ );
// null
console.log( firstPrisoner.__proto__.__proto__.__proto__.__proto__ );
// TypeError: Cannot read property '__proto__' of null
さかのぼった時の挙動がわかりやすく確認できました。chromeのデベロッパーツールを使うと、より視覚的に構造がわかると思います。
プロトタイプの上書きと属性の削除
var proto = {
sentence : 4,
probation : 2
};
var makePrisoner = function( name, id ) {
var prisoner = Object.create( proto );
prisoner.name = name;
prisoner.id = id;
return prisoner;
};
var firstPrisoner = makePrisoner( 'joe', '12A' );
console.log( firstPrisoner.sentence );
console.log( firstPrisoner.__proto__.sentence );
// どちらも4
firstPrisoner.sentence = 10;
console.log( firstPrisoner.sentence );
console.log( firstPrisoner.__proto__.sentence );
// 10
// 4
delete firstPrisoner.sentence;
console.log( firstPrisoner.sentence );
console.log( firstPrisoner.__proto__.sentence );
// どちらも 4
delete firstPrisoner.__proto__.sentence;
console.log( firstPrisoner.sentence );
console.log( firstPrisoner.__proto__.sentence );
// どちらも undefined
いい感じにさかのぼっていっているのが確認できました。
プロトタイプの変更
var proto = {
sentence : 4,
probation : 2
};
var makePrisoner = function( name, id ) {
var prisoner = Object.create( proto );
prisoner.name = name;
prisoner.id = id;
return prisoner;
};
var firstPrisoner = makePrisoner( 'joe', '12A' );
var secondPrisoner = makePrisoner( 'sam', '2BC' );
proto.sentence = 5;
console.log( firstPrisoner.sentence );
console.log( secondPrisoner.sentence );
// どちらも 5
firstPrisoner.sentence = 4;
console.log( firstPrisoner.sentence );
console.log( secondPrisoner.sentence );
// 4
// 5
こういった動作をすることを知っておくことが重要らしい(そりゃそうだ)。
確かに、この振る舞いは意図しない値の変更が生じそうで怖いです。