[Code States] blogging IM : Object.create()

cush_wa·2020년 3월 25일
0
post-thumbnail

1. Object.create()

먼저 MDN을 통해 찾아본 Object.create()의 역할은 다음과 같이 설명하고 있다.

지정된 프로토타입 객체 및 속성(property)을 갖는 새 객체를 만듭니다.

위의 설명에 따르면 프로토타입 객체와 관련되어 있는 것이다 보니 자바스크립트에서 상속을 구현할 때 사용되고 있다.

MDN 홈페이지에서 사용된 예제를 통해 어떻게 사용되는지 확인해 보자

// Shape - 상위클래스
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);

위의 예제를 보면 Object.create() 메소드를 이용해서 Shape의 프로퍼티 객체를 Rectangle의 프로퍼티 객체에 할당해주는 것을 볼 수 있다.
그리고 이 과정을 통해서 Rectangle을 통해 생성된 인스턴스들은 Shape의 프로퍼티 객체에 들어 있는 move() 메소드를 사용할 수 있다.

그러나 여기서 주의해야할 점이 있는데, 그것은 **Object.create()**는 constructor 속성에는 아무 변화를 주지 못한다는 것이다. 그래서 MDN의 예제를 추가적으로 보면 Object.create() 메소드를 사용한 후 constructor 속성에 따로 값을 할당해주는 것을 볼 수 있다.

// 하위클래스는 상위클래스를 확장
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.'

이렇게 인스턴스를 생성할 때 사용하다 보니 아무래도 new 키워드랑은 어떤 차이가 있는지 궁금해 찾아보니 new를 통해 생성한 인스턴스의 경우 새로 생성되는 객체의 constructor 속성에도 전달되서 생성자 함수에 있는 속성들을 추가적인 과정 없이도 사용이 가능하도록 한다.

0개의 댓글