TIL(20/06/18) ES6 : class와 super in JavaScript

ES6 : class와 super in JavaScript

 

ES5에서 클래스를 만들고 상속받는 상황을 코드로 한번 보자.

var Human = function(name){
  this.name = name;
}

Human.prototype.sleep = function(){
  console.log(this.name + ' is sleeping...');
};

var steve = new Human('steve');


var Student = function(){
  Human.call(this, name); // Human.apply(this. arguments)
}

Student.prototype = Object.create(Human.prototype);
Student.prototype.constructor = Student;
Student.prototype.learn = function(){};

var john = new Student('john');
john.learn();
john.sleep(); //john is sleeping

Human과 Student라는 두 클래스가 있고, 
Human이 부모 클래스, Student는 상속을 받는 자식 클래스로 만들고 싶다.
Student의 인스턴스인 John은 learn 도 가능하고 sleep도 가능하고 싶다.
1. Human의 프로토타입을 카피해서 새로운 (객체)프로토타입을 만들어서 Student의 프로토타입에 할당한다. 
2. 그리고 constructor가 꼬이기 때문에 명확하게 Student의 constructor 명시해주기.
3. 그리고 Human이 받지 못하는 실행컨택스트를 call로 넘겨받기.

 

 

 

 

이것을 ES6의 문법으로 보자.

class Human {
  constructor(name){
    this.name = name;
  }
  sleep(){
  console.log(`${this.name} is sleeping`)
  }
}

var steve = new Human('steve');

class Student extends Human{
  constructor(name){
    super(name)
  }
  learn(){
  console.log(`${this.name} is learning`)
  }
}
var john = new Student('john');
john.learn();
john.sleep();

extends 라는 키워드로 Object.creat(부모프로토타입)과 constructor 재지정을 대체하고,

call을 super로 대체한 것이다. 

 

extends 와 super 를 잘 기억해둬야겠다.

 

 

ES6 : class와 super in JavaScript