클래스와 객체 그리고 상속.

자바스크립트를 제대로 알기 위해서는 객체에 대한 이해가 필요합니다. JS의 모든 것이 객체로 이루어져 있기 때문입니다.

자 같이 공부해 봅시다.

 

자바스크립트에는 클래스가 있는가? 객체지향 개발이 가능한가?

이 질문에 대답하기위해 우리는 클래스와 객체를 구분해야 합니다.

클래스는 틀입니다. 사람이라는 틀이 있고 그 틀로 찍어내듯 만든 "이석규"라는 인간이 있죠.

만들어진 "이석규"라는 인간은 객체입니다. 사람이라는 클래스의 인스턴스죠.

 

"자 그럼 자바스크립트에는 클래스가 있는가?" 그렇습니다.

본래 자바스크립트에는 클래스 문법이 없었습니다. ES6에 들어와서 제공되기 시작한 거죠.

두 번째 질문인 "객체지향 개발이 가능한가?" 매우 그렇습니다.

그렇다면 ES6에서 클래스가 제공되고 난 후에야 JS로 객체지향 개발이 가능하게 되었는가? 아닙니다.

클래스 != 객체지향 인거죠.

 

자 그럼 JS로 객체지향 프로그래밍을 같이 해봅시다.

첫 번째는 프로토타입 기반을 이용한 클래스 설계.

두 번째는 ES6의 클래스 문을 이용한 클래스 설계.

 

이번 포스팅에서는 프로토타입부터 시작합시다. (ES6는 별도로 정리하는 시간이 가질테니깐요.)

프로토타입? 단어부터 생소하게 다가오는 분들이 있을 겁니다.

같이 검정화면을 통해 하나씩 이해해 봅시다. 우리는 다크 테마를 고집하는 고수니깐요.

function Gun() {}
var gun1 = new Gun();
var gun2 = new Gun();

단 3줄 만에 클래스와 객체 두 개를 생성했습니다. 자바스크립트는 훌륭한 객체지향 언어임을 알 수 있습니다.

자 그럼 이제 조금 더 나가 봅시다.  총에는 파워가 있어야죠.

function Gun(power) {
    console.log("사용자가 총을 생성합니다.");
    this.power = power;
}
var gun1 = new Gun(10);
var gun2 = new Gun(20);
 
console.log(gun1.power);
console.log(gun2.power);

자 이제 우리는 파워가 다른 총 2개를 만들었습니다. ; )

이제 총을 발사해볼까요? 발사는 모든 객체에 공통 메서드입니다. 느낌 오시나요?

"프로토타입" 친구가 등장할 때가 되었습니다.

function Gun(power) {
    console.log("사용자가 총을 생성합니다.");
    this.power = power;
}
var gun1 = new Gun(10);
var gun2 = new Gun(20);
 
Gun.prototype.shoot = function () {
    console.log("적에게" + this.power + "만큼의 피해를 입혔습니다.");
}
 
gun1.shoot();
gun2.shoot();

#8 클래스의 프로토타입 속성에 shoot이라는 메서드를 할당했습니다.

총틀을 만들었고. 총을 2자루 만들었으며, 두 번 쏘기까지 했네요.

이제 마지막 단계인 상속이 남았습니다.

그전에 잠깐 확인해야 할 것이 있습니다. 

콘솔로 gun1, gun2 객체의 내부를 살펴보면 __proto__라는 속성으로 자신을 만든 클래스의 프로토타입 속성에 연결되어 있음을 알 수 있습니다.

프로토타입을 잘 이으면 상속이 될 것 같은 기분이 듭니다.

아래 마지막 코드로 이번 포스팅을 마칩니다. 설명은 주석으로 달았습니다.

// 총 클래스 생성
function Gun(power) {
    if(power === undefined){
        return false;
    }
    console.log("사용자가 총을 생성합니다.");
    this.power = power;
}
// 총 클래스의 프로토타입 할당
Gun.prototype.shoot = function () {
    console.log("적에게" + this.power + "만큼의 피해를 입혔습니다.");
}
Gun.prototype.reload = function () {
    console.log("총알을 장전합니다.");
}
 
// 소총 클래스 생성
function Rifle() {
    // 부모 생성자인 총 클래스를 호출.
    Gun.apply(this, arguments);
}
 
// 부모 클래스 상속
Rifle.prototype = new Gun();
 
// 상속을 하면서 생성자 속성이 부모로 바뀌었기때문에 본래대로 돌려줍니다.
Rifle.prototype.constructor = Rifle;
 
// 오버라이딩
Rifle.prototype.shoot = function () {
    console.log("적에게 소총으로" + this.power + "만큼의 강력한 피해를 입혔습니다.");
}
 
// 소총 클래스 메서드 추가
Rifle.prototype.fastening = function () {
    console.log("소총 견착완료.");
}
 
var rifle = new Rifle(100);
rifle.fastening();
rifle.shoot();
rifle.reload();
 
console.log(rifle instanceof Gun);
console.log(rifle instanceof Rifle);
 

설명이 부족하거나 도움이 필요하시면 언제든 댓글 부탁드립니다.