VIDEO LESSON

JavaScriptのObject.getPrototypeOf()：値の継承元を調べて動作の理由を追うの解説動画

再生時間 7:04動画を別のタブで開く ↗

動画の字幕・文字起こしを読む

再生中の字幕を濃い黒で表示し、一番上に追従します。字幕の行を選ぶと、その位置から再生できます。

0:00こんにちは。
0:00今回はゲットプロトタイプオブを紹介します。
0:03これは、オブジェクトが直接つながっている継承元、つまりプロトタイプを取得するメソッドです。
0:10ジャバスクリプトでは、オブジェクト自身にプロパティがない場合、プロトタイプを順にたどって探します。
0:17書いた覚えのない値が読める理由は、この仕組みにあります。
0:21この動画では、書き方と引数、戻り値、共通設定を使った基本例、例外になる入力、
0:26そして戻り値を扱うときの注意点まで、実行結果と一緒に学びます。
0:32手元のオブジェクトの構造を調査する道具として使えるようになりましょう。
0:37プロトタイプチェーンという言葉も出てきますが、まずは直接の継承元を一段だけ見る、
0:40という感覚で十分です。
0:44まず動作環境を確認します。
0:46このメソッドはイーシーマスクリプト・ファイブで導入された標準機能です。
0:51エムディーエヌでは、二千十五年七月から主要ブラウザー間で広く利用できる機能とされています。
0:57現在のクローム、エッジ、ファイアーフォックス、サファリで利用できます。
1:02ノード・ジェイエスでも使えますが、この記事ではバージョン二十二以上を実行対象としています。
1:08これは対応の最小バージョンという意味ではありません。
1:12ドムや外部ライブラリーに依存しないため、ブラウザーとノードの両方で同じコードが動きます。
1:18実機でも関数として備わっていることを確認済みです。
1:21書き方を確認します。
1:23オブジェクトという名前の後にゲットプロトタイプオブと書き、カッコの中に調べたい対象を渡します。
1:30対象自身のメソッドとして呼ぶのではない点に注意してください。
1:35戻り値は、直接のプロトタイプであるオブジェクト、またはヌルです。
1:40継承関係の全体が配列で返るわけではなく、一度に取れるのは一段だけです。
1:45さらに先を調べたいときは、戻ってきたオブジェクトに対してもう一度呼び出します。
1:51ヌルまで到達したら、そこがチェーンの末端です。
1:55また、これは対象や継承元をコピーする処理ではなく、同期処理なのでアウェイトは不要です。
2:02記事の基本例を見ます。
2:04テーマがライト、ページサイズが二十という共通設定のオブジェクトを用意し、
2:09クリエイトでそれを継承元とする設定オブジェクトを作ります。
2:14設定オブジェクト自身にはオーナーというキーだけを追加します。
2:19ゲットプロトタイプオブで継承元を取得すると、共通設定そのものと一致し、トゥルーが返りました。
2:26自身が所有するキーはオーナーだけですが、テーマを読むとライトと返ります。
2:32これは継承元から読み取れている証拠です。
2:35実機でも記事の期待出力と一致しました。
2:38まず、直接の継承元が想定どおりかを確認するのが調査の第一歩です。
2:44基本例の続きです。
2:45設定オブジェクトのテーマにダークを代入すると、自身のプロパティが作られ、
2:49読み取りではその値が優先されます。
2:53一方、継承元のテーマはライトのまま変わりません。
2:57上書きは自身側に新しい値を作る動作だと分かります。
3:01次に、継承元に対してもう一度ゲットプロトタイプオブを呼ぶと、オブジェクト・プロトタイプが返ります。
3:09さらにその先を調べるとヌルになり、チェーンの末端であることが確認できました。
3:15実機でもすべて記事の期待出力と一致しています。
3:19一段ずつたどることで、値の出どころを順番に追えます。
3:23ほかの値でも試します。
3:24配列のプロトタイプはアレイ・プロトタイプと一致します。
3:28文字列を渡すと、通常はストリング・プロトタイプが返ります。
3:31数値でもナンバー・プロトタイプが返りました。
3:34イーシーマスクリプト二千十五以降では、文字列や数値などのプリミティブ値は、
3:38内部でオブジェクトに変換して扱われるためです。
3:41イーシーマスクリプト・ファイブ時代の扱いとは異なる点に注意してください。
3:46実機でも三つともトゥルーを確認しました。
3:49対象の種類ごとに、どのプロトタイプにつながっているかを見比べると、仕組みの理解が深まります。
3:54関数を渡した場合も、ファンクション・プロトタイプが継承元になります。
3:59継承元のないオブジェクトも見ます。
4:01クリエイトにヌルを渡して作ったオブジェクトは、辞書用途などで使われるもので、
4:05プロトタイプを持ちません。
4:09これにゲットプロトタイプオブを使うと、例外ではなくヌルが返ります。
4:14末端を表すヌルと、継承元そのものがない場合のヌルは、どちらも同じ戻り値です。
4:20実機でもヌルと一致することを確認しました。
4:24自分で生成経路を管理しているオブジェクトでは、辞書用オブジェクトが想定どおり継承元なしになっているかの確認に、
4:29このメソッドがそのまま使えます。
4:35失敗例を確認します。
4:36ヌルとアンディファインドはオブジェクトに変換できないため、このメソッドに渡すとタイプエラーになります。
4:43引数を省略した場合も、アンディファインドを渡したのと同じ扱いです。
4:48スライドの例では、ヌルとアンディファインドの両方で例外名のタイプエラーが表示され、
4:52記事の期待出力と一致しました。
4:56注意したいのは、正常な終端として返るヌルと、入力として渡して例外になるヌルは別物だという点です。
5:02チェーンを繰り返したどる処理では、ヌルを取得した時点でそれ以上呼び出さないよう、
5:06終了条件を設けてください。
5:10戻り値を扱うときの注意点です。
5:12取得した継承元は、元のオブジェクトへの参照そのものです。
5:16コピーではありません。
5:18そのため、継承元のテーマを書き換えると、共通設定そのもののテーマが変わってしまいます。
5:25複数の設定オブジェクトが同じ共通設定を継承している場合、その変更は、自身で上書きしていない読み取りすべてに影響します。
5:34調査のために取得したつもりが、アプリケーションの状態を変えてしまう事故につながりかねません。
5:41継承元は、比較やログ表示に使うのが扱いやすいでしょう。
5:45活用の場面と限界を整理します。
5:48このメソッドは、共通設定の参照先が想定どおりか、インスタンスが想定したプロトタイプにつながっているかなど、
5:54生成経路を自分で管理しているオブジェクトの調査に向いています。
6:00まず直接の継承元を取り、期待したオブジェクトと厳密等価で比較するのが基本の進め方です。
6:07一方で、この比較だけであらゆる入力の種類を確定するような使い方は避けてください。
6:13別のアイフレームで作られたオブジェクトではプロトタイプ自体が異なり、プロキシでは取得処理が例外になる場合もあります。
6:21取得が必ず成功すると決めつけないことが大切です。
6:25まとめです。
6:26ゲットプロトタイプオブは、オブジェクトの直接の継承元を一段だけ取得するメソッドです。
6:31ポイントは三つです。
6:33まず、戻り値はプロトタイプのオブジェクトかヌルで、先を調べるには繰り返し呼ぶこと。
6:38次に、文字列や数値は変換されて対応するプロトタイプが返りますが、ヌルとアンディファインドはタイプエラーになること。
6:46そして、戻り値は参照そのものなので、書き換えると共有元に影響することです。
6:51まずは記事の基本例と失敗例を実行し、結果を予測してから確かめてみてください。
6:56お疲れさまでした。
6:57値がどこから来たのかを自分の目で追えるようになると、クラスの設計を読むときにも役立ちます。

日本語字幕をダウンロード（WebVTT）

この動画で学べること

Object.getPrototypeOf()でオブジェクトの直接の継承元を調べる方法を解説。引数・戻り値、ブラウザーとNode.jsでの実行手順、期待出力、例外や参照共有の注意点を学べます。

解説記事・サンプルコードを読む：JavaScriptのObject.getPrototypeOf()：値の継承元を調べて動作の理由を追う →