자바스크립트로 상속의 상속(다중상속)

날짜 : 2018. 02. 08.(목)

자바스크립트로 상속의 상속(다중상속)

 

전체개요

1. 생각하게 된 동기
   
2. class를 사용하여 만들기
3. Object메소드를 이용하여 만들기
4. 생성자 함수를 이용하여 만들기
5. 생각하게 된 점
6. 참고자료

간단요약

각 함수별 사용방법 및 상황이 있는데, 이를 무시하고 사용하면 (예를 들어 생성자 함수로 class 기능처럼 사용하기) 손발이 고생한다. (안되는 것은 아니다.)

본문

1. 생각하게 된 동기

   • ES5만을 사용하고 있는 상황에서 다중 상속이 가능한지 궁금하였다.
   • ES6의 class를 사용하면 쉽다는 이야기를 들었다. (JAVA와 비슷하니…)
   • ES6의 사용목적, 나오게된 배경, 장점을 체험해 보고 싶었다.
   • 흐름제어 : 조건문, 반복문, 함수
   • 값 저장 방식

2. class를 사용하여 만들기

   • 코드

   class A { } 
   class B extends A { }
   class C extends B { }
   var c = new C();
   

   • __proto__ 를 통하여 각 객체가 상속되는 것을 확인할 수 있었다.

      

3. Object메소드를 사용하여 만들기

   • 코드

   var a = Object.create({});
   var b = Object.create(a);
   var c = Object.create(b);
   

   • class와의 다른점 이라고 한다면 각 객체가 인스턴스화 되어 있다는 점이다. (class는 생성자만 만들어져 있다.)
     

4. 생성자함수를 사용하여 만들기

   • 코드

   function A() { }
   function B() {
   	A.call(this);
   }
   B.prototype = Object.create(A.prototype);
   B.prototype.constructor = B;
   function C() {
   	B.call(this);
   }
   C.prototype = Object.create(B.prototype);
   C.prototype.constructor = C;
   

   • 생성자 함수의 상속요소에

5. 생각하게 된 점.

   • 어떠한 방식으로도 객체의 상속을 구현할 수는 있었다.
   • 하지만 코드의 간결성과 일부의 인스턴스가 선언됨으로 인해서 메모리 공간을 사용하게 된다.
   • 각 브라우저별 코드가 어떻게 작동하게 되는지는 자세하게 알 수 없어서 메모리 효율성을 이야기 하기는 힘이들지만, 생성자함수 이외의 방식에서는 해당 객체를 상속하고 있다는 의도를 명확하게 보여주고 있어서 가독성이 낳다고 생각이 든다.
     

6. 참고자료

   • bestalign 블로그
   • bsidesoft 블로그