[JS] 클래스의 고급 기능

1. 상속

상속은 클래스의 선언 코드를 중복해서 작성하지 않도록 함으로써 코드의 생산 효율을 올리는 문법이다.

기본적인 형태는 다음과 같다.

class 클래스이름 extends 부모클래스 이름{}

상속은 상속이라는 이름처럼 어떤 클래스가 가지고 있는 유산 (속성과 메소드)를 다른 클래스에게 물려주는 형태로 사용한다.

이때 유산을 주는 클래스를 부모클래스, 유산을 받는 클래스를 자식 클래스 라고 부른다.

 

class shape {
  constructor(width, height, color) {
    this.width = width;
    this.height = height;
    this.color = color;
  }

  draw() {
    console.log(`drawing ${this.color} color of`);
  }

  getArea() {
    return this.width * this.height;
  }
}

const parent_class = new shape(10, 10, 'black');
console.log(parent_class.draw());     // drawing black color of
console.log(parent_class.getArea());  // 100

위의 코드는 앞으로 부모 클래스 역할을 할 클래스다.

• 처음 shape 클래스를 호출할 때 width, height, color를 받는다.
• draw( ) 함수는 호출됐을 때 `drawing ${this.color} color of` 를 출력합니다. 여기서 this.color는 클래스 호출할 때 입력받은 값이다.
• getArea( ) 함순느 호출됐을 때 width 값과 height 값을 곱해 반환한다.

이제 이 shape 클래스를 상속 받을 자식 클래스를 만든다.

 

class Rectangle extends shape {}

const rectangle = new Rectangle(20, 20, 'blue');
rectangle.draw();                   // drawing blue color of
console.log(rectangle.getArea());   // 400
console.log(rectangle.width);       // 20

이번에는 Rectangle 이라는 클래스를 선언하면서 extends로 부모 클래스(shape)를 상속 받는다. 자식 클래스(Rectangle)는 별도의 객체 선언이 없어도 부모로부터 상속받은 함수, 변수들을 그대로 사용할 수 있다.

---

2. private 속성

클래스의 사용자가 클래스 속송(또는 메소드)를 의도하지 않은 방향으로 사용하는 것을 막아 클래스의 안정성을 확보하기 위해 나온 문법이 private속성과 메소드 이다.

문법은 다음과 같다.

class 클래스이름 {

	#속성 이름
  	  #메소드 이름(){   
    
    }
 }

속성과 메소드 앞에 #을 붙이면 된다.

이처럼 #이 붙어있는 속성과 메소드는 모두 private 속성과 메소드가 된다.

주의할 것이 있다면 private속성은 사용하기 전에 미리 외부에 어떤 속성을 private속성으로 사용하겠다고 선언해줘야 한다는 것이다.

이렇게 만든 private속성은 클래스 외부에서는 접근할 수 없으므로 클래스 사용자가 클래스를 잘못 사용하는 문제를 줄일 수 있다.

class Hello {
  #message = 'hello'
}

const hello = new Hell()
hello.#message

Uncaught SyntaxError: Private field '#message' must be declared in an enclosing class

private 하기 때문에 접근 할 수 없다는 메시지가 뜬다.

---

3. 접근자 프로퍼티, 게터(Getter)와 세터(Setter)

위에서 보았던 private속성을 사용하면 외부에서는 private속성에 아예 접근할 수 없는 문제가 발생한다.

값을 조회하거나 속성을 변경하고싶어도 변경할수 없다.

그래서 프레임워크 개발자들은 상황에 따라서 속성을 읽고 쓸 수 있는 메소드를 만들어 제공한다.

•  get○○() 를 게터(getter)라고 부르며 속성값을 확인할때 사용한다.
•  set○○() 를 세터(Setter)라고 부르며 속성에 값을 지정할때 사용한다.

get키워드와 set키워드의 문법은 아래와 같다.

class 클래스 이름{
	get 이름 () {return 값}
  	  set 이름 (value) {}
    }

📌 함께 보면 좋은 사이트: https://inpa.tistory.com/entry/JS-%F0%9F%93%9A-getter-setter-%EB%9E%80

[JS] 📚 자바스크립트 Getter & Setter 개념 정리

---

4. static속성과 메소드

static속성과 메소드는 static을 정적이라는 한국어로 불러서 정적 속성, 정적 메소드라고 부른다.

class 클래스 이름{
	static 속성 = 값
    static 메소드(){
    }
}

 static 속성과 메소드는 인스턴스를 만들지 않고 사용할 수 있는 속성과 메소드 이다.

그냥 일반적인 변수와 함수처럼 사용할수 있다.

다음과 같이 클래스 이름 뒤에 점을 찍고 속성과 메소드를 사용한다.

클래스 이름.속성
클래스 이름.메소드()

---

5. 오버라이드

 

부모가 갖고 있는 함수를 자식에서 다시 선언해서 덮어쓰는 것을 오버라이드 라고 부른다.

오버라이드는 다음과 같은 경우에 주로 사용한다.

• 부모 클래스의 기능을 사용하지 않고 자식 클래스에서 구현한 기능을 사용하고 싶은 경우
• 부모 클래스의 기능을 자식 클래스에서 확장하고 싶은 경우

class User {
	method() {// ...}
}

class Me extends User {
	method() {// ...
    	// super.method()
    }
}

위와 같이 자식클래스에서 부모 클래스 메소드명을 사용하여 자식 클래스 인스턴스에서 호출하게 되면 자식 클래스의 메소드를 사용하게 된다.