[코어 자바스크립트] 클래스

자바스크립트는 프로토타입 기반 언어이기에 '상속' 개념이 존재하지 않는다

그러나 클래스의 동작 방식을 흉내내는 여러 기법이 탄생했고, ES6에서는  (프로토타입을 기반으로 구현한) 클래스가 등장했다.

---

클래스는 일종의 공통 집합의 개념으로 이해하면 된다. 

다만 현실세계에서는 이미 실존하는 것들의 공통 성질로 집합을 만든다면, 

프로그래밍 언어에서는 클래스를 먼저 정의하고 그로부터 파생되는 개체(인스턴스)를 생성할 수 있다. 

 

생성자 함수 Array 를  new와 함께 호출하여 생성한 인스턴스는 체이닝에 의해 생성자 함수의 prototype 프로퍼티를 참조한다.

생성자 함수를 일종의 클래스라고 하면, Array 의 prototype 객체 내부의 요소들이 인스턴스에 상속된다고 볼 수도 있다.

(엄밀히는 아니지만 결과적으로는 동일하게 동작) 

Array 내부의 프로퍼티 중 prototype 프로퍼티를 제외한 나머지는 상속되지 않는다

=> 인스턴스에 상속되는지 (참조하는지) 여부에 따라 static member / instance member(method)로 구분된다.

 

프로토타입 메서드(prototype method) 
다른 클래스 기반 언어와 달리 자바스크립트는 인스턴스에서도 메서드를 정의할 수 있기때문에 인스턴스 메서드 라는 명칭이 프로토타입에 정의한 메서드인지 인스턴스에 정의한 메서드를 지칭하는것인지 혼란이 야기되므로 프로토타입 메서드 라는 명칭을 주로 사용한다. 

// 생성자
var Rectangle = funtion(width, height){
	this.width = width;
    this.height = height;
}

// (프로토타입) 메서드
Rectangle.prototype.getArea = function (){
	return this.width * this.height;
}

// 스태틱 메서드
Rectangle.isRectangle = function (instance) {
	return instance instanceof Retangle &&
    	instance.width > 0 && instance.height > 0;
}

var rect1 = new Rectangle(3,4);
console.log(rect1.getArea()); // 12
console.log(rect1.isRectangle(rect)); // ❌
console.log(Rectangle.isRectangle(rect)); // true

 

프로토타입 객체에 할당한 메서드는 인스턴스가 마치 자신의 것처럼 호출할 수 있다.

console.log(rect1.getArea()); // 12

// 인스턴스는 마치 자신의 메서드인것처럼 호출 가능
// 실제로는 아래와 같이 접근한 것
console.log(rect1.__proto__.getArea());

__proto__ 를 생략하고 호출하여 this = rect1 이 된다. 
프로토타입 메서드는 인스턴스에서 바로 호출할 수 있다.

console.log(rect1.isRectangle(rect)); // ❌
rect1 인스턴스에서 isRectangle 메서드에 접근하려고 함
rect1에 있는지 검사 (x)
rect1.__proto__ 에 있는지 검사 (x)
rect1.__proto__.__proto__ (= Object.prototype) 에 있는지 검사 (x) 
=> rect1.undefined 를 실행할 수 없음 Error


인스턴스에서 직접 실행할 수 없는 메서드 = 스태틱 메서드

생성자 함수를 this 로 하여 호출해야함
 console.log(Rectangle.isRectangle(rect1))

---

이어서 클래스 상속을 흉내내기 위한 방법 세가지를 소개하는데 조금 어려워서 우선 skip.. 

---

ES6 에 도입된 클래스 문법 

constructor

static 

super

 

MDN

Classes - JavaScript | MDN

Inpa님 블로그

📚 자바스크립트 클래스 문법 - 완벽 가이드

---

7장 클래스 내용이 너무 어려웠다면 두어달 정도 지난 뒤에 이 책의 내용을 처음부터 학습해보라는 저자의 말이 인상적이다.

자바스크립트의 '코어' 를 넓고 얕게나마 이해하게 되었다면 이 책을 다시 읽었을때 깊게 이해할수 있게 될까?