반응형
클래스
ES6 이전의 자바스크립트에는 공식적으로 클래스가 없었습니다. 타입은 함수로 정의하고 그 함수 객체에 있는 프로토타입을 사용해 메서드를 정의했습니다.
function Vacation(destination, length){
this.destination = destination;
this.length = length;
}
Vacation.prototype.print = function(){
console.log(this.destination+" "+this.length+"일");
}
var daegu = new Vacation("대구",5);
daegu.print() // 대구 5일
객체지향 프로그래밍을 학습해온 개발자에겐 이런 방식이 생소합니다.
ES6 부터는 클래스 선언이 추가되었습니다. 함수는 객체이며 상속은 프로토타입을 통해 처리됩니다.
class Vacation {
constructor(destination, length){
this.destination = destination;
this.length = length;
}
print() {
console.log(`${this.destination} ${this.length}일`);
}
}
var daegu = new Vacation("대구",5);
daegu.print() // 대구 5
클래스를 정의하고 나면 새로운 객체를 생성하기 위해 원하는만큼 new 를 호출할 수 있고 클래스를 확장할 수도 있습니다. 기존의 클래스를 확장한 새로운 클래스는 상위 클래스의 모든 프로퍼티와 메서드를 상속받습니다. 이렇게 상속한 프로퍼티나 메서드를 하위 클래스 선언 안에서 변경할 수 있습니다.
Vacation 을 여러 가지의 타입을 정의하기 위한 추상 클래스로 사용할 수도 있습니다.
예를 들어, Expedition 은 Vacation 클래스를 확장해 장비를 표현하는 프로퍼티를 더 가집니다.
class Expedition extends Vacation {
constructor(destination, length, gear) {
super(destination, length);
this.gear = gear;
}
print() {
super.print();
console.log(`${this.gear} 를 가져오세요`);
}
}
const trip = new Expedetion("대구", 3, "차");
trip.print();
//대구 3
//차 를 가져오세요
반응형
'Study > JavaScript' 카테고리의 다른 글
JavaScript ) 간단한 click Counter 만들어보기 (0) | 2022.03.16 |
---|---|
JS ) 함수를 생성하는 방법 (0) | 2022.03.13 |
JS ) Sort() 정렬에서 CompareFunction 의 필요성 (0) | 2022.02.28 |
JavaScript ) fetch vs axios (0) | 2022.01.29 |
ES6 ) 비구조화 할당 (0) | 2022.01.28 |
댓글