Object.create()

Object의 create() 메소드에 대해 알아보겠다.

let newObj = Object.create(null);
newObj  //{} ==> No properties

객체를 새로 만들어주는 역할을 한다. 하지만 create를 사용하는 궁극적인 이유는 오직 객체를 만든는 것이 아닌 새로 만드는 객체의 프로토타입이어야 할 객체를 인자로 넣어 주어야 한다. 이 뜻에 대해서 정리해보자.

let newObj = Object.create({1:1});
newObj[1] === 1;//true
newObj //{}
newObj.__proto__ //{1:1}

위와 같은 형식으로 create가 역할을 하게 되는데 이는 oop를 하는 과정에서 조금 더 이해하기가 쉽다.

대표적인 MDN문서의 OOP예시를 들어볼려한다. 사실 ES6부터는 class가 나와서 편하게 oop를 진행 할 수 있으나 그 전 과정들에 대해서도 공부 할 필요성이 있다. javascript는 prototype언어 이기 때문이다. 그리고 개인적으로는 oop에 대한 이해도가 class만 사용했을 때보다 새로운 prototype개념에 대해 배워가면서 높아진 느낌이 너무 좋았다.

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;

Rectangle.prototype.__proto__ === Shape.prototype //true

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은 x,y프로퍼티를 가지고 있다. move라는 메소드도 만들어 주었다. x,y프로퍼티와 move라는 메소드를 가진 Shape을 Rectangle에 상속시키고 싶다면 위와 같이
Rectangle의 prototype에 __proto__와 Shape의 prototype을 같게 만들어야한다. 이때 Object.create를 이용해서 만들어 주면 된다 그리고 이때 Rectangel의 prototype의 constructor는 Rectangle 자체 펑션이 되어야 한다.

Object.create()를 사용한 이유

위와 같이 OOP로 프로그래밍을 하기 위해서는 Object.create()를 이용해서 상속을 시켜줘야 OOP가 된다. 이는 자바스크립트만의 기능이다.