2021年11月13日 JavaScript (JS Primer) prototypeオブジェクト

ビルトインメソッド

JavaScriptにおけるオブジェクトに自動的に実装されるメソッドです。

前の章で紹介されていたtoStringメソッドもそのうちのひとつで、すべてのオブジェクトがtoStringを持っています。

Objectはすべての元

Array、String、Functionなどのオブジェクトは、Objectを継承しています。
厳密に言うと、Objectのprototypeプロパティに定義されたprototypeオブジェクトを継承しています。
prototypeオブジェクトにtoStringやhasOwnPropertyなどの基本的なメソッドが定義されています。

オブジェクト

ObjectとObject.prototypeの関係と同じように、ビルトインオブジェクトArrayもArray.prototypeを持っています。
同じように、配列（Array）のインスタンスはArray.prototypeを継承します。
さらに、Array.prototypeはObject.prototypeを継承しているため、ArrayのインスタンスはObject.prototypeも継承しています。

Arrayのインスタンス → Array.prototype → Object.prototype

配列

ほとんどすべてのオブジェクトはObject.prototypeプロパティに定義されたprototypeオブジェクトを継承しています。

プロトタイプオブジェクト

// `Object.prototype`オブジェクトに`toString`メソッドの定義がある
console.log(typeof Object.prototype.toString); // => "function"
console.log(typeof Array.prototype); // => "Object"

toStringのようにprototypeオブジェクトに組み込まれているメソッドをプロトタイプメソッドと呼びます。

プロトタイプメソッドとインスタンスメソッドの優先順位

toStringなどのプロトタイプメソッドと全く同じメソッドをオブジェクトのインスタンスに定義した場合、定義したメソッドが優先して呼び出されます。

// オブジェクトのインスタンスにtoStringメソッドを定義
const customObject = {
    toString() {
        return "custom value";
    }
};
console.log(customObject.toString()); // => "custom value"

in演算子とObject#hasOwnPropertyメソッドの違い

これらは前回の章で同じ結果を返していましたが、厳密には違う挙動をするということが分かりました。
今回のプロトタイプオブジェクトを学んだ事で理解できる内容になっています。

• hasOwnProperty そのオブジェクト自身が指定したプロパティを持っているかを判定します。
• in演算子 オブジェクト自身が指定したプロパティを持っていなければ、そのオブジェクトの継承元であるprototypeオブジェクトまで探索して持っているかを判定します。

const obj = {};
console.log(obj.hasOwnProperty("toString")); // => false
console.log("toString" in obj); // => true

この説明でJSprimerの重要な箇所はこの一文かと思います。

in演算子はインスタンスに実装されたメソッドなのか、プロトタイプオブジェクトに実装されたメソッドなのかを区別しません。

ArrayもObjectを継承している

• ArrayもArray.prototypeを持っており、配列（Array）のインスタンスはArray.prototypeを継承します。
• Array.prototypeはObject.prototypeを継承しているため、ArrayのインスタンスはObject.prototypeも継承しています。

Object.prototypeはすべてのオブジェクトの親となるオブジェクトであるということをポイントとして覚えておきましょう！

参考

JavaScript Primer Objectはすべての元