생성자 함수

BaeSeong-min·2024년 12월 13일
0

ES6 문법공부

목록 보기
2/22
post-thumbnail

📙ES6 문법공부


📌생성자 함수

객체 리터럴을 통해 객체를 만들 수 있다. 하지만, 회원이나 상품을 비롯해 여러개의 비슷한 객체를 만들어야 하는 상황에서 생성자 함수를 사용할 수 있다.


✏️객체 리터럴

객체 리터럴은 중괄호로 둘러싸여 있으며, 키와 값으로 프로퍼티를 정의한다. 객체 리터럴을 사용해 객체를 생성할 수 있다.

✏️프로퍼티

프로퍼티란 키와 값의 쌍으로 구성된 객체의 구성요소를 말한다. 일반적으로 프로퍼티를 언급할 때는 키를 뜻한다. 그리고, 메서드는 키가 메서드의 이름이며, 값이 함수인 프로퍼티라 할 수 있다.

✨생성자 함수를 사용해보자

  • 생성자 함수는 보통 첫 글자를 대문자로 한다.
  • new 연산자를 사용해서 함수를 호출한다.
  • 일일이 객체 리터럴을 쓰는 것보다, 훨씬 빠르고 일관성 있게 객체를 만들 수 있다.

✨붕어빵 틀과 같은 생성자 함수

  • 생성자 함수는 붕어빵 틀에 비유할 수 있다.
  • 생성자 함수를 호출할 때, 넣어준 인자들이 바로 재료에 비유할 수 있다.
  • 생성자 함수를 호출함으로써 만들어진 객체를 붕어빵에 빗댈 수 있다.

✨동작 방식

함수에 new라는 연산자를 붙여 실행하는 순간 다음 알고리즘과 같이 동작을 한다.

  1. 빈 객체를 만들고 this에 할당한다.
  2. this에 프로퍼티들을 추가한다.
  3. this 객체를 반환한다.

실제론 1번과 3번 동작은 코드에 없다. 자바스크립트 엔진이 내부적으로 1번과 3번 작업을 진행하기 때문이다.

✨첫글자는 대문자로 하자

어떤 함수라도 new 연산자를 붙여서 함수를 실행하면 위 알고리즘 방식으로 동작한다. 그렇기에 생성자 함수는 첫글자를 대문자로 하는게 관례이다.

💡만약 new라는 연산자를 붙이지 않고 함수호출을 한다면?

자바스크립트 엔진은 new 연산자에 의해 수행되는 특별한 작업 없이 단순히 함수로서 실행된다.

✨생성자함수에 메서드 추가

객체의 메서드 내부 코드에서 사용된 this는 해당 메서드를 호출한 객체로 바인딩된다. 이때, 바인딩된다는 말은 참조한다는 말과 같다. 따라서 아래 코드에서 this.name의 this는 sayName 메서드를 호출한 user5 객체를 참조한다.

profile
성민의 개발 블로그 🔥

0개의 댓글