1.클래스와 인스턴스의 개념 이해
음식, 과일은 모두 집단 즉 클래스이다.
음식은 과일보다 상위의 개념이고, 과일은 음식보다 하위의 개념이다.
여기서 앞의 super-,sub-를 접복해서 상위클래스, 하위클래스로 표현한다.
그렇다면 과일 분류 하위에 또 다른 분류가 있을 경우 클래스간의 관계는 어떻게 될까?
음식은 과일의 superclass 이다.
과일은 음식의 subclass 이면서 귤류의 superclass이다.
귤류는 과일의 subclass이다.
하위 개념은 상위 개념을 포함하면서 더 구체적인 개념이 추가된다.
클래스는 하위로 갈수록 상위 클래스의 속성을 상속하면서 더 구체적인 요건이 추가 또는 변경된다.
물론 하위클래스가 아무리 구체화되더라도 이들은 결국 추상적인 개념일 뿐이다.
어떤 클래스의 속성을 지니는 실존하는 개체를 일컬어 인스턴스라고 한다.
어떤 클래스에 속한 개체는 그 클래스의 조건을 모두 만족하므로 그 클래스의 구체적인 예시, 즉 인스턴스가 될 것이다.
하나의 개체가 같은 레벨에 있는 서로 다른 여러 클래스의 인스턴스일 수 있다.
컴퓨터는 사용자가 직접 여러가지 클래스를 정의해야 하며, 클래스를 바탕으로 인스턴스를 만들 때 비로소
어떤 개체가 클래스의 속성을 지니게 된다.
또한 한 인스턴스는 하나의 클래스만을 바탕으로 만들어진다.
어떤 인스턴스가 다양한 클래스에 속할 수 는 있지만 이 클래스들은 모두 인스턴스 입장에서는 '직계존속'이다.
다중상속을 지원하는 언어이든 그렇지 않은 언어이든 결국 인스턴스를 생성할 때 호출할 수 있는 클래스는 오직 하나뿐일 수 밖에 없기 때문이다.
자바스크립트의 클래스
생성자 함수 Array를 new 연산자와 함께 호출하면 인스턴스가 생성된다.
이때 Array를 일종의 클래스 라고 하면, Array의 prototype 객체 내부 요소들이 인스턴스에 상속된다고 볼 수 있다.
한편 Array 내부 프로퍼티들 중 prototype 프로퍼티를 제외한 나머지는 인스턴스에 상속되지 않는다.
인스턴스에 상속되는지 여부에 따라 스태틱 멤버와 인스턴스 멤버로 나뉜다.
예제를 통해 클래스 관점에서 바라본 프로토타입 시스템을 좀 더 살펴보자.
var Rectangle = function (width, height) {
this.width = width;
this.height = height;
};
Rectangle.prototype.getArea = funtion () {
return this.width * this.height;
};
Rectangle.isRectangle - function (instance) {
return instance instanceof Rectangle &&
instance.width > 0 && instance.height > 0;
};
var rect1 = new Rectangle(3,40
console.log(rect1.getArea());
console.log(rect1.isRectangle(rect1));
console.log(Rectangle.isRectangle(rect1));
12번째 줄에서 Rectangle 함수를 new 연산자와 함께 호출해서 생성된 인스턴스를 rect1에 할당했다.
이 인스턴스에는 width, height 프로퍼티에 각각 3,4의 값이 할당돼있다.
프로토타입 객체에 할당한 메서드는 인스턴스가 마치 자신의 것처럼 호출할 수 있다고 했으니
13번째 줄에서 호출한 getArea는 실제로는 rect1._proto__.getArea에 접근하는데, 이때 __proto__를 생략했으므로
this가 rect1인 채로 실행될 테니까 결과로는 rect1.width*rect1.height의 계산값이 반환될 것이다.
이처럼 인스턴스에서 직접 호출할 수 있는 메서드가 바로 프로토타입 메서드이다.
14번째 줄은 rect1 인스턴스에서 isRectangle이라는 메서드에 접근하고자 한다.
우선 rect1에 해당 메서드가 있는지 검색했는데 없고, rect1.__proto__에도 없으며, rect1.__proto__.__proto__(=Object.prototype)에도 없다. 결국 undefined를 실행하라는 명령어이기 때문에 에러가 발생한다.
이렇게 인스턴스에서 직접 접근할 수 없는 메소드를 스태틱 메서드라고 한다.
스태틱 메서드는 15번째 줄처럼 생성자 함수를 this로 해야만 호출할 수 있다.
클래스 상속
7-3-1 기본 구현
var Grade = function () {
var args = Array.prototype.slice.call(arguments);
for (var i = 0; i < args.length; i++) {
this[i] = args[i] = args[i];
}
this.legth = args.length;
};
Grade.prototype = [];
var g = new Grade(100, 80);
ES5까지의 자바스크립트에는 클래스가 없다.
자바스크립트에서 클래스 상속을 구현했다는 것은 결국 프로토타입 체이닝을 잘 연결한 것으로 이해하면 된다.
