[TIL]Javascript Classes

その間、클래스형 컴포넌트を使用して複数のプロジェクトを行いました.
会議のように、クラス要素はこのように生成され、それを受け入れたと思います.
この機会にJavaScriptでClassの概念をまとめます.🔥

Class

クラスは、オブジェクトを作成するためのテンプレートです.
クラスは、データとデータを処理するコードを抽象化します.
(from MDN)

class PersonClass {
  constructor(name, age, gender){
    this.name = name;
    this.age = age;
    this.gender = gender;
  }
  
  getInfo(){
    return this.name + this.age + this.gender
  }
}
//인스턴스 생성
const Person1 = new PersonClass("Jun",27,"Male")

Person1.getInfo() //'Jun27Male'

オブジェクトは、作成が容易な템플릿または틀と見なすことができる.

クラス属性

ここでは、PersonClassの前のnewキーワードが必要です.
これはclassのconstructorを呼び出すためです.
1 Class => 1 Constructor
2.コンストラクション関数をクラスに追加しないと、デフォルトの空のコンストラクション関数が自動的に追加されます.
3. Hoisting

const Person1 = new PersonClass() // ReferenceError

class PersonClass() //선언부

関数宣言では、Hostingが発生し、自動的に参照になります.
クラス宣言ではHolistは発生しないため、上記の結果が表示されます.
4.静的方法
静的メソッドはプロトタイプではなく、クラス自体の関数です.
前に静的キーを宣言

class PersonClass {
  constructor(name, age, gender){
    this.name = name;
    this.age = age;
    this.gender = gender;
  }
  
  getInfo(){
    return this.name + this.age + this.gender
  }
  
  static getGender(v) {
    return v.gender
  }
}

const Person1 = new PersonClass("Jun",27,"Male")

PersonClass.getGender(Person1)

ここで注意したいのは、PersonClassです.getGenderクラスのインスタンスは呼び出せません.
クラスが作成されないインスタンスを呼び出します.
5.Getters/Setters
Getter

class Foo {
  constructor(arr=[]){
    this._arr = arr;
  }
  
  get firstElem(){
    
    return this._arr.length ? this._arr[0] : null;
  }
}

const foo = new Foo([1,2]);

console.log(foo.firstElem) // 1

Setter

class Foo {
  constructor(arr=[]){
    this._arr = arr;
  }
  
  get firstElem(){
    
    return this._arr.length ? this._arr[0] : null;
  }
  
  set firstElem(elem){
    this._arr = [elem, ...this._arr];
  }
}

const foo = new Foo([1,2]);
foo.firstElem = 100

console.log(foo.firstElem) // 100

6.クラス継承
クラス継承は、キーワードextendsを使用して実行することができる.
クラス継承により、コードの再利用性が向上します.

class PersonClass {
  constructor(name, age, gender){
    this.name = name;
    this.age = age;
    this.gender = gender;
  }
  
  getInfo(){
    return this.name + this.age + this.gender
  }
}
// 클래스 상속
class SubPersonClass extends PersonClass{
  getInfo(){
    return this.name + this.age + this.gender + " this is child class"
  }
}

const Person1 = new SubPersonClass("Jun",27,"Male")

Person1.getInfo(); // Jun27Male this is child class

Child Classでは、Parent Classに宣言された関数を直接読み込む必要がある場合があります.
その時、使っていたキーワードはsuperでした.

class PersonClass {
  constructor(name, age, gender){
    this.name = name;
    this.age = age;
    this.gender = gender;
  }
  
  getInfo(){
    return this.name + this.age + this.gender
  }
}

class SubPersonClass extends PersonClass{
  getInfo(){
    return super.getInfo() + " plus subclass"
  }
}

const Person1 = new SubPersonClass("Jun",27,"Male")

Person1.getInfo(); /// Jun27Male plus subclass