제이스크립트 클래스 상속

클래스 상속

클래스 상속을 생성하려면 다음을 사용하십시오: extends 키워드。

클래스 상속을 통해 생성된 클래스는 다른 클래스의 모든 메서드를 상속받습니다:

인스턴스

이름이 "Model"인 클래스를 생성하되, "Car" 클래스의 메서드를 상속받습니다:

class Car {
  constructor(brand) {
    this.carname = brand;
  }
  present() {
    return '저는 ' + this.carname + '을 가지고 있습니다;
  }
}
class Model extends Car {}}
  constructor(brand, mod) {
    super(brand);
    this.model = mod;
  }
  show() {
    return this.present() + ', it is a ' + this.model;
  }
}
let myCar = new Model("Ford", "Mustang");
document.getElementById("demo").innerHTML = myCar.show();

개인적으로 시도해보세요

super() 메서드를 호출하여 부모 클래스를 참조합니다。

constructor 메서드에서 super() 메서드를 호출하면, 부모 클래스의 constructor 메서드를 호출하여 부모 클래스의 속성과 메서드에 접근 권한을 얻습니다。

상속은 코드 재사용성에 매우 유용합니다: 새로운 클래스를 생성할 때 기존 클래스의 속성과 메서드를 재사용합니다。

getter/setter

클래스는 또한 getter와 setter를 사용할 수 있습니다。

getter와 setter를 사용하여 속성을 사용하는 것은 매우 지혜롭습니다. 특히 값이 반환되거나 설정되기 전에 특별한 작업을 수행하고 싶을 때 더욱 그렇습니다。

클래스에 getter와 setter를 추가하려면 get 하고 set 키워드。

인스턴스

"carname" 속성에 getter와 setter를 생성하세요：

class Car {
  constructor(brand) {
    this.carname = brand;
  }
  get cnam() {
    return this.carname;
  }
  set cnam(x) {
    this.carname = x;
  }
}
let myCar = new Car("Ford");
document.getElementById("demo").innerHTML = myCar.cnam;

개인적으로 시도해보세요

주의사항:getter는 메서드라도, 속성 값을 가져오려고 할 때는 괄호를 사용하지 마세요。

getter/setter 메서드의 이름은 속성 이름과 같을 수 없습니다. 이 예제에서는 carname。

모든 프로그래머가 속성 이름 앞에 언더스코어 문자 _를 사용하여 getter/setter와 실제 속성을 구분합니다：

인스턴스

언더스코어 문자를 사용하여 getter/setter와 실제 속성을 구분할 수 있습니다：

class Car {
  constructor(brand) {
    this._carname = brand;
  }
  get carname() {
    return this._carname;
  }
  set carname(x) {
    this._carname = x;
  }
}
let myCar = new Car("Ford");
document.getElementById("demo").innerHTML = myCar.carname;

개인적으로 시도해보세요

셋터를 사용하려면, 괄호 없이 동일한 문법을 사용하세요：

인스턴스

사용자 정의어를 사용하여 자동차 이름을 "Volvo"로 변경하세요：

class Car {
  constructor(brand) {
    this._carname = brand;
  }
  get carname() {
    return this._carname;
  }
  set carname(x) {
    this._carname = x;
  }
}
let myCar = new Car("Ford");
myCar.carname = "Volvo";
document.getElementById("demo").innerHTML = myCar.carname;

개인적으로 시도해보세요

히스팅

함수 및 다른 JavaScript 선언과 달리, 클래스 선언은 힉스되지 않습니다.

이것은 다음과 같은 의미를 가집니다. 즉, 먼저 클래스를 선언한 후에 사용할 수 있습니다:

인스턴스

//아직 해당 클래스를 사용할 수 없습니다.
//myCar = new Car("Ford")
//이것은 오류를 발생시킬 것입니다.
class Car {
  constructor(brand) {
    this.carname = brand;
  }
}
//이제 해당 클래스를 사용할 수 있습니다:
let myCar = new Car("Ford")

개인적으로 시도해보세요

주의사항:기타 선언, 함수와 같은 경우, 선언 전에 사용하려고 시도할 때 오류가 발생하지 않습니다. 왜냐하면 JavaScript 선언의 기본 동작은 힉스(선언을 위로 이동)하기 때문입니다.