LoginSignup
4
2

More than 5 years have passed since last update.

javascriptのプロトタイプオブジェクトについて

Last updated at Posted at 2017-08-06

Javascriptのプロトタイプオブジェクトについて調べてみた。

※ご指摘により、色々勘違いしていることがわかりました。
近々きちんと修正したいと思います。

プロトタイプとは?

まず、javascriptはプロトタイプベースオブジェクト指向言語です
プロトタイプベースオブジェクト指向言語とは、どのオブジェクトもクラスという雛形に属しているクラスベースオブジェクト指向(javaとかrubyとか)とは異なり、オブジェクトは別のオブジェクトをベース(プロトタイプ)にして独自の特徴を追加していく方式の言語のことです。

プロトタイプとはこの方式の中のベースになるオブジェクトのことを言います。

まずオブジェクトを作っていきます(ES6)

class Animal {
  constructor(name, type) {
    this._name = name;
    this._type = type;
  }
}

const cat = new Animal("cat", "mammals");

javascriptのclassは単なる関数のシンタックスシュガーなので
ここでクラスanimalは関数オブジェクトです

次の行
const cat = new Animal("cat", "mammals");
でプロパティprotoにAnimalのプロトタイプオブジェクトを継承します。
console.log(cat.prototype)でcatのprototypeを参照できます
確認して見てください。

暗黙の参照

上で作成したオブジェクトについてもう少し考えてみます

プロトタイプベースオブジェクト指向の言語ではオブジェクトは別のオブジェクトをベース(プロトタイプ)に出来ていると考えます。
それを実現するためにjavascriptでは暗黙の参照という形で実現しています。

例えば次のようなコードがあったとしましょう

class Animal {
  constructor() {
  }
}

Animal.prototype.hoge = "hoge";

const cat = new Animal("cat", "mammals");
console.log(cat.hoge); //"hoge"

このコードではオブジェクトAnimalをプロトタイプとしたcatというオブジェクトが作られています。
catはhogeと言うプロパティを持っていませんが、hogeと出力さます。

これはjavascriptが暗黙の参照を行い、Animalのプロトタイプオブジェクトを暗黙的に参照しているのです。
consoleへの出力は
hoge
となります。

prototypeチェーン

通常、オブジェクトのプロパティにメソッドが見つからない場合、そのプロトタイプを探します(暗黙の参照)。
それでも見つからない場合はそのプロトタイプのプロトタイプを参照します。
最終的に一番上のプロトタイプからも見つからなかった場合はエラーを返します。
連鎖となって暗黙の参照をするのでプロトタイプチェインと呼ばれています。

例以下のコードを考えます

class Animal {
  constructor() {
    this.zoo = [];
  }

  addAnimals(animal) {
    this.zoo.push(animal);
  }
}

class Cat extends Animal {
  constructor() {
    super();
  }

  sayCat() {
    console.log("う=!にゃー!うー!にゃー!");
  }
}

const cat = new Cat();
cat.addAnimals("チョコ");
console.log(cat.zoo);

まず、AnimalとCatというクラスが作られており、
extendsによってCatはAnimalを継承しています。

まとめ

javascriptはあるオブジェクトをベースにして新しくオブジェクトを作る方式のオブジェクト指向言語である。
プロトタイプとはこのベースとなるオブジェクトのことである。
javascriptのオブジェクトは暗黙にプロトタイプのオブジェクトのプロパティを参照することがある。

参考 http://codezine.jp/article/detail/222

4
2
2

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
2