[Javascript] Object.create( ) 과 prototype chaining

앞에서 prototype 과 __proto__ 를 알아보았다.

이번엔 특정 객체와 또 다른 특정 객체의 상속관계를 자바스크립트는 어떤식으로 만들어가는지 알아보자.

[programming paradigm] Object Oriented Programming

OOP 의 기본 컨셉은 프로그램 내에서 표현하고자 하는 실 세계(real world)의 일들을 객체를 사용해서 모델링하고, 객체를 사용하지 않으면 불가능 혹은 무지 어려웠을 일들을 쉽게 처리하는 방법을 제공한다. - m..

artdev.tistory.com

cf. o.o.p 에 대해 어느정도 이해가 있어야 코드를 이해할수 있을것 같다.

var Person = function() {
  this.canTalk = true;
};

Person.prototype.greet = function() {
  if (this.canTalk) {
    console.log('Hi, I am ' + this.name);
  }
};

var Employee = function(name, title) {
  //Person.call(this);
  this.name = name;
  this.title = title;
};

person 과 employee 객체에서 상속을 사용하려면,

Employee.prototype = Object.create(Person.prototype);

mdn에서  Object.create( ) 의 역할은  지정된 프로토타입 객체 및 속성을 갖는 새 객체를 만든다. 라고 되어있으므로,

Employee 에 prototype 프로퍼티가 Person.prototype 객체를(새로 만들어진) 가리키게 된다.

그림으로 보자.

 이런식으로 된다. 하지만 constructor 까지 person으로 가져오기때문에 이부분은 다시 Employee로 바꾸어 주어야 한다.

Employee.prototype.constructor = Employee;

기본적인 자바스크립트에서 상속은 이런식으로 하게 되고 부모 객체의 프러퍼티를 사용하려면 call,appy 메서드를 사용해서 강제로 바인딩해주어 사용해야 한다.

var Employee = function(name, title) {
  Person.call(this);
  this.name = name;
  this.title = title;
};

2번째 줄처럼 call을 사용해서 person 의 프로퍼티를 사용한다.