[TIL] 생성자 함수와 This

new 연산자와 생성자 함수

객체 생성은 {...}을 사용하면 쉽게 만들 수 있지만 개발을 하다보면 유사한객체를 여러개 만들어야 할 때가 있다.
new 연산자와 생성자 함수를 사용하면 유사한 객체 여러 개를 쉽게 만들 수 있다.

• 생성자 함수(constructor function)와 일반 함수에 기술적인 차이는 없다.
• 다만 생성자 함수는 아래 두 관례를 따른다.
  • 함수 이름의 첫 글자는 대문자로 시작
  • 반드시 'new' 연산자를 붙여 실행
• 예시

function User(name) {
  this.name = name;
  this.isAdmin = false;
}

let user = new User("보라");

alert(user.name); // 보라
alert(user.isAdmin); // false

new 연산자를 사용하여 User(...) 생성자함수를 만들면 아래와 같이 동작한다.

• 빈 객체를 만들어 this에 할당
• 함수 본문을 실행, this에 새로운 프로퍼티를 추가해 this를 수정
• this를 반환

function User(name) {
  // this = {};  (빈 객체가 암시적으로 만들어짐)

  // 새로운 프로퍼티를 this에 추가함
  this.name = name;
  this.isAdmin = false;

  // return this;  (this가 암시적으로 반환됨)
}

let user = new User("보라");
//결국 아래 코드같이 동작한다.
let user = {
  name: "보라",
  isAdmin: false
};

---

this

this는 다른 대부분의 객체지향 언어에서 this는 클래스를 생성한 인스턴스 객체를 말하지만 자바스크립트에서의 this는 어디서든지 사용할 수 있다.

명시적 this 바인딩이 없는 경우 규칙

• 전역공간에서의 this는 전역객체(브라우저에서는 window, Node에서는 global)를 참조
• 어떤 함수를 메서드로서 호출한 경우 this는 메서드 호출 주체(메서드명 앞의 객체)를 참조
• 어떤 함수를 함수로서 호출한 경우 this는 전역객체를 참조한다. 메서드의 내부함수에서도 같다.
• 콜백 함수 내부에서의 this는 해당 콜백 함수의 제어권을 넘겨받은 함수가 정의한 바에 따르며, 정의하지 않는 경우에는 전역객체를 참조
• 생성자 함수에서의 this는 생성될 인스턴스를 참조

명시적 this 바인딩

• call, apply 메서드는 this를 명시적으로 지정하면서 함수 또는 메서드를 호출
• bind 메서드는 this 및 함수에 넘길 인수를 일부 지정해서 새로운 함수를 만든다.
• 요소를 순회하면서 콜백함수를 반복 호출하는 내용의 일부 메서드는 별도의 인자로 this를 받기도 한다.

---

TMI

• NodeList객체는 일반적으로 element.childNodes와 같은 속성(property)과 document.querySelectorAll 와 같은 메서드에 의해 반환되는 노드 (en-US)의 콜렉션이며, NodeList.forEach는 윈도우를 지원하지 않는다.

this 인용 : 코어자바스크립트
인용 : 코어자바스크립트