[JS]classの詳細

エリー課を見て整理した
Codesquad Master's Cocoaコースの3週目には、分類してtodo listを作成するタスクがあります.classだと分かっていますが、積極的に使ったことがないので、どのような基準でclassを区切るべきか、コンストラクション関数にどのような内容を入れたらよいか分かりません.MVCモードなどのデザインモードについて、私も初めて聞いたので、混乱した演出でした.ううう
この仕組みが頭で理解できないと、コードを書き始めることすらできないので、少し恥ずかしい思いをしたり、避けたいと思ったり…それも.勉強しているうちに以前見たエリーの動画を見直して、理解している部分を見つけたので、整理したいと思います.

呼び出しのたびにカウントを上にコミットするクラスを作成します。

class Counter {
  constructor() {
    this.counter = 0;
  }
  
  increase() {
    this.counter++;
    console.log(this.counter);
  }
}

const coolCounter = new Counter();
coolCounter.increase(); // 1
coolCounter.increase(); // 2
coolCounter.increase(); // 3

constructorでは、オブジェクトを作成しながら必要な値を入力すればよい.
そこでここではcounterが5の倍数のときに教える機能を加える.

class Counter {
  constructor() {
    this.counter = 0;
  }
  
  increase() {
    this.counter++;
    console.log(this.counter);
    if (this.counter % 5 === 0) { // 추가된 부분
      console.log('yo!');
    }
  }
}

const coolCounter = new Counter();
coolCounter.increase(); // 1
coolCounter.increase(); // 2
coolCounter.increase(); // 3
coolCounter.increase(); // 4
coolCounter.increase(); // 5 
						// yo!

Counterクラスのincreateというメソッドに直接追加します.ここに問題がある!counterクラス自体に属するため、ユーザーは調整できません.もしよ!他の内容を印刷したくない場合は?またはコンソール.ロゴではなくalertだったら?
むせび泣くでは、コールバック関数をインクリメンタルに渡しましょう.

class Counter {
  constructor() {
    this.counter = 0;
  }
  
  increase(runIf5Times) {
    this.counter++;
    console.log(this.counter);
    if (this.counter % 5 === 0) {
      runIf5Times();
    }
  }
}

const coolCounter = new Counter();
function printSomethig() {
  console.log('yo!');
}
coolCounter.increase(printSomethig); // 1
coolCounter.increase(printSomethig); // 2
coolCounter.increase(printSomethig); // 3
coolCounter.increase(printSomethig); // 4
coolCounter.increase(printSomethig); // 5 
									// yo!

の利点:調整可能.yo! でもね!簡単に変換したりalert関数を追加したりすることができます.
すなわち、Counterというクラスは、5倍になるごとにどのような操作が実行されるか分からない.
でもここには問題がありますインクリメンタル関数を呼び出すたびにコールバック関数が渡されるので面倒です.
したがって、通常はconstructorからコールバック関数を直接受け入れます!

class Counter {
  constructor(runEveryFiveTimes) {
    this.counter = 0;
    this.callback = runEveryFiveTimes;
  }
  
  increase() {
    this.counter++;
    console.log(this.counter);
    if (this.counter % 5 === 0) {
      this.callback();
    }
  }
}
function printSomethig() {
  console.log('yo!');
}

const coolCounter = new Counter(printSomethig); // 생성자에 콜백함수 전달

coolCounter.increase(); // 1
coolCounter.increase(); // 2
coolCounter.increase(); // 3
coolCounter.increase(); // 4
coolCounter.increase(); // 5 
						// yo!

オブジェクトの作成時にコールバック関数が渡されなかったらどうなりますか?
このように書くと、コンストラクション関数のnew Counter()がrunEveryFiveTimesになり、エラーが発生します.
このような事態を防止するためには、undefinedであるかどうかを確認する必要があり、undefinedでない場合にのみコールが必要である.

increase() {
    this.counter++;
    console.log(this.counter);
    if (this.counter % 5 === 0) {
      this.callback && this.callback(); // 이 조건을 추가해주면 된다.
    }
  }

&&演算子のプロパティ(前がtrueの場合、後がtrue)を使用して条件を追加します.参考までにundefinedと書くだけでもtrueです.false値以外のすべての値がtrueであるためです.

整理する

クラスで必要な機能が定義されている場合、ユーザは詳細な制御を行うことができず、再利用性を備えていない.

コールバック関数を使用してクラスを作成し、ユーザーは自分の好みに合わせてカスタマイズすることができます.

クラスで、異なる機能を実行するために異なるオブジェクトを作成できます.(再利用)

クラスを完全なものにするよりも、再組み立てのために必要な機能を持たせましょう.