클래스

모조 클래스

자바스크립트에서는 다른 언어와는 달리 실제 클래스를 지원하지 않는다. 대신 모조 클래스(pseudo class)를 정의할 수 있다. 모조 클래스는 프로토타입 객체나 생성자 함수를 사용해 구현할 수 있다. 지금부터는 클래스라는 단어를 그대로 사용하겠다.

 

생성자

new 연산자를 이용해 아무 프로퍼티도 없는 새 객체를 하나 생성하고 new 연산자 뒤에 있는 함수를 호출한다. 그리고 this 키워드가 새로 생성된 객체를 가리키게 한다. 생성자는 새로운 객체를 초기화하고, 객체에 있는 프로퍼티들에게 초기값을 할당한다. 

// 생성지를 정의한다.
// ’this'와 연관되어 있는 객체를 초기화하는 방법을 주의해서 보라. 
function Rectangle(w, h) {
this.width = w;
this. height = h;
//주의! 여기에는 return문이 없다. 
}
// Rectangle 객체를 두 개 만들기 위해서 생성자를 호출한다 .
// 생성자가 새 객체를 각각 적절히 초기화할 수 있게 너비와 높이를 인자로 넘겨준다.
var rect1 = new Rectangle(2, 4); // rect1 {width:2, height:4 }; 
var rect2 = new Rectangle(8.5, 11); // rect2 = { width:8.5, height:11 };

주어진 인자를 사용해 this가 가리키는 객체의 프로퍼티들을 초기화한다.

 

프로토타입과 상속

메서드는 객체의 프로퍼티이자 호출 가능한 함수이다. 메서드를 호출하면, 메서드 내의 this 키워드는 메서드가 속한 객체를 가리킨다. 만약, 여러분들이 Rectangle 객체로 표현된 사각형의 넓이를 계산하고 싶다면, 다음과 같은 방식을 사용할 수 있다.

function computeAreaOfRectangle(r) { return r.width * r.height; }

이 방법은 객체지향적인 방법이 아니다. (해결1)

// Rectangle 객체를 생성한다 .
var r new Rectangle(8.5, 11);
// 메서드 한 개를 추가한다.
r.area = function() { return this.width * this.height; } // 이제 넓이를 계산하기 위해서 메서드를 호출한다.
var a r.area();

가능하면 메서드를 사용하는 것이 좋다. 이런 방법이 다소 이상하게 보일 수도 있다. 이 점은 계산하는 함수를 생성자 내부에서 연결시키는 방법으로 개선할 수 있다. (해결2)

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();

이 방법을 통해 객체를 생성하면 모든 Rectangle 객체에 똑같은 메서드를 담고있어 비효율적이다. 공유하게끔 만들어진 메서드는 프로토타입이라고 불리는 또 다른 객체를 내부적으로 참조함으로써 해결할 수 있다. 빈 객체가 생성되면, new 연산자는 해당 객체의 프로토타입을 설정한다. 이때 생성된 객체는 자신을 만들어낸 생성자의 prototype 프로퍼티 값을 자신의 프로토타입으로 설정한다. 모든 함수에는 prototype이라는 프로퍼티가 있는데, 이것은 함수가 정의될 때 부터 자동적으로 생성되고 초기화 된다. (해결3)

// 생성자 함수는 각 인스턴스의 프로퍼티가 다른 값이 되도록 초기화시킨다. 
function Rectangle(w , h) {
    this.width = w; 
    this.height = h;
}
// 프로토타입 객체는 각 인스턴스들이 공유해야 하는 프로퍼티냐 메서드를 정의한다. 
Rectangle.prototype.area = function() { return this.width * this.height; }

생성자는 객체들의 클래스를 위한 이름을 정의하고, width나 height와 같이 인스턴스마다 다를 수 있는 프로퍼티의 값을 초기화시킨다. 그리고 프로토타입 객체는 생성자와 연결되며, 이 생성자를 통해 생성되는 객체들은 프로토타입이 가진 프로퍼티들을 똑같이 상속받는다.  프로토타입 객체를 사용하면 각 객체가 프로토타입의 프로퍼티를 상속받기 때문에 이들이 필요로 하는 메모리의 양을 상당히 줄일 수 있다. 다음으로, 프로토타입에 새로운 프로퍼티가 추가되면, 이미 생성되었던 객체일지라도 추가된 프로퍼티를 그대로 상속받는다.

 

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

자바스크립트는 프로퍼티를 읽을 때, 객체 안에 프로퍼티가 있는지 검사한다. 만약 없다면 객체의 프로토타입 객체에 프로퍼티가 있는지 검사한다. 이것이 바로 프로토타입 기반의 상속이 작동할 수 있는 이유이다. 반면, 프로퍼티의 값을 쓰려고 할때는 프로토타입 객체를 사용하지 않는다. 프로퍼티의 상속은 쓸 때가 아닌 읽을 때만 일어난다. 

 

슈퍼 클래스와 서브 클래스

객체지향 언어들은 클래스의 계층에 대해 명확한 개념을 가지고 있다. 모든 클래스는 자신의 프로퍼티와 메서드를 상속받는 슈퍼 클래스를 가질 수 있다. 어떤 클래스가 서브 클래스가 되면 자신의 행동을 그대로 상속받을 수 있다. 자바스크립트는 클래스 기반이 아닌 프로토타입 기반 상속을 지원한다. 자바스크립트에서는 Object 클래스가 가장 일반화되어 있는 클래스이며, 다른 클래스들은 이 클래스의 서브 클래스이거나 이를 조금 더 구체화시킨 클래스이다. 모든 클래스는 Object 클래스에서 몇 개의 기본적인 메서드를 상속받는다.

 

출처

자바_스크립트_완벽가이드