JavaScriptにおけるプロトタイプチェーンの動作確認

シングルページ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

こういった動作をすることを知っておくことが重要らしい（そりゃそうだ）。
確かに、この振る舞いは意図しない値の変更が生じそうで怖いです。