constructor function

Ayaan·2022년 4월 18일
0

함수형 프로그래밍에 집중을 하였지만 객체지향형 프로그래밍에도 관심이 생겼고 언젠가 자바를 사용해보고 싶다는 마음이 들어 찾아봤다

constructor function


영어에서 알 수 있듯이 무언가를 생성하는 함수다
일반적으로 유사한 객체를 여러개 만들기위해 사용되는 함수를 말한다

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

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

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

return이 없는데 어떻게 값이 생성되는 것일까?
생성자 함수는 함수의 첫 글자를 대문자로 작성하는 convention이 있다
그리고 이 함수 내에서 this = {}라는 객체가 암시적으로 생성되고 마지막에 return this라는 반환문도 암시적으로 생성된다

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

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

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

그렇다면 return을 생성자 함수 내에 작성한다면 어떻게 될까?
두 가지 경우로 나뉘는데

  1. 객체를 반환할 경우에는 return this가 암시적으로 생성되지 않는다
function BigUser() {

  this.name = "원숭이";

  return { name: "고릴라" };  // <-- this가 아닌 새로운 객체를 반환함
}

alert( new BigUser().name );  // 고릴라
  1. 원시형을 반환할 경우에는 return this가 암시적으로 생성된다
function SmallUser() {

  this.name = "원숭이";

  return; // <-- this를 반환함
}

alert( new SmallUser().name );  // 원숭이

📌 new.target은 생성자 함수가 new operator로 호출되었는지의 여부를 확인시켜준다

function User() {
  alert(new.target);
}
// 'new' 없이 호출함
User(); // undefined
// 'new'를 붙여 호출함
new User(); // function User { ... }

ES6에서 생긴 class로 인해 더 이상 생성자 함수는 많이 사용되지는 않는다







*References

profile
2022.04.01. 첫직장에 입사한 신입 FE개발자입니다🔥

0개의 댓글