[TIL]200910 BeesBeesBees

오늘은 어제 학습하고 블로깅 했던 OOP의 특성중 상속과 ES6이전에 Class를 흉내내기 위해 사용한 방법인 Pseudoclassical방법과 ES6에 추가된 문법인 class메소드를 직접 실습해봤다.

Object.create에 대해 제대로 알고있지 못했던 것

개인적인 생각으로는 Grub의 prototype을 기반으로 하는 Bee객체를 생성하기 위해 Bee생성 함수 안에

//  Grub.prototype객체를 기반으로 객체를 만들어서 Bee.prototype에 할당한다.
Bee.prototype = Object.create(Grub.prototype);
// Bee의 constructor가 Grub으로 설정된 것을 바로잡기 위해 constructor를 Bee로 설정한다.
Bee.prototype.constructor = Bee;

Object.create 메소드를 사용했는데 new 키워드를 통해 생성된 Bee의 인스턴스가 Grub에 정의된 함수인 eat()을 사용하지 못했다

그래서 위치를 Bee를 생성하는 함수 밖으로 빼내봤더니 잘 작동했다.
함수가 정의되고 Prototype Object가 생성되기 때문에 정의되지 않은 (그러니까 내부에) 메소드를 사용한 경우 제대로 연결되지 않는건가? 라는 생각이 들었는데 왜그런지는 조금 더 찾아봐야겠다.

강의를 자세하게 잘 보자

어제까지만 해도 '아! 그러니까 Object.create메소드를 쓰고 constructor만 바꿔주면 되는구나!'라고 생각했었는데

Bee를 통해 생성된 인스턴스가 Grub이랑 이어줬다고 생각해서 Grub에 있는 속성인 food를 실행해보니 찾지 못했다!

var Bee = function () {
  Grub.call(this)
  //이 Grub.call(this)를 통해서 Grub의 this가 Bee로부터 생성될 인스턴스를 가리키도록 해줘야 한다.
  this.age = 5;
  this.color = "yellow";
  this.job = "keep on growing";
};
Bee.prototype = Object.create(Grub.prototype);
Bee.prototype.constructor = Bee;

var Bee = function () {}함수 안에서 this는 Bee를 통해 생성될 인스턴스를 가리키게 된다.
그러면 Grub에서 추가해둔 food나 eat()함수는 가져오지 않고 Bee생성자 함수 안에서 추가된 속성인 age, color, job만 가지게 된다.

찾아보니 어제 분명히 강의에서 알려준 내용이었는데 내가 제대로 듣지 못했다.
좀 더 집중해서 강의를 봐야겠다.