[자바스크립트] OOP - 클래스(Class)와 상속(Inheritance)

클래스(Class)

---

자바스크립트는 자바와 달리 class가 존재하지 않습니다(ES6에서는 존재). 하지만, prototype을 사용하여 class를 구현할 수 있습니다.

([자바스크립트] 프로토타입(Prototype) 참고)

function Animal () {
    this.name = "없어요"
}
Animal.prototype.getName = function () {
    console.log(this.name);
}

- 코드 1 -

코드 1은 class를 prototype으로 구현한 기본 형태 입니다.

상속(Inheritance)

---

위에서 말씀 드렸던것과 같이 자바스크립트는 상속 또한 존재하지 않습니다. 하지만, 역시 마찬가지로 prototype을 사용하여 상속을 구현할 수 있습니다.

([자바스크립트] 프로토타입(Prototype) 참고)

function Animal () {
    this.name = "없어요"
}
Animal.prototype.getName = function () {
    console.log(this.name);
}

function Dog () { }
Dog.prototype = new Animal();

var myDog = new Dog();
console.dir(myDog);

- 코드 2-1 -

코드 2-1 실행 결과

코드 2-1는 Animal class를 상속하여 Dog class를 정의하고, Dog 객채를 만드는 코드입니다.

일반적으로 클래스를 만들면 자동으로 prototype의 constructor라는 프로퍼티가 만들어집니다. ([자바스크립트] 프로토타입(Prototype) 참고)

이 프로퍼티에는 해당 클래스의 생성자 정보가 기본값으로 담기게 됩니다. 달리 말하면 constructor 프로퍼티를 이용해 사용하는 객체가 어떤 클래스의 객체인지 알아낼 수 있습니다.

그렇다면, myDog.constructor는 무엇을 가르키고 있을까요? 위에서 말한 것이라면 myDog.constructor는 Dog 를 가르켜야 합니다. 하지만 실제 결과는 

myDog.Constructor 결과

myDog.Constructor 결과는 Animal 을 가르키고 있습니다. 왜 일까요?

[자바스크립트] 프로토타입(Prototype)에서 잠깐 설명 했던, 프로토타입 체인 때문입니다. dog 객체에 constructor이라는 인스턴스가 없이 때문에, 상위의 constructor을 찾아, Animal을 가르키게 된 것입니다.

function Animal () {
    this.name = "없어요"
}
Animal.prototype.getName = function () {
    console.log(this.name);
}

function Dog () { }
Dog.prototype = new Animal();
Dog.prototype.constructor = Dog

var myDog = new Dog();
console.dir(myDog);

- 코드 2-2 -

코드 2-2 실행 결과

myDog.constructor가 Dog를 가르키기 위해, 코드 3에서와 같이 Dog.prototype.constructor = Dog 가 추가되어야 합니다.

이렇게 하여, 상속의 기본 형태인 코드 2-2가 완성 되었습니다.

코드 2-2 다이어그램

부모 클래스의 생성자 호출

---

코드 1의 class 기본 형태와 코드 2-2의 상속 기본 형태로 한 발자국 더 나아가 Dog의 이름을 지어주겠습니다.

function Animal (name) {
    this.name = name
}
Animal.prototype.getName = function () {
    console.log(this.name);
}

function Dog (name) {
    Animal.call(this, name);
}
Dog.prototype = new Animal();
Dog.prototype.constructor = Dog

var myDog = new Dog("진순이");
console.dir(myDog);
myDog.getName();

- 코드 3-1 -

myDog의 이름을 짓기 위하여, 부모 클래스의 생성자를 호출하였고 호출하는 방법으로는 call이라는 메소드를 사용하였습니다. call 메소드를 사용하는 문법은 코드 3-2와 같습니다.

function 자긱클래스([param1, param2, ...]) {
    부모클래스.call(this [, param1, param2, ...]);
}

- 코드 3-2 -

코드 3-1에 2번째 줄인, 부모 클래스(Animal)의 this.name = name으로 this.name에 "진순이"가 저장되는데, 이 때의 this의 값은, Dog의 this입니다.

(call 매소드는 [자바스크립트] API - call, apply 함수를 참고 바랍니다.)

(this 객체는 [자바스크립트] this의 정체를 참고 바랍니다.)

코드 3-1 실행 결과

코드 3-2 실행 결과를 보면, call 매소드로 Dog의 name에 "진순이"가 저장되어 있는 것을 확인 할 수 있습니다. 또한 myDog.getName()의 결과가 "진순이"로 부모의 getName 매소드가 동작하고 있는 것을 확인 할 수 있습니다. (부모 객체의 getName이 호출 되는 것도 프로토타입 체인의 결과입니다)

 

(참조 문헌 : 자바스크립트 + JQuery 완전정복 스터디)