[JavaScript] 상속 1 : Object.create()

* Object.create(proto)

 

Object.create 메소드는 지정된 프로토타입 객체 및 프로퍼티를 갖는 새로운 객체를 만들어낸다.  Object.create(proto) 메소드는 특정 객체를 프로토타입으로 하는 새로운 객체를 만들어닌다. 메소드의 파라미터(proto)로 객체를 받는데, 이 객체가 새로 생성된 객체의 프로토타입이 된다. 

 

Object.create()를 통해 자바스크립트에서 상속을 구현하는 것이 가능한데, MDN 의 예시 코드를 보면 다음과 같다.

 

function Shape() {
  this.x = 0;
  this.y = 0;
}

// 상위클래스 메서드
Shape.prototype.move = function(x, y) {
  this.x += x;
  this.y += y;
  console.info('Shape moved.');
};

// Rectangle - 하위클래스
function Rectangle() {
  Shape.call(this); // super 생성자 호출.
}

// 하위클래스는 상위클래스를 확장
Rectangle.prototype = Object.create(Shape.prototype);
Rectangle.prototype.constructor = Rectangle;

var rect = new Rectangle();

console.log('Is rect an instance of Rectangle?', rect instanceof Rectangle); // true
console.log('Is rect an instance of Shape?', rect instanceof Shape); // true
rect.move(1, 1); // Outputs, 'Shape moved.'

 

이를 그림으로 나타내면 아래와 같다.

 

먼저 상위클래스 Shape() 와 그 프로토타입 객체(Shape.P 라 기재)가 있다. 프로토타입 객체에는 move라는 메소드가 있다.

 

하위클래스 Rectangle()을 선언하고 여기에 call 을 이용해 this를 지정해준다. Rectangle과 함께 Rectangle의 프로토타입 객체도 함께 생성되었다. (Rectangle.P) 

 

 

이후, Object.create()를 이용해 Shape.prototype를 프로토타입으로 하는 새로운 객체를 만들어낸다. 편의를 위해 이를 New Shape.P F라고 한다. New Rectangle.P 는 Object.prototype(Shape.prototype)으로 만들어졌으므로 Shape.P와 __proto__로 연결되어 있다.

 

객체가 만들어지면 Rectangle.prototype 에 New Rectangle.P 객체를 할당한다. New Rectangle.P 객체에는 constructor 프로퍼티가 아직 존재하지 않는다. 따라서 이를 수동으로 보정해주어야 한다. New Shape. P 객체 안에 constructor 프로퍼티를 만들고, 이를 Rectangle() 과 이어준다. 

 

 

이제 하위클래스 Rectangle()로 인스턴스 rect를 만들어 준다. rect는 __proto__를 통해 Rectangle.prototype, 즉 New Rectangle.P와 연결되어 있다. 따라서

 

// rect.__proto__ === Rectangle.prototype

// rect.__proto__.__proto__ === Shape.prototype

 

이 된다. 상속관계가 구현된 것이다. 

 

 

*reference : MDN (https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/create)

evan's tech blog : https://evan-moon.github.io/2019/10/27/inheritance-with-prototype/

[JS 프로토타입] 프로토타입을 사용하여 상속하기