diff --git "a/7_\355\201\264\353\236\230\354\212\244/\352\271\200\355\212\271\355\235\254.md" "b/7_\355\201\264\353\236\230\354\212\244/\352\271\200\355\212\271\355\235\254.md" new file mode 100644 index 0000000..c37195c --- /dev/null +++ "b/7_\355\201\264\353\236\230\354\212\244/\352\271\200\355\212\271\355\235\254.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; +```