[JavaScript_中級者への道] プロトタイプについて – [1] 概要

2. JavaScriptでは、すべてのオブジェクトがprototypeベースで作られている

さて、本題です。先ほどすべてのデータがオブジェクトであるという話をしましたが、

そのオブジェクトには `__proto__` というプロパティが設定されています。

ずらーとプロパティが並んでいますが、どこかで見たような名称ですね。

“test”.__proto__ には、文字列型のデータに対して普段利用しているメソッドが定義されています。

"test".__proto__.toUpperCase()

"test".__proto__.trim()

....

標準ビルトインオブジェクトのprototypeプロパティ

さらに、文字列型を生成する時に使う、String という オブジェクトにも、String.prototype というプロパティが用意されています。

• var test = "test" と文字列を変数に格納する時に、

• 裏では  var test = new String("test") というコードを実行しています。

• Stringは “” の糖衣構文であり、その他の型でも同様です。

• var arr = [] と var arr = new Array() は同義であり、

• var obj = {} と var obj = new Object() は同義です。

JavaScriptのリファレンスとして名高いMDNを見てみます。

String.prototype. のあとに文字列に対して利用できるメソッドが定義されていることがわかります。

オブジェクトは prototype を継承し生成される- プロトタイプチェーン -

先ほどの "test".__proto__ と同様のメソッドが格納されています。

試しに以下のコードを実行すると、true が返されます。

var test = new String("test");
console.log( test.__proto__ === String.prototype ) // tru

これがどういうことかというと、”test”という文字列は、暗黙の間に String.prototype というプロパティを継承し、生成されます。

これにより、文字列型ではすべての文字列で、”test”.trim() で空白を削除したり、”test”.toUpperCase()で大文字に変換することができるのです。

この、prototype というプロパティを継承することを プロトタイプチェーンと呼びます。

3. そして、オブジェクト指向へ…

JavaScriptでの class の実装は、このプロトタイプチェーンを利用して実装します。

次のドキュメントで実際の案件等を引き合いに出し解説します。

function A(a){
  this.varA = a;
}

// 上の A 関数の定義で示すように、A.prototype.varA は常に、
// this.varA によって隠されるのに、 varA を prototype に含む目的は何か？
A.prototype = {
  varA : null,
      // 我々は何もせず、プロトタイプから varA を叩き落とすべきではないのでしょうか？
      // 恐らく、最適化として隠れたクラスにスペースを割り当てることを意図したものです。
      // https://developers.google.com/speed/articles/optimizing-javascript#Initializing
      // もし varA がどのインスタンスでも独自に初期化されなかったとしても、インスタンスの変数は妥当となるでしょう。
  doSomething : function(){
    // ...
  }
};

function B(a, b){
  A.call(this, a);
  this.varB = b;
}
B.prototype = Object.create(A.prototype, {
  varB : {
    value: null, 
    enumerable: true, 
    configurable: true, 
    writable: true 
  },
  doSomething : { 
    value: function(){ // オーバーライド
      A.prototype.doSomething.apply(this, arguments); // call super
      // ...
    },
    enumerable: true,
    configurable: true, 
    writable: true
  }
});
B.prototype.constructor = B;

var b = new B();
b.doSomething();

豆知識 : クラスベースとプロトタイプベース

PHPやその他の言語ではclass Person のような形式でクラスが定義できます。(これをクラスベースと呼びます)。

それとは違い、以前からプロトタイプベース(オブジェクトを継承する)のプログラミング言語が存在しており、JavaScriptはそちらの仕様を採用しているだけです。

オブジェクト志向の考え方やクラスとしての利用方法は他の言語と同じような感覚で実装します。

クラスベースでオブジェクト指向を実装するか、プロトタイプベースでオブジェクト指向を実現するかの差です。https://ja.wikipedia.org/wiki/%E3%83%97%E3%83%AD%E3%83%88%E3%82%BF%E3%82%A4%E3%83%97%E3%83%99%E3%83%BC%E3%82%B9

4. まとめ

• JavaScriptではほぼすべてのデータがオブジェクトである
• 各オブジェクトの仕様では、デフォルトで.prototypeというプロパティがあり、その中でメソッドや.lengthなどのプロパティが定義されている
• データをオブジェクト化する時、.prototype プロパティが継承され、生成されたオブジェクトには__proto__というプロパティに引き継がれる
• 一連の流れをプロトタイプチェーンと呼ぶ

参考

https://qiita.com/howdy39/items/35729490b024ca295d6c

https://developer.mozilla.org/ja/docs/Web/JavaScript