본문 바로가기

Frontend/JAVASCRIPT

[Javascript] Pseudoclassical Subclass Instantiation

반응형

지금은 javascript가 많이 발전하여 oop를 구현하는것이 그리 어렵지 않지만 예전엔 구현이 좀 까다로웠다.

이번 포스팅은 예전에는 어떤 방식으로 oop를 구현하는지 정리하는 포스팅이다.

아래의 내용을 알아야 이번 포스팅을 이해할수가 있다.

[programming paradigm] Object Oriented Programming
OOP 의 기본 컨셉은 프로그램 내에서 표현하고자 하는 실 세계(real world)의 일들을 객체를 사용해서 모델링하고, 객체를 사용하지 않으면 불가능 혹은 무지 어려웠을 일들을 쉽게 처리하는 방법을 제공한다. - m..
artdev.tistory.com

[Javascript] Object.create( ) 과 prototype chaining
앞에서 prototype 과 __proto__ 를 알아보았다. 이번엔 특정 객체와 또 다른 특정 객체의 상속관계를 자바스크립트는 어떤식으로 만들어가는지 알아보자. [programming paradigm] Object Oriented Programming OOP..
artdev.tistory.com

[Jacascript] call, apply, bind and this
이번 포스팅은 this의 4가지 바인딩 말미에서 언급한 강제로 this 바인딩을 변경하는것에 대한 포스팅이다. this가 가리키는것을 알아야 이번 포스팅을 이해할수 있으니 이 부분을 꼭 알고 와야 한다. [Javasvript..
artdev.tistory.com

대표적인 방식인 Pseudoclassical pattern 을 보면,

function SuperClass(arg1,arg2){
  this.arg1 = arg1;
  this.arg2 = arg2;
}

SuperClass.prototype.foo(){
  console.log(this.arg1);
  console.log(this.arg2);
}

function Subclass(argA,argB){
  SuperClass.call(this,argA,argB);
}
// SubClass의 constructor와 prototype부분을 이런식으로 변경해주여 구현한다.
SubClass.prototype = Obeject.create(SuperClass.prototype);
SubClass.prototype.constructor = Subclass;

메서드의 오버라이딩 부분은 SuperClass의 foo에 this(SubClass)를 넘겨주어 강제로
SuperClass의 foo를 실행시킨다.

SubClass.prototype.foo = function(){  
  SuperClass.prototype.foo.call(this);  
 // do somethig....  
}

오래전에 쓰여진 라이브러리는 상속을 이런식으로 구현한것을 볼수가 있는데,
mongoose 패키지의 일부에서도 이런 상속패턴이 쓰이고있다.

이 방식으로 코드를 짤것인지는 잘 모르겠지만 다른사람의 코드를 볼때 알아두면 좋을것 같다.

반응형