질문있습니다!!

Question

안녕하세요, 정말 잘 보고있는 수강생입니다. 항상 좋은 강의 감사드려요~ 질문이 2가지 있어 질문해봅니다. 1. new Character()에 new연산자를 붙이는 이유 - Character()만 해도 일분이 캐릭터가 생성이 되는데 new 연산자를 붙혀주는 이유는 무엇인가요? Character() 함수에서 선언한 this.mainElem이 삭제되지 않게 하기 위해서 인가요? 2. 아래 코드에서 처럼 stage에 mainElem을 넣은 후에 mainElem.style에 left속성을 세팅해주셨는데 그렇게 하면 appendChild하는 순간 렌더링이 끝나 left속성이 반영이 안될수도 있지 않을까요? 정확히는 렌더링이 언제 되는지 궁금합니다... 감사합니다~ 좋은 강의 더 만들어주세요 응원할게요~

1분코딩 · Answer

1. new를 붙이지 않고 호출하면, 함수 내부에서 this가 가리키는 대상이 다르답니다. function Character 안에서 console.log(this)를 해보시고, new Character()로 호출할 때와 그냥 Character()로 호출할 때를 비교해보세요~ new를 붙이지 않고 호출하면, this는 전역객체 window를 가리킵니다. new 없이 호출할 경우, window에도 임의의 속성을 추가할 수 있기 때문에 일부 코드는 동작할 수 있지만, 우리가 Character 안에 미리 정의해 둔 메소드에 접근하려고 하면 window 객체는 그 메소드를 갖고있지 않기 때문에 에러가 납니다. 2. 따로 setTimeout 등의 지연 처리를 해주지 않는 이상, 시각적으로 동시에 일어난다고 생각하시면 됩니다. 답변이 늦었네요 죄송!

이민준 · Answer

제가 2번 질문에서 코드를 첨부안했네요 수정하려고 했지만 수정이 안되길래 댓글로 첨부합니다. document.querySelector('.stage').appendChild(this.mainElem); this.mainElem.style.left = info.xPos + '%';