9장 클래스, 생성자, 프로토타입

9장 클래스 생성자 프로토 타입에 대한 공부내용 정리

 자바스크립트에서는 모조 클래스(pseudoclass)를 정의할 수 있다. 모조 클래스는 프로토타입 객체나 생성자 함수를 사용하여 구현할 수 있다.

1. 생성자

: new 연산자 뒤에는 항상 함수 호출이 따라와야 한다.

  생성자는 새로운 객체를 초기화하고, 객체에 있는 프로퍼티 중에서 사용되기 전에 미리 값이 

  할당되어야 하는 프로퍼티들의 초기값을 할당한다.

  생성자는 객체들의 클래스를 정의하기 때문에 생성자가 만들게 될 객체들의 클래스를 분명히 

  표현할 수 있게 이름 짓는 것이 좋다.  

cf)  var a = new A(10);

var b = A(10); 

  -> 이 둘의 차이점은 ? 아래 변수 b는 window객체에 포함된다.

ex) function Rectangle(w, h) {

this.width = w;

this.height = h;

this.area = function() { return this.width * this.height; }

}

var r = new Rectangle(8.5, 11);

var a = r.area();

2. 프로토타입과 상속

: 한 클래스에 속하는 객체들이 공유하게끔 만들어진 메서드에, 

  일반적인 프로퍼티를 사용하는 것은 비효율적이다.

  자바스크립트의 객체는 프로토타입이라고 불리는 또 다른 객체를 내부적으로 참조할 수 있다. 

  객체는 프로토타입의 프로퍼티들을 자신의 프로퍼티로 가져온다.

  자바스크립트의 객체는 자신의 프로토타입에 있는 프로퍼티들을 상속받는다.

  

  모든 함수에는 prototype이라는 프로퍼티가 있다. 이것은 함수가 정의될 때부터 자동적으로 생성되고 초기화 된다.

 프로토타입 객체에 추가한 프로퍼티들은 생성자를 사용하여 초기화되는 모든 객체의 프로퍼티로 나타난다.

 cf) 생성자 함수는 각 인스턴스의 프로퍼티가 다른 값이 되도록 초기화 시킨다.

      프로토타입 객체는 각 인스턴스드링 공유해야 하는 프로퍼티나 메서드를 정의한다.

 생성자는 객체들의 클래스를 위한 이름을 정하고, width나 height와 같이 인스턴스마다 다를 수 있는 프로퍼티의 값을 초기화 시킨다.

 프로토타입 객체는 생성자와 연결되며, 이 생성자를 통해 생성되는 객체들은 프로토타입이 가진 프로퍼티들을 똑같이 상속받는다. 

 즉, 프로토타입 객체가 메서드나 상수 같은 프로퍼티들을 위치시키기에 좋은 곳임을 의미함.

- 프로토타입 객체를 사용하면 각 객체가 프로토타입의 프로퍼티를 상속받기 때문에 이들을 필요로 하는 메모리의 양을 줄일 수 있다.

- 프로토타입에 새로운 프로퍼티가 추가되면, 이미 생성되었던 객체일지라도 추가된 프로퍼티를 그대로 상속받는다. ( 기존의 클래스에 새로운 메서드를 추가할 수 있다는 것을 말함 )

- object.hasOwnProperty() 메서드를 사용해 이들을 종류별로 구별해낼 수도 있다.

ex) var r = new Rectangle(2, 3);

r.hasOwnProperty("width");    // true, width는 r의 직접적인 프로퍼티이다.

r.hasOwnProperty("area");    // false, area는 r이 상속받은 프로퍼티이다. 

(area는 생성자가 아닌 프로토타입에 속한 메소드 이므로)

"area" in r;                            // true, area는 r의 프로퍼티이다.

2.1 상속받은 프로퍼티의 읽기와 쓰기

: 객체 o의 프로퍼티인 p를 읽을 때, 자바스크립트는 o에 p라는 이름을 가진 프로퍼티가 있는지 검사한다. 만약 없다면 o의 프로토타입 객체에 p라는 프로퍼티가 있는지 검사한다.

반면, 프로퍼티의 값을 쓰려고 할 때는 프로토타입 객체를 사용하지 않는다. 모든 객체의 값을 바꿔버릴 수 있기 때문이다.

즉, 프로퍼티의 상속은 프로퍼티를 쓸 떄가 아닌 읽을 때만 일어난다.

 프로토타입의 프로퍼티들은 클래스의 모든 객체가 공유하기 때문에, 모든 객체가 같이 사용하는 프로퍼티들을 정의해놓는 것이 이해하기 쉽다. 프로토타입이 메서드를 정의해두기에 안성맞춤이다. 그 외에 상수값인 프로퍼티들도 프로토타입의 프로퍼티로 정의되는 것이 적당하다.

2.2 내장형 타입의 확장

: Object.prototype에는 어떤 프로토타입도 추가해서는 안 된다.

단, 내장형 네이티브 클래스의 프로토타입을 확장하는 것이 안전하고 유용한 경우가 한가지 있다. 오래되었거나 호환이 되지 않는 자바스크립트가 표준 메서드를 포함하고 있지 않으면 새로운 메서드를 추가할 수 있다.

3. 자바스크립트의 클래스 시뮬레이션

3.1 인스턴트 메서드

3.1.1 인스턴스 메서드와 this

:  자바와  c++에서 인스턴스 메서드의 유효범위는 this 객체를 포함한다.

ex) return width * height;

   하지만, 자바스크립트에서 이 프로퍼티들을 사용하려면 명시적으로 this키워드를 사용해야 한다.

ex1) return this.width * this.height;

ex2) Rectangle.prototype.area = function() {

with(this) {

return width*height;

}

}

3.2 클래스 프로퍼티

: 클래스의 각 인스턴스가 아닌 클래스 자체와 연관되어 있는 프로퍼티를 말한다.

  클래스 프로퍼티는 클래스의 인스턴스가 몇 개나 생성되는지에 상관없이 한 개만 존재한다.

  클래스 프로퍼티는 한 개의 사본만 있기 떄문에 필수적으로 전역에서 접근할 수 있어야 한다.

  

3.3 클래스 메서드

: 자바스크립트에서 클래스 메서드를 정의하기 위해서는 함수를 생성자 함수의 프로퍼티로 만들면 된다.

클래스 메서드는 this 키워드를 사용하지 않는다.

3.4 private 멤버

: 자바스크립트는 클로저를 사용하여 이를 흉내 낼수 있지만 이를 위해서는 인스턴스 마다 접근 메서드가 저장되어 있어야 한다.

4. 슈퍼 클래스와 서브 클래스

4.1. 생성자 체이닝

: 서브 클래스 생성자 함수는 상위 클래스의 생성자 함수를 명시적으로 호출 해야하는 작업.

  하위 클래스를 생성할 때 굉장히 자주 사용된다.

ex) positionedRectangle.prototype.superclass = Rectangle;

// 상위 클래스 생성자에 대한 참조를 저장한다.

function PositionedRectangle(x, y, w, h) {

this.superclass(w,h);

this.x = x;

this.y = y;

}

4.2 재정의된 메서드 호출하기 ( 오버 라이딩)

: /* ... */ 생략

5. 상속 없이 확장하기

6. 객체 타입 판단하기

: 자바스크립트는 타입과 객체의 제약이 느슨하다. 그러므로 여러가지 기법을 사용하여 임의의 값이 어떤 타입에 속하는 것인지 판단할 수 있다.

cf) typeof : 기본 타입을 객체와 구별하는 데 가장 유용하게 사용할 수 있다. 

약간 변덕스러운 면도 있다. 먼저 typeof undefined 는 "undefined" 지만

typeof null 은 "object" 라는 것을 기억하라. 또한 모든 배열은 객체이기 때문에 "object"다

하지만, 함수는 객체이긴 하지만 타입은 "function" 이다.

6.1 instanceof 와 constructor

ㄱ. instanceof

: instanceof 의 왼쪽에 있는 것은 테스트될 값, 오른쪽에 있는 것은 클래스를 정의할 수 있는 생성자 함수.

ex) typeof f == "function" // true

f instanceof Function   // true

f instanceof Object      // true

ㄴ. constructor

: 객체가 특정한 클래스의 인스턴스이고 그 클래스의 하위 클래스의 인스턴스는 아니라는 사실을 테스트 하고 싶을때 사용

ex) var d = new Date();                             // Date 객체. Date는 Object를 확장한다.

var isobject = d. instanceof Object;         // true로 평가된다.

var realobject = d.constructor == object;    //false 로 평가된다.

단. 이미 알고 있는 클레스만 테스타 할 수 있다는 단점이 있다.

예로써, 이 기능들은 디버깅을 할 때와 같이 모르는 객체를 조사하는 데는 유용하지 않다.