[Day14] クラス part2

本記事は一人アドベントカレンダー企画の一つです。
30代未経験エンジニアが25日後にJavaScriptをマスターするカレンダー

JAVASCRIPT.INFOを元にJavaScriptを勉強していき、そこで学んだ知識をアウトプットしていきます。
２５日でJAVASCRIPT.INFOをやりきり、未経験エンジニアがJavaScriptをマスターする過程を投稿していきます。

9.５ 組み込みのクラスを拡張する

知らない単語

• ネイティブとは
  • 主にソフトウェアにおいて、あるCPUやオペレーティングシステムが本来サポートするインターフェイスを利用するもの

学んだこと

Array、Map などの組み込みのクラスも拡張可能である

例えば、下記は PowerArray がネイティブの Array を継承している

// 1つメソッドを追加している
class PowerArray extends Array {
  isEmpty() {
    return this.length === 0;
  }
}

let arr = new PowerArray(1, 2, 5, 10, 50);
alert(arr.isEmpty()); // false

let filteredArr = arr.filter((item) => item >= 10);
alert(filteredArr); // 10, 50
alert(filteredArr.isEmpty()); // false

ここで大事な事は、filter や map といった組み込みのメソッドは、継承された型である PowerArray と同じ型の新しいオブジェクトを返すので、内部の実装はオブジェクトの constructor プロパティを使用する事である

• 組み込みでは、静的の継承はありません

Object.keys, Array.isArray など、組み込みのオブジェクトは独自の静的メソッドを持っている
ただ、組み込みのクラスは例外で、お互いから静的なプロパティを継承しない

感想

この章で重要なのは、組み込みのクラスは例外で、静的なプロパティを継承しないという事。
Array や Date はObject を継承するので、メソッドを持つが、Array.[[Prototype]] は Object を参照しないので、静的メソッドは存在しないという事をしっかり覚えておく。

9.6 クラスのチェック: "instanceof"

知らない単語

• 無し

学んだこと

• instanceof 演算子

instanceof 演算子でオブジェクトが特定のクラスに属しているのかを確認することができる

obj instanceof Class

obj が Classに属している場合に true を返す
例えば

class Rabbit {}
let rabbit = new Rabbit();

// Rabbit クラスのオブジェクト？
alert( rabbit instanceof Rabbit ); // true

のように確認できる

• 主な型チェックメソッド

typeof:対象はプリミティブで返り値は文字列
{}.toString:対象はプリミティブ,組み込みオブジェクト,Symbol.toStringTag をもつオブジェクトで、返り値は文字列
instanceof:対象はオブジェクト、返り値はtrue/false

などがあり、特に「{}.toString」は高度な「typeof」とも言える

感想

今までのチェックメソッドは「typeof」しか使った事が無いので、「{}.toString」、「instanceof」の使い方も覚えておきたい。「{}.toString」に関しては「typeof」より高度なので、どのような場面で使うべきかしっかり理解したい。

9.7 ミックスイン

知らない単語

• ハンドラとは
  • コンピュータプログラムやその一部分で、何らかの処理要求が発生したときに起動されるものを指す

学んだこと

mixins(ミックスイン)
オブジェクト指向プログラミング言語において、サブクラスを継承して機能を提供し、独立して動作することを意図していないクラスの事である

• mixin の例

mixin を作る最もシンプルな方法は、役立つメソッドをもつオブジェクトを作ることで、簡単にどのクラスのプロトタイプにも合併できる

例えば、下記のmixinの例である

// mixin
let sayHiMixin = {
  sayHi() {
    alert("Hello " + this.name);
  },
  sayBye() {
    alert("Bye " + this.name);
  }
};

// 使い方
class User {
  constructor(name) {
    this.name = name;
  }
}

// メソッドをコピー
Object.assign(User.prototype, sayHiMixin);

// これで User は sayHi できる
new User("Dude").sayHi(); // Hi Dude!

これは単純なメソッドのコピーなので、User は他のクラスを拡張することができる

ミックスインで誤って既存のクラスメソッドを上書きすると、競合が発生するので、ミックスインの命名には注意する

感想

ミックスインは自身の内部で継承を活用することもできるという事や、何か重要なことが起こったときに、“イベントを生成するためのメソッドを提供するという役割もあるので、細かい所まで理解しておきたい。

最後に

クラスの役割や概念などがきちんと理解できていなければ、この先を理解するのも難しくなると思うので、完全に理解できるよう反復したいと思う。