フロントエンド学習記(仮題)

主にフロントエンドについて学習した事を記録・メモしていきます。

【学習ログ】MDN JavaScript チュートリアル (6 回目)

はじめに

この記事は、JavaScript チュートリアルの学習ログです。

学習したもの

MDN にある JavaScriptチュートリアルを学習しました。


MDN JavaScript コーナー

チュートリアル
  ┣ 完全な初心者向け
  ┃ ┣ JavaScript の第一歩
  ┃ ┣ JavaScript の構成要素
  ┃ ┃
  ┃ ┗ JavaScript オブジェクトの紹介
  ┃   ┣ オブジェクトの基本
  ┃   ┣ 初心者のためのオブジェクト指向 JavaScript
  ┃   ┣ オブジェクトプロトタイプ(本日の学習箇所)
  ┃   ┣ JavaScript の継承
  ┃   ┣ JSON データの操作
  ┃   ┣ オブジェクト構築の実践
  ┃   ┗ 評価:バウンスボールのデモへの機能の追加
  ┃
  ┣ 中級者向け
  ┗ 上級者向け


概要

チュートリアルで習った事の概要は下記の通りです。

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

JavaScript のオブジェクトのプロトタイプ、プロトタイプチェーンの動作方法、 prototype プロパティに新しいメソッドを追加する方法を学習。

ノート・メモ

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

  • JavaScript はよくプロトタイプベースの言語として記述されています。

  • 各オブジェクトにはプロトタイプオブジェクトがあり、メソッドとプロパティを 継承するテンプレートオブジェクトとして機能します。

  • プロトタイプチェーン

    • 「オブジェクトのプロトタイプオブジェクト」は「プロトタイプオブジェクト」を 持ち、そこからメソッドやプロパティを継承します。
  • 正確には、プロパティとメソッドはオブジェクトのインスタンスではなく、オブジェクト のコンストラクタ関数の prototype プロパティで定義されています。

  • JavaScript では、オブジェクトインスタンスとそのプロトタイプ (その __proto__ プロパティで、コンストラクタの prototype プロパティから派生しています) との間に リンクがあり、プロパティとメソッドはプロトタイプのチェーンを辿ることで見つけら れます。

  • prototype プロパティの値

    • 基本的にプロパティとメソッドを格納するためのバケットであり、プロトタイプ チェーンのさらに下にあるオブジェクトによって継承されることが期待される オブジェクトです。
  • Object.is()、Object.keys() および prototype バケット内で定義されていない他の メンバーは、Object.prototype から継承したオブジェクトインスタンスまたは オブジェクト型に継承されません。これらは、Object()コンストラクタ自体で使用 できるメソッド/プロパティです。

  • すべてのコンストラクタ関数には prototype プロパティがあり、その値は constructor プロパティを含むオブジェクトです。この constructor プロパティは、元のコンスト ラクタ関数を指し示します。

  • コンストラクタ関数の prototype プロパティで定義されたプロパティが、コンストラクタ を使用して作成されたすべてのインスタンスオブジェクトで使用できるようになります。

  • より多くのオブジェクト定義のためのかなり一般的なパターンは、コンストラクタ内の プロパティとプロトタイプのメソッドを定義することです。これにより、コンストラクタ にはプロパティ定義のみが含まれ、メソッドは別々のブロックに分割されるため、コード を読みやすくなります。

分かった事

  • コンストラクタ関数でプロパティやメソッドを定義すると、prototype プロパティに 定義される。

  • オブジェクト定義をする場合は、コンストラクタ関数にプロパティ(変数)を定義し、 プロトタイプにメソッド(関数)を定義するのが一般的(らしい)。

分からなかった事

  • プロトタイプについて、さっぱり分からなかったです。後日、チュートリアルを再学習 するか別途書籍を参照して、知識を補完したいと思います。

まとめ

転職活動等でまたもやブログ投稿の間隔が空いてしまいました。

今回のトピックは特に難しい内容で、へこたれそうでした。今は分からなくても将来理解 できるように学習を続けていきたいと思います。

最後までご覧頂きありがとうございました。