모던 자바스크립트 Deep Dive - 17장

박상은·2021년 9월 30일
0

요약

1. 생성자 함수

생성자 함수를 사용하는 이유는 객체지향프로그래밍에서 class를 정의해서 객체를 찍어내는 이유와 동일하다고 생각한다.
객체의 틀인 생성자함수를 한번 정의해두면 손쉽게 여러 객체들을 생성할 수 있다.

function Person(name){
  this.name = name;
  this.say = function () {
    console.log("Hello, ", this.name);
  }
}

const p1 = new Person();
const p2 = new Person();
// ... 이런식으로 쉽게 객체를 생성할 수 있다.

1.1 생성자 함수의 인스턴스 생성 과정

위의 Person()을 예시로 사용하겠다.

function Person(name){
  const this = {};	// 1
  
  // 2
  this.name = name;
  this.say = function () {
    console.log("Hello, ", this.name);
  }
  
  // 만약 다른 리턴문이 존재한다면 객체일 경우 그것을 반환하고, 객체가 아니면 무시하고 this를 반환한다.
  return this;		// 3
}

new를 이용해서 함수 호출시 일어나는 일
1. this가 빈 객체로 생성되며, this에 바인딩됨
2. this에 바딘딩되어 있는 인스턴스를 초기화함
3. this를 반환함

1.2 함수의 내부 메서드와 슬롯

자바스크립트에서 함수는 객체이다.
하지만 함수는 객체와는 다르게 "호출"이 가능하다.
그 이유는 함수는 특별한 내부 슬롯과 메서드를 가지기 때문이다.

  • 내부 슬롯
    1. [[Environment]]
    2. [[FrmalParameters]]

  • 내부 메서드
    1. [[Call]] : 일반 함수호출시 사용되는 메서드
    2. [[Construct]] : 생성자함수로 호출시 사용되는 메서드 즉, new를 이용한 호출

여기서 알아둬야할점은 모든 함수는 [[Call]]는 가지지만 [[Construct]]는 안가질 수 있다.
즉, 모든 함수는 일반 함수로서 호출이 가능하지만, 생성자함수로서 항상 사용가능한것은 아니다라는 점이다.

그렇다면 [[Construct]]를 가지지 않는 함수는 어떤것인지 알아보자
1. 화살표함수
2. ES6 메서드 축약 표현
위 두가지로 함수를 정의하는 경우에는 [[Construct]]를 가지지않으므로 new를 이용한 생성자 함수로 호출이 불가능하다. ( 만약 생성자함수로 호출시 에러발생

마무리

  • 생성자 함수는 관습적으로 첫 글자를 대문자로 표기한다.
  • new.target을 이용해서 생성자함수로서의 호출인지 확인이 가능하다.

0개의 댓글