Class
자바스크립트 공부하면서 어렵게 느끼던 파트 중 하나가 class 였기 때문에, 제대로 개념을 잡아보고 싶었다.
객체를 만들때 예전에는 생성자 함수를 사용했지만 지금은 class를 사용한다.
- class는 객체를 생성할 수 있는 템플릿 이라고 생각하면 편하다.
- class를 사용해 객체지향 프로그래밍이 가능하다.
class 기본 문법
- constructor는 인스턴스를 생성하고 초기화하기 위한 특수한 메서드다.
- display와 같은 method는 constructor 밖에서 생성해야한다.
- function 키워드를 사용하면 문법 오류가 발생.
- new 연산자와 함께 class를 호출하면 클래스는 인스턴스를 생성한다. (Dk)
class Student {
constructor(name, age) {
this.name = name;
this.age = age;
}
display = () => {
console.log(`${this.name}, ${this.age}`);
};
}
const dk = new Student('dk', 15) // 인스턴스static
class 내에서 속성, 메소드에 static 메소드를 사용하게되면 class 레벨이 된다.
class 레벨의 속성, 메소드가 되면 인스턴스를 통해 접근할 수 없고, 꼭 부모 class를 통해 접근해야한다.
반대로 아무것도 붙지 않은 속성은 인스턴스 레벨이기 때문에 꼭 인스턴스를 통해 접근해야한다.
static을 붙인 메소드와 속성은 만들어진 인스턴스에 나타나지 않는다.
class Fruit {
static MAX_FRUITS = 4; // filed에서 static을 사용해준다.
constructor(name, price) {
this.name = name;
this.price = price;
}
// 클래스 레벨의 메서드
static makeRandomFruit() {
// 클래스 레벨의 메서드에서는 this를 참조할 수 없음. (아무것도 채워지지 않은 템플릿 상태이기 때문)
return new Fruit('banana', 500);
}
// 만들어진 인스턴스의 속성들과 밀접하게 관련된 메소드는 인스턴스 레벨의 메소드로 만드는게 좋다.
display = () => {
console.log(`${this.name}, ${this.price}`);
};
}
const banana = Fruit.makeRandomFruit();
console.log(banana)// Fruit { display: [Function: display], name: 'banana', price: 500 }
console.log(Fruit.MAX_FRUITS); // output 4private filed(#)
'#' 프리픽스를 통해 속성이나 메소드를 캡슐화, 은닉화를 할 수있다.
한번 만들어진 속성값을 외부에서 변경할수 없게 하고싶을 때 유용하게 사용할 수 있다.
private 속성과 메소드는 상속이 되지 않고, 속성에 접근 할 수 없고, 메소드 호출이 불가능하다.
getter, setter
class Student {
constructor(firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
this.fullName = `${this.lastName} ${this.firstName}`;
// 이런식으로 하면 fullName은 인스턴스 생성 시 초기값으로 지정됨
// firstName, lastName을 바꿔도 fullName은 갱신이 되지 않음.
}
const student = new Student('대근', '한')
console.log(student.fullName) // '한 대근'
student.firstName = '동동'
console.log(student.fullName) // '한 동동'Student.fullName을 속성으로 만들게 되면, firstName, lastName을 바꿔도 fullName은 갱신이 되지 않음.
class Student {
constructor(firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
}
get fullName() { //화살표 함수는 안됨.
return `${this.lastName} ${this.firstName}`;
}
set fullName(value) { //
console.log(`set ${value}`);
}
}
const student = new Student('대근', '한')
student.firstName = "하이";
console.log(student.fullName) // '한 하이'
student.fullName = '한예슬' // 'set 한예슬'
- getter
데이터 속성의 값을 읽는 접근자 함수 - setter
데이터 속성의 값을 저장할 때 사용하는 접근자 함수
extends (상속)
extends를 통해 부모 class의 속성, 메소드를 물려받는다.
super를 호출하면 부모 class의 constructor를 호출한다.
super를 참조하면 부모 class의 method를
class Animal { // 부모 class
constructor(color) {
this.color = color;
}
eat() {
console.log("먹자");
}
sleep() {
console.log("잔다");
}
}
class Dog extends Animal {
constructor(color, ownerName) {
super(color); // 부모 class에 있는 constructor(생성자)를 받아오는 코드.
this.ownerName = ownerName;
}
eat() {
super.eat(); // 부모 class의 eat 메소드 기능을 그대로 가져옴
console.log("강아지가 먹어");
// 부모 class에 eat이 있지만 자식 class에서 선언하면 덮어쓰기가 된다. overriding
}
play() { // 이후에 작성되는 코드는 추가적인 기능 (method)
console.log("놀자~!");
}
}