Object.create

 

Object.create()

Object.create(proto[, propertiesObject])

 

정의

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

 

매개변수

1. proto
   새로 만든 객체의 프로토타입이어야 할 객체.
2. propertiesObject
   선택사항. 지정되고 undefined가 아니면, 자신의 속성(즉, 자체에 정의되어 그 프로토타입 체인에서 열거가능하지 않은 속성)이열거 가능한 객체는 해당 속성명으로 새로 만든 객체에 추가될 속성 설명자(descriptor)를지정합니다. 이러한 속성은Object.defineProperties()의 두 번째 인수에 해당합니다.

 

 

MDN 문서에 따르면 Object.create()는프로토타입 객체 및 속성(optional) 을 갖는 새 객체 를 만들어준다고 정리되어있다.(출처 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);
};

 

 

현재 상태에서 console.log를 확인해보자.

 

• Rectangle 프로토타입 객체 에는 constructor 프로퍼티 를 가지고 있고,그 프로퍼티는 자신을 생성한 생성자함수 Ractangle 를 가리키고 있다.
• __ proto __ 를 확인하면,Rectangle의 프로토타입 객체의 부모 객체 인 Object 프로토타입 객체 가 나온다.

 

 

여기서 잠시, proto 를 정리하고 가자.

 [[prototype]]이 proto 와 같은거다!  

proto 혹은 [[prototype]]

• 함수를 포함한 모든 객체가 가지고 있는 인터널 슬롯이다.
• 객체의 입장에서 자신의 부모 역할을 하는 프로토타입 객체를 가리키며 함수 객체의 경우 Function.prototype를 가리킨다.

출처 Poiemaweb

 

 

현재 단계에서 Object.create()함수를 사용하면, console.log 값은 어떻게 변할까?

• Rectangle 프로토타입 객체 를 보면, {} 라고 빈 객체 가 생성되어있다.MDN이 말하던 "새 객체" 이다.
• Object.create()함수 는 인자 로 전달된 Shape 프로토타입 객체 를새로 만들어진 객체 의 프로토타입 객체 로 할당한다.그래서 프로토타입 체인을 통해 Shape 프로토타입의 Move 메소드를 사용할 수 있다.

 

여기서 중요한 사실은!

Object.create()을 사용할 경우, 새로 만들어진 객체에는 constructor 프로퍼티가 없다!!그래서 constructor 프로퍼티를 만들고, 그 프로퍼티가 자신을 생성한 함수를 가리키도록재 할당 해줘야한다.

 

(나는 '새 객체'를 설명하기 위해 재 할당을 해주지 않은 상태로 설명했다.)

2. Object.create() 없이 prototype 객체를 연결하면?

• Object.create() 없이 바로 할당하면,Rectangle의 프로토타입 객체에 Shape 프로토타입 객체가 보인다.즉, Shape 프로토타입 객체의 Move 메소드가 보인다!

 

 

 

그래서 별 문제 없지않나, Object.create()을 사용한거랑 무슨 차이일까? 라는 생각이 들었다.

• Object.create()을 사용하지 않으면,Rectangle 프로토타입 객체 의 constructor 프로퍼티 는Rectangle 생성자 함수 가 아닌 Shape 생성자 함수 를 참조한다.즉, Ractangle 생성자함수로 새로운 인스턴스를 만들게 되면,Shape 생성자함수로 새로운 객체가 만들어진다.
• 이 문제를 해결하기 위해 Rectangle 생성자함수로 재 할당 을 한다.그러면 "Shape 프로토타입 객체" 의 constructor 프로퍼티 가Shape 생성자함수 가 아닌 Rectangle 생성자함수 를 가리키게 된다.즉, Shape 생성자함수로 새로운 인스턴스를 만들면,Rectangle 생성자함수로 새로운 객체가 만들어진다.

 

정리하면,자바스크립트 언어는 상속을 통해 부모 객체의 기능을 물려받고,본인만의 새로운 기능을 추가할 수 있다.이러한 상속의 기능을 제대로 구현하기 위해서는 Object.create()를 활용 해야 한다!

 

 

 

출처:https://velog.io/@thms200/Object.create-