2021.07.19(Mon.) <객체지향 언어인 Javascript의 class와 prototype>

1. class

• 구성이 비슷한 여러 개의 객체를 만들려고 할 때 사용하는 ''blueprint"가 된다.
• 예를 들어, 게임 캐릭터의 스킬을 정리해 놓은 리스트를 만들려고 한다.

const Garrosh = {
	passiveSkill : 'Armor Up',
    q : 'Groundbreaker',
    w : 'Bloodthirst',
    e : 'Wrecking Ball',
}

const Artanis = {
	passiveSkill : 'Shiield Overload',
    q : 'Blade Dash',
    w : 'Twin Blades',
    e : 'Phase Prism',
}

const ...

• 이런 식으로 만들다가는 끝이 없을 것이다.
• 그렇기 때문에 class를 이용한 객체를 만들 수 있는 생성자를 만들 것이다.

class Hero {
	constructor(passiveSkill, q, w, e) { //constructor를 하나 만들어서 매개변수들을 정해준다.
		this.passiveSkill = passiveSkill;
        	this.q = q;
        	this.w = w;
        	this.e = e;
	}
}

const Nova = new Hero('Permanent Cloak', 'Snipe', 'Pinning Shot', 'Holo Decoy');

// Nova === Hero {
//	  passiveSkill : 'Permanent Cloak',
//    q : 'Snipe',
//    w : 'Pinning Shot',
//    e : 'Holo Decoy',
// }

• 이는 ES6 문법에서부터 적용된다. 과거의 방법인 함수를 만드는 방법도 있다.

function Hero(passiveSkill, q, w, e) { // 첫번째 글자는 대문자로 쓴다.
	this.passiveSkill = passiveSkill;
    this.q = q;
    this.w = w;
    this.e = e;
}

const Diablo = new Hero('Black Soulstone', 'Shadow Charge', 'Fire Stomp', 'Overpower');

// Diablo === Hero {
//	  passiveSkill : 'Black Soulstone',
//    q : 'Shadow Charge',
//    w : 'Fire Stomp',
//    e : 'Overpower',
// }

• 위의 class와 똑같이 작동하게 된다. 이렇게 간단하게 계속 캐릭터 정보를 입력할 수 있다.
• 즉, 엄청난 재사용성을 가지게 된다.
• 함수와 같은 모든 타입의 데이터도 넣을 수 있다.
• 이렇게 생성된 객체들을 'instances'라고 한다.

2. prototype

• 이때, 생성자를 만들면 생성된 자식 object에는 'prototype'이 생성된다. 만들지 않아도 자동으로 생긴다.
• 간단하게 '유전자'라고 생각하면 된다. 부모가 자식에게 물려주는 것이기 때문이다. 그래서 위의 예시에 Hero에 prototype에 키와 값을 주면 모든 자식에게 영향을 주게 된다.

Hero.prototype.gameTitle = 'Heroes of the Storm'

// Nova.gameTiltle === 'Heroes of the Storm'
// Diablo.gameTitle === 'Heroes of the Storm'

• 이렇게 숨겨진 prototype에는 우리가 매번 사용하던 기본 함수들이(ex: length, sort 등등) 이미 저장되어 있다.
• 우리가 평상시에 한 자료를 만들 때 그 타입에 따라 const arr = [1, 2, 3, 4,]로 만들지만, const arr = new Array(1, 2, 3, 4,)로도 만들 수 있다. 똑같은 방식이다. 말하자면, 위에서 보았던 Hero와 Array는 똑같은 역할을 하게 되는 것이다!
• 그러므로, Array에 prorotype에 있던 각각의 기본 함수들을 그대로 새로 만든 arr에서도 사용할 수 있게 된다.
• 이를 그대로 응용하면, 우리는 새로운 기본 함수를 Array.prototype.funcA = function() {...}과 같은 식으로 만들어 줄 수 도 있다!

3. OOP

 객체지향 프로그래밍의 주요 콘셉트이다.

1. 캡슐화(Encapsulation)
   • 데이터를 어떠한 기능이 동작하면 조작할 수 있도록 연결하는 것.
   • 데이터를 일부러 은닉시키기도 한다.
2. 추상화(Abstraction)
   • 내부 기능은 복잡하게 되어 있을지 몰라도, 우리가 보는 환경에는 단순하게 하여 사용자로 하여금 이용을 편하게 할 수 있게 한다.
   • 옛날에 만들었던 계산기를 생각해 보자. 겉으로 보기에는 사칙연산의 혼합이 가능하거나 소수점 계산이 가능하더라도 생긴 건 불가능한 계산기와 똑같고, 단순하게 숫자와 연산자로 이루어진 모습이다.
3. 상속(Inheritance)
   • 말 그대로 상속. 부모의 속성과 특징을 자식에게 물려주는 것이다. 위의 예시로 보았듯이, 부모가 가지고 있던 속성을 자식에게 줄 수 있다. 공통되는 부분을 가직 자식 객체들의 똑같은 부분을 계속 적어줄 필요가 없다.
4. 다양성(Polymorphism)
   • 상속받은 자식들 중에 하나에만 다른 속성을 추가하거나 수정하고 싶을 때는 필요한 함수만, 혹은 속성만 뽑아서 수정하면 된다. 각각 하나하나 따로 수정을 해 줄 필요가 없다.