• 카테고리

    질문 & 답변
  • 세부 분야

    프론트엔드

  • 해결 여부

    미해결

안녕하세요 2가지 질문드립니다!

20.12.15 22:55 작성 조회수 130

0

안녕하세요 수강 중 궁금한 사항 질문드립니다~

질문1)

FormView.js 파일 아래 코드에서

import View from './View.js';

const tag = '[FormView]';

const FormView = Object.create(View); // 객체를 생성함

FormView.setup = function(el) { // el 받아서 내부적으로 속성으로 갖게할꺼임
  this.init(el)
  this.inputEl = el.querySelector('[type=text]')
  this.resetEl = el.querySelector('[type=reset]')
  this.showResetBtn(false); // 숨길꺼니깐 false로 넘겨줌
}

const FormView = Object.create(View) 로 객체?를 생성 후 여기서 this로 메서드를 추가하셨는데

혹시 그냥 View.init(el) 이런식으로 하면 안되는건지 질문드립니다! 

질문2)

View.js 에서 throw el 은 어떤 역할인건지 궁금합니다.. 

그럼 답변부탁드릴게요 감사합니당

답변 3

·

답변을 작성해보세요.

4

질문 1:

Object.create(proto)는 인자로 전달한 프로토타입과 속성을 갖는 객체를 생성하는 함수입니다. View 객체의 메소드를 FormView에 추가하려는 의도입니다. setup 합수에 this.init() 으로 View 객체의 메소드를 사용할수 있는 이유가 이것 때문이고요. 브라우져로 확인하면 FormView.__proto__ 에 View 객체가 복사되어 있는걸 확인하실 수 있습니다.

질문2:

View의 init() 함수는 el 인자를 받도록 강제하는 기법입니다. el 인자 없이 호출할 경우 바로 예외를 던져 버리는 거죠. 이 예외를 처리하기도 하고 그렇지 않으면 바로 문제의 원인을 알 수 있습니다.

0

태현님의 프로필

태현

2022.01.23

강사님, 제가 찾아보니까 차이가 있는 것 같습니다. 둘은 비슷해 보여도 인스턴스를 생성하는 것에는 치명적인 단점이 있나봐요. constructor가 망가질 수 있다고 합니다. 그래서 고안된 것이 Object.create() 라고 합니다. 
https://unikys.tistory.com/320

  • 객체(Object)에는 prototype이 있어 Map에 기본 키들이 있다. (이것은 map = Object.create(null) 를 사용하여 우회할 수 있다. )

 

또한, Object.create()를 통해 상속받으면 불필요한 상속을 받지 않아서 콘솔창에서 디버깅도 용이한 것 같더라구요, 부모 객체는 어떠한 메서드가 있는지 따로따로 확인하기도 편리하구요, 
사실, 자바스크립트 방법이 너무 많아 1가지 방법만 있었으면 좋겠지만 그마저도 차이가 존재해서 아직 부족하다는 생각이 많이 듭니다. 그런데 Object.create()를 통해서 원본 객체를 활용했다면 Vue에서는 왜 new Vue()로 인스턴스를 생성해도 DOM에 마운팅 시키는 컨셉을 지닐까요? 궁금하네요

 

0

태현님의 프로필

태현

2021.12.27

Object.create(proto)하지않고 new View()로 새로운 인스턴스 호출해서 진행하는건 다른 경우인가요?

죄송합니다. 저도 둘의 차이를 정확히 구별하지 못하겠네요 ㅜㅜ