prototype を知ることで MDN が読みやすくなった話

はじめに

株式会社Relicでフロントエンジニアとして働いてる、えーきといいます。
今年から仕事でjavaScriptを書き始め、まだまだ勉強中の新米エンジニアです。

突然ですが、javaScriptのメソッドを調べると、だいたいMDNが検索上位に表示されるかと思います。
map()メソッドやsplit()メソッドをMDNで見てみると、

• Array.prototype.map()
• String.prototype.split()

の様な書き方がされています。

この記事では、***.prototypeってどこから現れたの？という疑問に対して調査した記事になります。
同じ様な疑問を感じられた方がいらっしゃれば、お時間のある時に読んでもらえたら嬉しいです。

結論

最初に ***.prototype の正体について下記のコードを用いて説明します。

hoge.js

const arr = []
console.log(typeof arr) //object
console.log(arr instanceof Array)  //true
console.log(arr.__proto__ === Array.prototype)  //true

以上のコードから分かる様に、
arr はグローバルオブジェクトで定義されている Array オブジェクトのインスタンスであり、 arrオブジェクトの継承元はArrayオブジェクトのプロトタイプオブジェクトを参照しているから
だと理解しました。(Array.prototypeにmapメソッドは定義されている)

次章からは理解するまでに調査した__proto__,prototypeなどについて紹介していきます。

__proto__ について

MDNでは以下の様に記載されています。

proto は Object.prototype のアクセサープロパティ (ゲッター関数およびセッター関数) で、アクセスされるオブジェクトの内部の [[Prototype]] (オブジェクトまたは null のどちらか) を暴露します。

javaScriptで実装している時に、[[Prototype]]を意識することは、ほとんどないかと思います。
確認したい場合は検証ツールで arr の [[Prototype]] を確認することができます。

この [[Prototype]] の中身が見たい場合に__proto__プロパティを使用して確認することができます。
[[Prototype]]には、インスタンス(arr)の継承元となる(Arrayオブジェクト)のprototypeプロパティへの参照を格納しています。

stringやnumberといったプリミティブはオブジェクトではないため、自動でプリミティブからオブジェクトへの変換をしてくれています。
この変換をboxingといいます。詳しくはこちらを参照してください。

prototype について

__proto__と同じく、MDNでprototype について見てみます。

オブジェクトは prototype オブジェクト を持つことができます。これはテンプレートオブジェクトとして機能し、そこからメソッドやプロパティを継承します。

こちらの文章から分かる様に prototype は他のオブジェクトの機能を継承することできます。

今回だとarrは、Arrayオブジェクトのprototypeを継承していると言えます。
ではArray.prototypeは何を継承しているのでしょうか？
検証ツールで確認してみると、

Objectのprototypeを継承していました。 Object.prototypeの継承元はnullでしたので終点の様です。

Objectについて

ここまでの継承関係を図で表すと以下の様になります。

このArrayとObjectは Standard built-in objectsと呼ばれjavaScriptの標準仕様として規定されているオブジェクトです。
特にObjectはプリミティブ型やオブジェクトの継承元となっているだけでなく、DOMの継承元にもなっています。

図より、Objectから脈々とメソッドが受け渡されていることがわかりました。
またarrではArray.prototypeで定義されているメソッドだけでなく、さらに継承元であるObject.prototypeで定義されているメソッドも参照することができます。
このような参照したオブジェクトに該当のメソッドがない場合に、__proto__が参照するprototypeへ探しに行くことをプロトタイプチェーンと言います。
気になった方はこちらの記事を参照してください。

最後に

初めてjavaScriptの仕組みに目を向け調査をしてみました。
まだまだ知識不足ではありますが、こういったことを理解することで少しずつ頼られるエンジニアになれるのではと思いました。

この記事を書くにあたって一緒に調査してくださった方や助言をしてくださった方、本当にありがとうございました。
これからも体調を崩さない程度に頑張っていきます！

参考記事