[Javascript/자바스크립트] Day4 - new 연산자와 생성자 함수

1. 생성자 함수

 : 'new'연산자와 생성자 함수를 사용하면 유사한 객체 여러 개를 쉽게 만들 수 있따

   생성자 함수(constructor function)와 일반 함수에 기술적 차이는 없지만 아래 두 관례를 따른다

1. 함수 이름의 첫 글짜는 대문자로 시작한다.
2. 반드시 'new' 연산자를 붙여 실행한다.

[1] 생성자 함수

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

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

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

 

[2] new.target과 생성자 함수

function User() {
   alert(new.target);
}

// 'new'없이 호출함
User();	// undefined

// 'new;를 붙여 호출함
new User();	// function User {...}

================================================

function User(name) {
   if (!new.target) {
      return User(name);
   }
   this.name = name;
}

let bora = User("보라");
alert(bora.name);	// 보라

 

[3] 생성자와 return 문

    : 생성자 함수엔 보통 return 문이 없다. 반환해야 할 것들은 모두 this에 저장되고,

     this는 자동으로 반환되기 때문에 반환문을 명시적으로 써 줄 필요가 없다.

     그런데 만약 return 문이 있다면 아래와 같은 규칙이 적용됨.

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

// 1. 객체 return할 경우
function BigUser() {
   this.name = "원숭이";
   
   return { name: "고릴라"};	// this가 아닌 새로운 객체를 반환
}

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

// 2. 아무것도 return 하지 않는 경우
function SmallUser() {
   this.name = "원숭이";
   
   return;	// this를 반환
}
alert( new SmallUser().name );	// 원숭이

 

[4] 생성자 내 메서드

   : 생성자 함수 이용시, 매개변수를 이용해 객체 내부를 자유롭게 구성할 수 있다 (유연성 Up)

function User(name) {
   this.name = name;
   
   this.sayHi = function() {
      alert("제 이름은" + this.name + "입니다.");
   };
}

let bora = new User("이보라");

bora.sayHi()	// 제 이름은 이보라입니다.