4
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Posted at

シングルページ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のデベロッパーツールを使うと、より視覚的に構造がわかると思います。

スクリーンショット 2016-01-06 18.51.21.png

プロトタイプの上書きと属性の削除

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

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

4
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?