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

はじめに

学習したもの

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

概要

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

JavaScript の継承

JavaScript でどのように継承ができるようになっているかを学習。

ノート・メモ

JavaScript の継承

call関数
- この関数は基本的にその他の場所 (ただし現在のコンテキスト) で定義された関数から呼ぶことができます。
引数なしのコンストラクタからの継承
- もし継承したコンストラクタがパラメータからプロパティの値を取得しない場合、 call() の呼び出しで追加の引数を指定する必要はありません。
プロトタイプとコンストラクタの参照への設定方法
- 下記のように記述する事で、プロトタイプを継承する事が出来ます。

// 継承元のコンストラクタ関数
function Example1(first, last, age, gender) {
  // プロパティ定義
};
Example1.prototype.bio = function() {
  // メソッド定義
};

// 新しく作るコンストラクタ関数
function Example2(first, last, age, gender, interests) {
  Example1.call(this, first, last, age, gender, interests);
  
  this.interests = interests;
};
// プロトタイプを継承する
Example2.prototype = Object.create(Example1.prototype);
Example2.prototype.constructor = Example2;

// オブジェクトインスタンス
var example1 = new Example2('John', 'Doe', 29, 'male', ['music', 'movie']);

上記の方法が唯一のクラスを継承する方法では無く、ECMAScript 2015 ではクラス構文で、継承を行うことが出来ます。
class での定義例

// 新しいクラスの作成。このブロック内でクラスの全機能を定義する。
class Example {
  // コンストラクタ関数の定義
  constructor(firstName, lastName, age, gender, interests) {
    // プロパティの定義を記載
  }

  // クラスメソッドの定義
  greeting() {
    // メソッドの定義を記載
  };
}

new演算子を使用してオブジェクトインスタンスをインスタンス化できます。

let example1 = new Example('引数を入れる');
example1.greeting();

サブクラスの作成（クラスの継承）

class Example2 extends Example {
  constractor() {
    // 親クラスのコンストラクタを呼び出し、そこに定義されている限り、指定した
    // メンバーをsuper() のパラメータとして継承
    super('引数を記載');
    // プロパティの定義等を記載
  }
}

サブクラスのオブジェクトをインスタンス化するときには、サブクラスと親クラスの両方で定義されたメソッドとプロパティを呼び出せます。
Getter と Setter
- getter と setter はペアで動作します。getter は変数の現在の値を返し、対応する setter は変数の値をひとつの値に変更します。

分かった事

オブジェクトについて
オブジェクト指向プログラミングの基本
プロトタイプとプロトタイプを使った継承
コンストラクタとオブジェクトインスタンスの生成
クラス構文とクラスを使った継承

分からなかった事

上記についてたぶん分かっているはずですが、現状あまり自信はないです。

まとめ

どんどん難しくなってきていて、理解が追い付かないときがありますがあきらめず学習しつづけます！！

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

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

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

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

はじめに

学習したもの

概要

JavaScript の継承

ノート・メモ

分かった事

分からなかった事

まとめ