[TIL] CLASS


オブジェクト向けの言語を理解するのは難しいので、classをもっと丁寧に勉強し整理しました.

Constructor


classとobjectは文法が似ているが,classには構造関数法があるという違いがある.
class Dog {
  constructor(name) {
    this.name = name;
    this.behavior = 0;
  }
}
class nameは大文字で始まるのが慣例です
JSでは、Dogクラスの新しいインスタンスを作成するたびにコンストラクション関数()メソッドが呼び出されます.
コンストラクション関数()メソッドでは、クラスのインスタンスを表すキーワードが使用されます.
Dogクラスでthisを使用してDogインスタンスのname属性値をnameパラメータに設定します.

Instance


インスタンスは、クラス属性nameとmethodを含むが、一意の属性値を持つオブジェクトです.
class Dog {
  constructor(name) {
    this.name = name;
    this.behavior = 0;
  } 
}
 
const halley = new Dog('Halley'); // Create new Dog instance
console.log(halley.name); // Log the name value saved to halley
// Output: 'Halley'
  • halleyという新しい変数を作成し、newキーワードを使用してDogクラスの新しいインスタンスを作成します.
  • newキーワードはconstructor()メソッドを呼び出し、そのコードを実行し、新しいインスタンスを返します.
  • "Halley"をDogコンストラクタに渡し、nameプロパティを"Halley"
  • に設定します.
    次に、変数halleyのnameをコンソールで呼び出します.

    Method (getter, setter)


    classのgetter構文はobject getterと同じですが、メソッド間にカンマを付けません.
    class Dog {
      constructor(name) {
        this._name = name;
        this._behavior = 0;
      }
     
      get name() {
        return this._name;
      }
     
      get behavior() {
        return this._behavior;
      }
     
      incrementBehavior() {
        this._behavior++;
      }
    }
    
    const halley = new Dog('Halley');
    nameとbehaviorにgetterメソッドを追加しました.
    この場合、プロパティ名にfillを付けて、直接アクセスを防止します.
    次いで、incrementBehavior()メソッドが追加され、Dogインスタンスにおいて.incrementBehavior()が呼び出され、_behaviorプロパティにおいて1が追加される.
    新しい方法でDogインスタンスのデータにアクセスして操作します!
    上記の例では、Dogクラスを作成し、halleyという変数にインスタンスを作成します.
    インスタンスでメソッドとgetterを呼び出す方法は、オブジェクトで呼び出す方法と同じです.
    インスタンスに.を追加し、プロパティまたはメソッド名を追加し、メソッドの場合は()を同時に作成します.
    console.log(halley.behavior); // 0
    halley.incrementBehavior();
    console.log(halley.behavior) // 1
    let nikko = new Dog('Nikko'); // Create dog named Nikko
    nikko.incrementBehavior(); // Add 1 to nikko instance's behavior
    let bradford = new Dog('Bradford'); // Create dog name Bradford
    console.log(nikko.behavior); // Logs 1 to the console
    console.log(bradford.behavior); // Logs 0 to the console