이전에 constructor와 prototype을 이용한 상속방법에 대해 알아보았는데 이것들은 오래된 문법이다. ES5 / ES6에 와서 상속기능을 구현하는 다른 문법들이 생겼다.

1. ES5 - Object.create()

var 부모 = { name: "Kim", age: 50 };
var 자식 = Object.create(부모);

console.log(자식); // {}
console.log(부모); // {name: 'Kim', age: 50}

console.log(자식.age); // 50

위 코드에서 자식이라는 오브젝트는 부모를 프로토타입으로 두게 된다.

코드 실행 결과 자식이 부모의 속성을 성공적으로 상속한 것을 확인할 수 있다.

Object.getPrototypeOf()

이 함수 안에 오브젝트를 넣으면 부모 prototype을 출력한다. 누구로부터 prototype을 상속받고 있는지 알 수 있는 것이다. 이전 글에서 설명한 __proto__키워드와 비슷한 역할이라고 생각하면 쉽다.

---

2. ES6 - class

class는 constructor를 만드는 신문법이다.

class 생성

class Student {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
}

var student1 = new Student("Kim", 20);
      
console.log(student1);

class 이름 {} 안에 constructor() {}를 넣고 생성한다.

파라미터는 constructor()소괄호 안에 넣는다.

constructor와 동일하게 new키워드를 사용하여 인스턴스를 생성한다.

class에 데이터 추가

class Student {
  constructor() {
    this.name = "Kim";
    this.age = 20;
    //1번 부분
  }
  //2번 부분
}

1번과 2번 어느 곳이든 추가할 수 있다. 하지만 자식에게 직접 값을 추가하거나, prototype에 값을 추가하는 것의 차이점이 있다.

constructor에 추가

class Student {
  constructor() {
    this.name = "Kim";
    this.age = 20;
    //1번 부분
    this.sayHi = function () {
      console.log("Hi");
    };
  }
  //2번 부분
}
var student1 = new Student();

console.log(Student.prototype);
console.log(student1);

결과

인스턴스에 직접 데이터가 추가된 것을 확인할 수 있다.

prototype에 추가

class Student {
  constructor() {
    this.name = "Kim";
    this.age = 20;
    //1번 부분
  }
  //2번 부분
  sayHi() {
    console.log("Hi");
  }
}

결과

프로토타입에 데이터가 추가된 것을 확인할 수 있다.