본문 바로가기

Web/Javascript

'new' 연산자와 생성자 함수

객체 리터럴 {...} 을 사용하면 객체를 쉽게 만들 수 있다.

그런데 개발을 하다 보면 유사한 객체를 여러 개 만들어야 할 때가 생기곤 한다.

생성자 함수

생성자 함수(constructor function)와 일반 함수에 기술적인 차이는 없다.

다만 생성자 함수는 아래 두 관례를 따른다.

  1. 함수 이름의 첫 글자는 대문자로 시작한다.
  2. 반드시 "new" 연산자를 붙여 실행한다.
function User(name) {
  this.name = name;
  this.isAdmin = false;
}

let user = new User("Jack");

alert(user.name); // Jack
alert(user.isAdmin); // false

 

new User(...)를 써서 함수를 실행하면 아래와 같은 알고리즘이 동작한다.

  1. 빈 객체를 만들어 this에 할당한다.
  2. 함수 본문을 실행한다. this에 새로운 프로퍼티를 추가해 this를 수정한다.
  3. this를 반환한다.
function User(name) {
  // this = {};  (빈 객체가 암시적으로 만들어짐)

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

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

 

이제 let user = new User("Jack")는 아래 코드를 입력한 것과 동일하게 동작한다.

let user = {
  name: "Jack",
  isAdmin: false
};

 

생성자의 의의는 재사용할 수 있는 객체 생성 코드를 구현하는 것이다.

모든 함수는 생성자 함수가 될 수 있다.

new를 붙여 실행한다면 어떤 함수라도 위에 언급된 알고리즘이 실행된다.

'Web > Javascript' 카테고리의 다른 글

메서드와 'this'  (0) 2020.05.31
참조에 의한 객체 복사  (0) 2020.05.31
객체 기초  (0) 2020.05.31
자바스크립트 기초  (0) 2020.05.22
객체지향(OOP) 프로그래밍  (0) 2018.01.17