[javascript] 상속 구현하기

목적 배경지식

Person이라는 객체를 상속받아 Student라는 객체를 만들려고 한다.

상속을 공부하려면 프로토타입과 프로토타입 체이닝에 대한 이해가 있어야 한다.

https://wouldyou.tistory.com/30

[javascript] 프로토타입 체이닝이란?

 

javascript의 상속

javascript에서의 상속은 [[prototype]]의 연결로(프로토타입체이닝) 구현된다.

 

아래와 같이 Person과 Student객체가 있다.

우리가 하고싶은 일은 Person을 상속받아 Student객체를 만들어 me.getName(); 이런 식으로 사용하는 것이다.

 

그렇다면 두 객체의 prototype끼리 연결해야 한다.

 

어떻게 연결해야 할까?

me -> Student의 Prototype -> Person의 Prototype 이런식으로 프로토타입 체이닝이 일어나면 될 것이다.

아래처럼 말이다.

 

위와 같은 작업이 일어나려면 student.prototype은 어떠한 function F를 new로 생성한 객체여야 한다.

이때 이 F는 F.prototype = Person.prototype이어야 한다.

아래의 주황색 부분이다.

 

즉 노란색으로 표시한 두개의 객체가 서로 연결되기 위해서는 주황색으로 표시한 중개자 함수가 필요하다.

 

중개자 함수는 두 함수를 이어주는 역할을 하며

me와 you과 아무런 관계 없이 독립적으로 존재할 수 있도록 만들어준다.

또 Studetn.prototype객체에 자식클래스만의 메소드를 넣어서 확장할 수 있도록 한다.

 

코드

이것을 코드로 구현한 것이다.

function Person(arg){
            this.name = arg;
         }

         //모든 함수의 프로토타입으로 method가 들어간다.
         Function.prototype.method = function(name, func){ 
             this.prototype[name] = func; 
         }

         Person.method("setName", function(value){
            this.name = value;
         });
         
         Person.method("getName", function(value){
            return this.name;
         });


         function Student(arg){
         }

         function F() {};
         F.prototype = Person.prototype;
         Student.prototype = new F();
         Student.prototype.constructor = Student();
         Student.super = Person.prototype;

         var me = new Student();
         me.setName("ghost");
         console.log(me.getName());

 

이 코드를 최적화한 함수도 있다.

Javascript Patterns의 저자 스토얀 스테파노프가 소개한 최적화된 함수이다.

var inherit = function(Parent, Child){
             var F = function() {};
             return function(Parent, Child){
                 F.prototype = Parent.prototype;
                 Child.prototype = new F();
                 Child.prototype.constructor = Child;
                 Child.super = Parent.prototype;
             }
         }();