김특희 7장

7_클래스/김특희.md

@@ -0,0 +1,71 @@
+## 클래스와 인스턴스
+
+클래스와 인스턴스는 쉽게 말하면 과일과 사과와의 관계라 볼 수 있다.
+클래스는 상위 범주에 있는 개념을 의미하고, 인스턴스는 해당 개념의 하위 범주에 있는 개체들을 의미한다.
+
+과일에는 여러 종류들이 있다.
+사과, 오렌지, 키위, 메론, 수박 등등의 여러 과일들이 존재한다.
+
+객체지향 프로그래밍에서 상위범주에 해당하는 개념인 과일을 '클래스'라고 볼 수 있다.
+그리고 사과, 오렌지와 같은 개별적인 하위범주의 개체들을 '인스턴스'라고 볼 수 있다.
+
+객체지향 프로그래밍에서는 클래스를 정의하고, 해당 클래스의 규격에 맞는 '인스턴스'라는 객체들을 생성할 수 있다. 마치 붕어빵틀에 밀가루를 부어 똑같은 붕어빵들을 생성하는 것과 같다.
+
+## ES5와 클래스
+
+ES6 이상의 자바스크립트는 클래스라는 개념이 생겼지만, ES5의 자바스크립트까지는 클래스라는 개념이 존재하지 않았다. 따라서 클래스를 직접 구현할 수 없었다고 볼 수 있다. 하지만 프로토타입으로 클래스의 개념을 유사하게 구현하여, 클래스의 개념을 사용할 수 있었다.
+
+### 프로토타입 참조와 상속
+
+자바스크립트에서 생성자 함수를 new 연산자로 호출하면 인스턴스가 생성된다. 그리고 인스턴스는 프로토타입 체이닝을 통해 생성자 함수의 프로토타입 객체 내부의 프로퍼티를 참조하게 된다. 바로 이러한 참조가 '상속'이라는 개념과 매우 유사하다.
+
+### 스태틱 멤버 & 인스턴스 멤버
+
+인스턴스에 상속되는지 안되는지에 따라 스태틱 멤버와 인스턴스 멤버가 나뉜다.
+인스턴스에 상속되는 프로퍼티들을 인스턴스 멤버라 하고,
+그렇지 않은 경우를 스태틱 멤버라고 한다.
+
+### 프로토타입 메서드
+
+이는 프로토타입 기반의 자바스크립트에서도 마찬가지다.
+하지만 자바스크립트에서 생성된 인스턴스에서는 메서드를 직접 정의할 수 있다.
+그렇기 때문에 인스턴스 메서드라는 표현이 참조가능한 프로토타입 내의 메서드를 말하는지,
+인스턴스가 정의한 메서드를 의미하는지 헷갈릴 여지가 있다.
+그렇기에, 인스턴스 메서드 대신 프로토타입 메서드라는 용어가 더 많이 사용된다.
+
+### ES5 유사 클래스 구현 & 프로토타입 메서드
+
+앞서 설명했듯이 ES5에서는 클래스라는 개념이 없다. 그러나 프로토타입 기반으로 해당 개념을 유사하게 구현할 수 있으며, 아래는 클래스의 기능을 유사하게 구현한 예시다.
+
+```js
+
+var Rect = function ( width, height) {
+	this.width = width;
+  	this.height = height;
+}
+
+Rect.prototype.getArea = function() {
+	return this.width * this.height;
+} // 프로토타입 메서드
+
+Rect.isRect = function (instance) {
+	return instance intanceof Rect &&
+      instance.width > 0 && instance.height > 0;
+} // 스태틱 메서드
+
+var rect1 = new Rect(3,4);
+console.log(rect1.getArea()); // 12
+console.log(rect1.isRect(rect1)); // error
+// 스태틱 메서드에 접근할 수 없음을 보여준다.
+
+```
+
+위의 예시에서 프로토타입 메서드를 인스턴스가 호출하고 있음이 보여진다.
+그러나 마지막 줄에서의 스태틱 메서드는 인스턴스가 참조할 수 없어 에러가 발생한다.
+스태틱 메서드는 생성자 함수의 프로토타입에 포함되어 있지 않기 때문이다.
+
+따라서 스태틱 메서드를 호출하기 위해서는 다음 예시와 같이 해당 메서드의 this가 생성자함수를 가리켜야 된다. 즉 스태틱 메서드는 생성자 함수 그 자체에 의해서만 호출될 수 있다는 것이라 볼 수 있다.
+
+```js
+console.log(Rect.isRect(rect1)); // true;
+```