[TIL 22][JS] Class

概要

以前書いたクラスに関する文章を補足します...だから今日はもっと授業を勉強して、それから内容を補充したいと思っていますが、授業に関する文章は書いていません.驚きました.だから、最初から授業の内容を復習して、書いてみました.

class?

クラスは、オブジェクト向けプログラミング(OOP)で特定のオブジェクトを生成するために変数とメソッドを宣言する方法です.クラスがjavascriptに現れる前に、既存の文章prototypeにメソッドを割り当てたことがあります.Prototypeにメソッドを宣言する方法もありますが、ES 6に出てくるクラスを利用して、OOPに詳しい開発者がアクセスしやすくなります.

こうぞう

class Person {
  constructor(name){
    this.name = name;
  }
  sayHi(){
    alert(this.name);
  }
}

let user = new User("jay");
user.sayHi() // 경고창과 함께 "jay"가 나타남

上記のようにclassにはconductor()とカスタムメソッドがあります.以上のように、new User("jay")を呼び出すと、オブジェクトが生成され、構造関数が自動的に実行され、"jay"にthis.nameが割り当てられる.

constructor

コンストラクション関数は、インスタンスを作成し、クラスフィールドを初期化する方法です.クラスには1つしかありません.2つ以上ある場合はSyntaxErrorが発生します.
constructorは省略することができ、省略すると"jay"はクラスに含まれる操作と同じである.

getter, setter

getter

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

const foo = new Foo([1, 2]);
// 필드 firstElem에 접근하면 getter가 호출된다.
console.log(foo.firstElem); // 1

getterは、クラスフィールドにアクセスするたびにクラスフィールドの値を操作する必要がある場合に使用します.constructor(){}キーワードを使用します.getterは、いくつかのコンテンツを取得するために使用されるため、いくつかのコンテンツを再び返す必要があります.

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

クラスフィールドに値を割り当てるたびに、setterはフィールド値を操作する必要があるときに使用されます.getキーワードを使用します.setterは呼び出しではなく割り当て値として使用され、割り当て時にメソッドが呼び出されます.

static

class Foo {
  constructor(prop) {
    this.prop = prop;
  }
  static staticMethod() {
    return 'staticMethod';
  }
  prototypeMethod() {
    return this.prop;
  }
}

console.log(Foo.staticMethod()); // 'staticMethod'

const foo = new Foo(123);
console.log(foo.staticMethod()); // Uncaught TypeError: foo.staticMethod is not a function

クラスの静的メソッドを定義するときにstaticキーワードを使用します.静的メソッドは、クラスインスタンスではなくクラス名を呼び出します.したがって、クラスインスタンスを作成する必要はありません.上記のようにインスタンスコールでエラーが発生します!

extends, super

class Vehicle {
  constructor() {
    this.passengers = [];
    console.log('Vehicle Created');
  }
  addPassenger(p) {
    this.passengers.push(p);
    console.log('Passenger Added');
  }
}

class Car extends Vehicle {
  constructor() {
    super(); // Vehicle 클래스의 constructor를 호출 함
    console.log('Car created');
  }
  deployAirbags() {
    console.log('BOOM!');
  }
}

const car1 = new Car();
car1.addPassenger('sunny');
car1.deployAirbags();
console.log(car1);

extendsは、親を継承するサブクラスを定義します.
superは、親を参照するか、親を呼び出すコンストラクション関数に使用します.