[발표5회차] 클래스

01 자바스크립트의 클래스 개념

자바스크립트와 클래스

• 자바스크립트는 프로토타입 기반 언어로 '상속' 개념이 원래 존재하지 않음.
• ES6에서 클래스 문법이 추가되어 클래스와 유사한 기능을 구현 가능.
• 프로토타입을 활용해 클래스를 흉내내는 방식 이해 필요.

---

02 클래스와 인스턴스

클래스 (Class)

• 클래스는 객체의 구조와 동작을 정의한 설계도 역할.
• 클래스는 추상적 개념이며, 개체의 공통 속성을 정의함.

인스턴스 (Instance)

• 인스턴스는 클래스를 기반으로 생성된 구체적인 개체.
• 클래스의 속성을 모두 만족하는 구체적인 예시가 인스턴스.
  
  

  

  
  
  
  예시: 음식 → 과일 → 귤류
  • 음식: 과일의 슈퍼클래스, 귤류의 슈퍼 슈퍼클래스
  • 과일: 음식의 서브클래스, 귤류의 슈퍼클래스
  • 귤류: 과일의 서브클래스, 음식의 서브 서브클래스
• 인스턴스 예시: 귤류의 인스턴스는 감귤, 자몽, 천혜향 등.

 

---

03 프로토타입과 클래스

프로토타입 시스템

• 자바스크립트의 클래스는 실제로는 프로토타입을 활용.
• 프로토타입 체이닝을 통해 클래스의 메서드와 속성을 인스턴스에서 사용 가능.

프로토타입 메서드

• 프로토타입 객체에 정의된 메서드로, 인스턴스가 자신의 것처럼 호출할 수 있음.

스태틱 메서드

• 클래스 자체에서 호출되는 메서드로, 인스턴스에서 직접 접근 불가.

---

04 자바스크립트의 클래스 상속 구현

상속의 기본 개념

• 상속은 클래스 기반 언어에서 중요한 요소이며, 자바스크립트에서는 프로토타입 체이닝으로 흉내냄.
• 상속 구현 시, 클래스의 추상성을 유지하며 구체적 데이터를 지니지 않게 해야 함.

클래스 상속 문제

• 프로퍼티가 인스턴스 동작에 영향을 주는 문제.
• 상위 클래스 인스턴스를 하위 클래스의 프로토타입으로 설정할 때 주의점.

---

05 클래스 상속 구현 방법

1. SubClass.prototype에 SuperClass의 인스턴스를 할당 후 프로퍼티 삭제
   

   

   

   

   클래스가 구체적인 데이터를 지니지 않게 하는 가장 간단한 방법은모든 프로퍼티들을 지우고 새로운 프로퍼티를 더 이상 추가할 수 없게 하는 것이다. 위 예제를 보면 SubClass의 prototype 내용을 정리하고 freeze하도록 되어 있다. 
   
   
2. 빈 함수(Bridge)를 활용한 다리 역할:
   

   

   
   

   

   
   

   

   
   
   
   • SubClass에 SuperClass의 인스턴스를 할당하는 대신 빈 생성자 함수(Bridge)를 하나 더 만들고 그 prototype이 SuperClass의 prototype을 바라보게 한 다음 SubClass의 prototype에는 Bridge의 인스턴스를 할당했다. 빈 함수에 다리 역할을 부여한 것이다.
   • Bridge라는 빈 함수를 만들고, Bridge.prototype이 Rectangle.prototype을 참조하게 한 다음, Square.prototype에 new Bridge()로 할당하면, 그림 7-9의 우측 그림처럼 Rectangle 자리에 Bridge가 대체된다.
     
     

     

     

   •  위 예제를 범용성 있게 함수화한 코드이다. 즉시실행함수 내부에 Bridge를 선언해서 이를 클로저로 활용함으로써 메모리에 불필요한 함수 선언을 줄였다. subMethods에는 SubClass의 prototype에 담길 메서드들을 객체로 전달하게끔 했다.
3. Object.create 활용:
   
   

   

   • 앞서 소개한 방법들 모두 SubClass.prototype의 __proto__가 SuperClass.prototype을 참조하고, SubClass.prototype에는 불필요한 인스턴스 프로퍼티를 남가지 않는다는 면에서 동일하다.

---

06 클래스 상속 구현 시 주의 사항

Constructor 복구

• SubClass 인스턴스의 constructor가 SuperClass를 가리키는 문제 해결 필요.
• Bridge 활용 시, Bridge.prototype.constructor가 SuperClass를 바라보게 조정.

상위 클래스 접근

• 하위 클래스의 메서드에서 상위 클래스 메서드 호출 시 'super'를 흉내내는 기법 활용.

---

07 ES6의 클래스와 클래스 상속

ES5와 ES6 클래스 문법 차이

• 문법의 간결함: ES6에서는 class 키워드를 사용해 클래스를 정의하므로, 코드가 간결하고 직관적.
• 스태틱 메서드 정의: ES6에서는 static 키워드를 사용하여 클래스를 정의하는 것과 동일한 방식으로 스태틱 메서드를 쉽게 추가할 수 있음.
• 프로토타입 사용: ES5에서는 프로토타입을 통해 인스턴스 메서드를 추가해야 했지만, ES6에서는 클래스 내에서 직접 메서드를 정의할 수 있어 더 직관적.

ES6 클래스 상속

var Rectangle = class {
	constructor (width, height) {
		this.width = width;
		this.height = height;
	}
	getArea() {
		return this.width * this.height;
	}
};
var Square = class extends Rectangle {
	constructor (width) {
		super(width, whidth);
	}
	getArea() {
		console.log('size is :', super.getArea());
	}
};

• 클래스 상속 (extends): Square 클래스는 Rectangle 클래스를 상속받아, 직사각형의 속성과 메서드를 활용하면서, 정사각형의 특성을 추가한다.
• super 키워드: 부모 클래스의 생성자와 메서드를 호출할 때 사용되는데 super(width, width)로 부모 생성자를 호출하여 width와 height가 동일한 정사각형을 생성하고, super.getArea()로 부모의 메서드를 호출해 면적을 계산한다.
• 메서드 오버라이딩: Square에서 getArea()를 다시 정의하여 출력 형식을 다르게 처리한다.
  * 객체 지향 프로그래밍에서 상속받은 클래스(서브클래스)가 부모 클래스(슈퍼클래스)에 정의된 메서드를 재정의하여 사용하는 것을 의미
• 이 방식으로 코드의 재사용성과 유지보수성을 높여주며, 클래스 간의 관계를 명확하게 정의해준다.