본문 바로가기
Development/JavaScript

Object.assign과 Object.create

by Yeony99 2022. 5. 17.
728x90

Object.create

Object.create는 기존 객체의 속성들을 상속받는 새로운 객체를 생성하기 위해 사용하는 Object 메서드.

Object.create(proto\[, propertiesObject\])

  • proto : 새로 생성할 프로토타입이 될 객체
  • propertiesObject : 새로 생성할 객체에 추가될 속성

create는 회사에서 구축한 자체 프레임워크의 오류를 수정하며 알게 됐다.
테이블의 column을 만드는 class를 상속받아 사용 중이었다.

원래 코드는 Object.assign({}, col)과 같은 식으로 적혀있었다.
그런데 자꾸 assign된 객체에서 class에 있던 메서드를 사용하지 못한다고 말하는 거다.
한참 헤메다가 새로 assign한 객체와 기존 객체(col)을 콘솔에 찍어봤더니 각각의 Prototype이 다르게 나왔다.

그래서
Object.assign({}, col) -> Object.create(col) 로 코드를 수정했더니, 기존 col의 모든 속성을 제대로 상속받는 것을 볼 수 있었다.


Object.assign

Object.assign은 target 객체에 source를 병합하는 메서드

Object.assign(target, ...sources)

let obj1 = {key1:1};
let obj2 = {key2:2};
let obj3 = {key3:3};
let result = Object.assign(obj1, obj2, obj3);

console.log(result); // {key1: 1, key2 : 2, key3: 3}

obj1이라는 target에 obj2, obj3 sourse를 병합시켰다.

결론

  • Object.create는 직접 상속 : 명시적으로 프로토타입을 지정해 새로운 객체 생성
  • prototype까지 상속받아야 하는 경우에는 assign을 사용하지 말고 create를 사용할 것.
728x90

'Development > JavaScript' 카테고리의 다른 글

자바스크립트 정규식 한글  (0) 2022.05.31
자바스크립트 현재 URL 가져오기  (0) 2022.05.30
비동기 Promise  (0) 2022.05.16
자바스크립트 호이스팅  (0) 2022.05.13
자바스크립트 DOM이란  (0) 2021.09.25

댓글