JavaScriptの「ビルトイン」「インスタンス」「プロトタイプ」完全整理！
今回の目標
以下のオブジェクトとメソッドの違いについて完全に理解する。
<オブジェクト用語>
- ビルドインオブジェクト
- インスタンスオブジェクト
- prototypeオブジェクト
<メソッド用語>
- 静的メソッド
- ビルドインメソッド
- プロトタイプメソッド
参考書籍
オブジェクトの用語
ビルドインオブジェクト
ビルトインオブジェクトは、実行環境にあらかじめ定義されているオブジェクトのことです。
宣言なしに作成できるオブジェクト
以下がビルドインオブジェクトの一覧です。結構たくさんありますね。
| オブジェクト名 | 用途・概要 |
|---|---|
Object |
すべてのオブジェクトの基底クラス |
Function |
関数オブジェクトの基底 |
Array |
配列オブジェクト |
String |
文字列を扱う |
Number |
数値を扱う |
Boolean |
真偽値を扱う |
Symbol |
一意な識別子 |
BigInt |
大きな整数を扱う |
Math |
数学的関数や定数（インスタンス化不可） |
Date |
日付や時間を扱う |
RegExp |
正規表現を扱う |
Error |
エラーオブジェクト |
Promise |
非同期処理を扱う |
Map |
キーと値のコレクション（順序あり） |
Set |
重複しない値のコレクション |
WeakMap |
弱い参照のマップ（GCに優しい） |
WeakSet |
弱い参照のセット |
JSON |
JSONのパース・文字列化 |
Reflect |
オブジェクト操作のユーティリティ |
Proxy |
オブジェクトへの操作をフック |
Intl |
国際化（ロケール、日付・数値フォーマットなど） |
Atomics |
スレッド間の共有メモリ同期 |
WebAssembly |
WebAssembly API（低レベルの高速コード実行） |
インスタンスオブジェクト
インスタンスオブジェクトとは、クラス（関数やビルトインオブジェクト）から生成された具体的なオブジェクトのことです。new Object() はその一例です。{}` でも同じインスタンスになります。
const my_obj = new Object();
console.log(my_obj); //=> {}
しかし、new Objectでは初期値を設定できないので、オブジェクトリテラルを使った利点が多いです。
const my_obj = {
name: 'Taro',
age: 19
}
console.log(my_obj); //=>{name: 'Taro', age: 19}
prototypeオブジェクト
ビルトインオブジェクトにあったObject以外のほとんど全てのビルトインオブジェクトは、
Object.prototypeプロパティに定義されたprototypeオブジェクトを継承しています。 prototypeオブジェクトとは、すべてのオブジェクトの作成時に自動的に追加される特殊なオブジェクトです。 Objectのprototypeオブジェクトは、すべてのオブジェクトから利用できるメソッドなどを提供するベースオブジェクトとも言えます。
すべてのビルトインオブジェクト（Array や Date など）は、それぞれ XXX.prototype を継承チェーンに持ち、最終的には Object.prototype にたどり着きます。
const birthday = new Date("September 15, 1975 23:15:30");
const date_object = Object.getPrototypeOf(birthday); //→ Date.prototype
const parent_object = Object.getPrototypeOf(date_object); //→Object.prototype
console.log(parent_object === Object.prototype); //true
Dateオブジェクトが、Object.prototypeを継承していることがわかる。
違いをまとめた
| 用語 | 説明 | 例 | 備考 |
|---|---|---|---|
| ビルトインオブジェクト | JavaScript に最初から組み込まれている標準オブジェクト |
Object, Array, String, Math, Date, Promise など |
new でインスタンス化できるものも多い |
| インスタンスオブジェクト | クラスや関数から生成された具体的なオブジェクト（個体） |
const arr = [1, 2, 3] → arr は Array のインスタンス |
オブジェクトリテラル {} も Object のインスタンス |
| prototypeオブジェクト | オブジェクトが継承する親となるオブジェクトで、共有メソッドを持つ |
Array.prototype.map, Date.prototype.getFullYear など |
オブジェクト.__proto__ や Object.getPrototypeOf() で参照可能 |
メソッドの用語
静的メソッド
静的メソッド（スタティックメソッド)とは、インスタンスの元となるオブジェクトから呼び出せるメソッドのことです。
「インスタンスの元となるオブジェクト」とは、クラスのことを指し、そのクラスから呼び出せるメソッドのことのようです。
そもそもインスタンスとクラスとは？
| 用語 | 意味 | 例 |
|---|---|---|
| クラス | インスタンスを生成する設計図 | class Dog { constructor() { ... } } |
| インスタンス | クラスから生成された具体的なオブジェクト | const dog = new Dog("Pochi") |
メソッド例
| 静的メソッド名 | 用途・概要 |
|---|---|
Object.keys |
オブジェクトのプロパティ名の配列を返す |
Object.values |
オブジェクトの値の配列を返す |
Object.entries |
オブジェクトのプロパティ名と値の配列の配列を返す |
Object.assign |
あるオブジェクトを別のオブジェクトに代入 |
Object.hasOwn |
対象のオブジェクトが指定したプロパティの存在確認 |
プロトタイプメソッド
prototypeオブジェクトに組み込まれているメソッドはプロトタイプメソッドと呼ばれます。
| オブジェクト | インスタンス例 | プロトタイプメソッド例1 | プロトタイプメソッド例2 |
|---|---|---|---|
| Object | const obj = { a: 1 }; |
obj.hasOwnProperty("a") |
obj.toString() |
| Array | const arr = [1, 2, 3]; |
arr.map(x => x * 2) |
arr.includes(2) |
| String | const str = "hello"; |
str.toUpperCase() |
str.includes("ell") |
| Number | const num = 42; |
num.toFixed(2) |
num.toString() |
| Boolean | const flag = true; |
flag.toString() |
flag.valueOf() |
| Function | function f() {} |
f.bind(null) |
f.call(null) |
| Date | const d = new Date(); |
d.getFullYear() |
d.toLocaleDateString() |
| RegExp | const re = /abc/; |
re.test("abc") |
re.exec("abc") |
| Error | const e = new Error(); |
e.toString() |
e.name (getter from prototype) |
ビルドインメソッド
最初からオブジェクトに自動的に実装されているメソッド。
ややこしい…。どうやらビルドインメソッドは、静的メソッドとプロトタイプメソッドの両方を含む、JavaScript に最初から組み込まれている標準メソッドの総称のことをいうみたい。
メソッドの違いをまとめてみた
| 種類 | 説明 | 呼び出し方 | 例 | 対象 |
|---|---|---|---|---|
| 静的メソッド | クラス（コンストラクタ）自身に定義され、インスタンスでは使えない | クラス名.メソッド名 | Array.isArray([1, 2, 3]) |
クラス |
| プロトタイプメソッド | prototypeに定義され、インスタンスから使える | インスタンス.メソッド名 | [1, 2, 3].map(x => x * 2) |
インスタンス |
| ビルトインメソッド | JavaScript に最初から組み込まれている標準メソッド（静的・プロト型含む） | 両方（static/prototype 両方） |
Math.max(1, 3)"abc".toUpperCase()
|
標準オブジェクト |
Discussion