- 클래스 : 어떤 사물들의 공통 속성을 모아 정의한 것, 인스턴스들의 공통 속성을 모은 추상적인 개념
- 인스턴스 : 어떤 클래스의 속성을 지니는 실존하는 개체, 구체적인 대상들을 의미함
- 현실세계에서의 클래스는 추상적인 개념이지만
- 프로그래밍 언어에서의 클래스는 사용하기에 따라 추상적인 대상일 수도 있고, 구체적인 개체가 될 수도 있다.
상위 클래스, 하위 클래스 예시)
Array() 예시)
- Array 메서드 전체를 class이고, 클래스를 통해 생성한 객체 1,2,3은 인스턴스이다.
- 자바스크립트는 프로토타입 기반 언어이고, 인스턴스에 상속되는지(인스턴스가 참조하는지) 여부에 따라 스태틱 멤버, 인스턴스 멤버로 나뉜다.
- 스태틱 멤버(static member) : 클래스(생성자 함수)에 직접 정의한 메서드, 인스턴스가 직접 호출할 수 없고, 클래스(생성자 함수)에 의해서만 호출함
- 생성자 함수를 this로 해야만 호출 가능!
- 인스턴스 멤버(instancee member) : 자바스크립트에서는 인스턴스에서도 직접 메서드 정의 가능
- 프로토타입 메서드 : 클래스의 prototype 내부에 정의된 메서드
- 프로토타입 메서드들은 인스턴스가 마치 자신의 것처럼 호출할 수 있다.
스태틱 메서드, 프로토타입 메서드 예)
var Rectangle = function (width, height){
this.width = width;
this.height = height;
}; // 생성자
Rectangle.prototype.getArea = function (){
return this.width * this.heigth;
}; // (프로토타입) 메서드
Rectangle.isRectangle = function (instance){
return instance instanceof Rectangle && instance.width > 0 && instance.height > 0;
}; // 스태틱 메서드
ⓐ var rect1 = new Rectangle(3, 4)
ⓑ console.log(rect1.getArea()); // 12 (o) (프로토타입 메서드)
ⓒ console.log(rect1.isRectangle(rect1)); // Error (x)
ⓓ console.log(Rectangle.isRectangle(rect1)); // true
-
ⓐ에서 Rectangle 함수를 new 연산자와 함께 호출해서 생성된 인스턴스를 rect1에 할당했다. 이 인스턴스에는 width, height 프로퍼티에 각각 3,4의 값이 할당된다.
-
ⓑ에서 호출한 getArea()는 실제로 rect1.proto.getArea에 접근하는데 이때 __proto__를 생략하여 this가 rect1인 채로 실행된다.
- 결과로는 rect1.width * rect1.height의 계산값이 반환 된다.
- 이처럼 인스턴스에서 직접 호출할 수 있는 메서드가 프로토타입 메서드이다.
-
ⓒ에서 rect1 인스턴스에서 isRectangle이라는 메서드에 접근하고자 한다. 그러면 우선 rect1에 해당 메서드가 있는지 찾고 없다면, rect1.__proto__에 찾아보고 없으며, rect1.proto.__proto__에도 찾아본다.
- 셋다 없다면 결국 “Uncaught TypeError:s not a function” 에러가 발생함
- 이렇게 인스턴스에서 직접 접근할 수 없는 메서드를 스태딕 메서드라고 한다.
정재남, 코어 자바스크립트