자바스크립트 상속패턴 Inheritance pattern

afashs·2021년 4월 23일
0

자바스크립트에서 상속을 구현하는 방법들

상속방법이 생각보다 너무 간단해서 놀랐다.. 자바스크립트는 별거 아니지만 대단한 놈이다 역시

  1. functional
  2. pseudo classical
  3. class

여기서는 functional 한 방법은 빼고 pseudo classical 과 class 를 이용한 방법을 구현하겠다.

pseudo classical

부모객체 생성자와 상속받을 자식객체의 생성자를 준비한다.
클래스 역할로 사용한다는 의미에서 Pascal Case로 작성한다. 여기서는 동물과 사람을 사용하겠다.

// 부모객체 생성자
const Animal = function () {
  // 속성
  this.name = "동물";
};
// 기능추가
Animal.prototype.say = function (hi) {
  return hi;
};

// 자식객체의 생성자
const Human = function (age, height) {
  // 부모의 this가 자식의 this와 연결되게 바인딩
  Animal.call(this);
  this.name = "사람";
  this.age = age;
  this.height = height;
};

아직 상속이 끝나지 않았다.
기능을 상속받아야 하고
기능을 상속받으면 부모의 생성자가 자식에게 상속되었기 때문에
자식의 생성자로 새로운 객체의 constructor를 변경해주어야한다.

// 부모의 기능은 이것으로 연결한다. 부모의 prototype을 복사해서 자식에 할당한다.
Human.prototype = Object.create(Animal.prototype);
// 부모의 생성자 대신 자식의 생성자로 변경 -- 이걸 안하면 constructor 가 부모인 상태가 된다.
Human.prototype.constructor = Human;
// 자식에게 기능추가
Human.prototype.bye = function () {
  return "bye bye";
};
// 물려받은 부모기능 변경
Human.prototype.say = function () {
  return "hello";
};

상속이 잘 구현됐는지 확인해보자

const ani = new Animal();
ani.say("어흥");
// 어흥
const afashs = new Human(18, 173);
afashs.age;
// 18
afashs.bye();
// bye bye
afashs.say();
// hello

ES6 syntax (class/ super)

절차는 같다. 부모와 자식인데 클래스문법을 사용한다. 자바가 매우 생각나게 하는 문법이다.
진짜 이거 보니까 자바….스크립트 같다.
원래 자바랑 1 도 관련 없던 언어인데 말이지

super() 도 원래 자바에 있던건데 이것도 추가됐나보다.
부모클래스의 속성,기능등을 super()라는 메소드를 통해 접근 가능함.

// 부모클래스
class Animal {
  // 속성
  constructor() {
    this.name = '동물';
  }
  //기능
  say(hi) {
    return hi;
  }
}
// 자식클래스 (상속은 extends로)
// 주의! 다중상속 지원안됨 자바에서도 원래 안되지만 implement 라는 기능이 있는데 여기는 없음)
class Human extends Animal {
  constructor(age, height) {
    // 속성 상속
    super();
    this.name = '사람';
    this.age = age;
    this.height = height;
  }
  // 기능추가
  bye() {
  return 'byebye';
  }
  // 기능변경
  say() {
    // 기능도 super로 상속받을 수 있음
    return super.say("hello");
  }
}

자 확인해보자

const ani = new Animal();
ani.say("어흥");
// 어흥
const afashs = new Human(18, 173);
afashs.age;
// 18
afashs.bye();
// byebye
afashs.say();
// hello
profile
JavaScript 개발자입니다

0개의 댓글