[OOP & ES6]ES6방식으로 안쉽게 구현하는 상속기능 (class)

class 라는 문법이 있습니다.

constructor, prototype 을 이용한 상속기능을 간지나게 만들 수 있게 도와주는 문법입니다. 

기존 function부터 시작하던 문법과 기능상 차이는 크게 없고 약간 더 보기쉽게 표현해줄 뿐입니다. 

어떻게 하는지 자세히 알아봅시다. 

 

 

 

 

ES6 class 키워드로 구현하는 constructor 기계만들기

constructor 라는건 앞선 포스팅에서 했기 때문에 다들 아시죠?

오브젝트 뽑는 기계였습니다. 

ES6 class라는 신문법으로 constructor를 만드시려면 이렇게 따라치시면 됩니다. 

 

 

끝입니다. 예전 function 부모(){} 어쩌구 이렇게 기계를 만드는 문법과 똑같은 문법입니다.

이제 new 키워드를 이용해서 방금 만든 부모라는 기계에서 오브젝트를 새로 생성할 수 있는 것이고요.

constructor()라고 쓴 부분에 예전처럼 this.name 어쩌구 하시면 새로 생성되는 오브젝트들에 값을 부여할 수 있습니다. 

이게 끝입니다. 

 

 

 

 

 

상속가능한 함수를 추가하려면 어떻게 해야할까요?

예전에 sayHi 이런거 하면서 배웠던 두가지 방법이 있습니다.

1. 함수를 this.sayHi 이렇게 constructor 안에 추가하는 방법과 

2. 기계의 prototype에 추가하는 방법이 있었죠?  

▼ 1번은 똑같이 이렇게 하시면 되겠죠?

 

 

그럼 새로생성되는 자식은 sayHi() 함수를 직접 가지게 되며 자유롭게 쓸 수 있습니다. 

 

 

▼ 2번처럼 prototype에 추가하시려면 

 

이런 식으로 하시면 됩니다.

오브젝트에 함수추가하듯 하시면 됩니다요. 

그럼 자식은 sayHi()라고 썼을 때 부모의 prototype에 있던 sayHi() 함수를 쓸 수 있습니다.

(혹은 그냥 부모.prototype.sayHi = function(){} 이렇게 하셔도 되고요)

 

 

 

 

 

참고로 알아두는 Object.getPrototypeOf()

이 함수 안에 오브젝트를 넣으시면 부모 prototype을 출력해줍니다.

이 오브젝트가 대체 누구로부터 prototype을 상속받고 있는지를 알려주는 함수죠.

__proto__라는 키워드와 비슷한 역할을 한다고 보시면 됩니다. 

 

 

 

 

 

 

constructor안에 파라미터 추가하기

ES6 방식으로 constructor 만들 때 파라미터를 추가하려면 이렇게 하시면 됩니다. 

 

 

이런 식으로 하시면 파라미터를 넣어서 constructor를 만들 수 있습니다.

자식을 생성할 때 이제 파라미터 두개를 입력할 수 있겠군요.

 

 

 

 

prototype 내에 함수 여러개 추가하기

그냥 별건 아니고 이렇게 하면 됩니다.

 

이렇게 쭉 써주시면 prototype에 sayHi, sayHello 등 여러개 함수를 동시에 넣을 수 있겠군요.

 

 

 

 

 

 

 

 

 

 

출처 : 코딩애플의 매우쉽게 이해하는 JavaScript 객체지향 & ES6 신문법