TIL [Object.create()]

Object.create() 예제

let Human = function(name){ // Human함수 생성
  this.name = name;
}

Human.prototype.sleep = function(){}; // Human함수의 프로토 타입 메서드로 sleep을 생성
let steve = new Human('steve'); // steve라는 인스턴스 생성

let Student = function(name){ // Student함수 생성
  this.name = name;
}

Student.prototype.learn = function(){}; // Student함수의 프로토 타입 메서드로 learn 생성
let john = new Student('john'); // john이라는 인스턴스 생성
john.learn(); // 가능 -> Student의 인스턴스 o
john.sleep(); // 불가능 -> Human의 인스턴스 x

그렇다면 john.sleep()이 가능케 하려면 어떻게 해야될까? john을 Human과 Student의 인스턴스로 만들어 주려면 어떻게 해야될까?

let Student = function(name){
  Human.call(this, name);
} 

Student.prototype = Object.create(Human.prototype); // Human.prototype을 기반으로 한 객체를 Student.prototype에 할당해줘!
Student.prototype.constructor = Student; // 이걸 해줘야 된다.
Student.prototype.learn = function(){}; // 그 후에 다시 learn이라는 메서드를 Student.prototype에 추가
john instanceof Student // true
john instanceof Human // true

아주 지저분하고 딱봐도 힘들어보인다. 이러한 문법은 class를 쓰면 다 해결된다.

class Human{
  constructor(name){
    this.name = name;
  }
  sleep(){
    console.log('zzz');
  }
}

let steve = new Human('steve');

class Student extends Human{
  constructor(name){
    super();
    this.name = name;
  }
  learn(){
    console.log('공부중...');
  }
}

let john = new Student('john');
john.learn();
john.sleep();

john instanceof Human; // true
john instanceof Student // true
john.__proto__ === Student.prototype // true
john.__proto__.__proto__ === Human.prototype // true

한 눈에 봐도 훨씬 깔끔하고 간단하다. 설명에 의하면 이제 class를 더 많이 쓰는 추세이고(쉽고 간편하기 때문) 전의 예제는 쓰기도 힘들 뿐더러 사라지는 추세라고 하니 다행인 것 같다.