[JavaScript] new연산자와 생성자 함수

Jin·2021년 10월 29일
0

JavaScript

목록 보기
10/12
post-thumbnail

1. 생성자 함수

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

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

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

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

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

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

모든 함수는 생성자 함수가 될 수 있다! new를 붙여 실행하면 어떤 함수라도 위에 언급된 알고리즘이 실행된다. 이름의 첫 글자가 대문자인 함수는 new를 붙여 실행해야한다.

  • 재사용할 필요가 없는 복잡한 객체를 만들때는 익명 생성자 함수로 감싸주는 방식을 이용하자.
let user = new Function() {
  this.name = 'John';
  this.admin = false;
};
  • 위 생성자 함수는 익명 함수이기에 어디에도 저장되지 않는다. 처음 만들 때부터 한번만 호출할 목적으로 만들었기에 재사용이 불가능하다.

1) 생성자와 return문

생성자 함수에는 보통 return문이 없다. 반환해야 할 것들은 모두 this에 저장되고, this는 자동으로 반환되기 때문이다.

만약 return문을 작성한다면 아래와 같은 규칙이 적용된다

  • 객체를 return한다면 this 대신 객체가 반환된다.
  • 원시형을 return한다면 return문이 무시된다.

return 뒤에 객체가 오면 생성자 함수는 해당 객체를 반환하고, 이 외의 경우는 this가 반환된다.

하지만 return문이 있는 생성자 함수는 거의 없다.

function BigUser() {
  this.name = '원숭이';
  return { name: '고릴라' }; // this가 아닌 객체 반환
}

alert( new BigUser().name ); // 고릴라

인수가 없는 생성자 함수는 괄호를 생략하고 호출 할 수 있다.

let user = new User;

2) 생성자 내 메서드

생성자 함수를 사용하면 매개변수를 이용해 객체 내부를 자유롭게 구성할 수 있다.
아래 예시에서 new User(name)는 프로퍼티 name과 메서드 sayHi를 가진 객체를 만들어준다

function User(name) {
  this.name = name;
  
  this.sayHi = function() {
    alert('my name is ' + this.name )
  };
}

let bora = new User('Bora');

bora.sayHi(); // my name is Bora

자료 출처 : https://ko.javascript.info

profile
내가 다시 볼려고 작성하는 블로그. 아직 열심히 공부중입니다 잘못된 내용이 있으면 댓글로 지적 부탁드립니다.

0개의 댓글