생성자 함수 (constructor function) 정리

1) 생성자 함수 왜 사용할까?

자바스크립트 함수는 재사용 가능한 코드를 묶음으로 사용하는 것 외에 객체를 생성 하기 위한 방법으로도 사용된다.

객체를 생성하기 위해서는 직접 객체를 반환해도 되지만, new 키워드를 사용하여 함수를 호출하게되면 return 문이 없어도 새로운 객체를 반환 시킨다. 

=>즉 객체를 쉽게 생성하기 위해 사용한다.

ex)

 

function Person(name, age) {
    this.name = name;
    this.age = age;
}

const chae = new Person('chaeminseok', 25);
const kim = new Person('kimminjae', 30);
console.log(chae);//Person {name: 'chaeminseok', age: 25}
console.log(kim);//Person {name: 'kimminjae', age: 30}

다음과 같이 서로 다른 객체를 반환한다.

 

2) 생성자함수의 특징

1. 함수명을 대문자로 시작한다.

• 다른함수들과 구분짓기 위해서

2. 화살표 함수로 생성자함수를  만들 수 없다.

• 생성자함수를 화살표함수로 만들경우 다음과 같은 에러가 발생한다. Uncaught TypeError: Person is not a constructor

3. new 키워드를 사용한다.

• 생성자 함수 는 new 키워드를 사용하지 않으면 일반적인 함수와 동일하게 동작하여 새로운 객체를 반환하지 않는다

4. this가 인스턴스를 가리킨다. 

• 일반함수는 this가 window를 가리키지만 생성자 함수는 해당 객체(인스턴스를 )의미한다.
• ex)

//일반함수
function people(){
	console.log(this);//Window {window: Window, self: Window, document:...}윈도우 객체 반환
    //Strict 모드시 undefined 
}

//생성자 함수 
function Person(name, age) {
    this.name = name;
    this.age = age;
    console.log(this);
}

const chae = new Person('chaeminseok', 25);//Person {name: 'chaeminseok', age: 25}
const kim = new Person('kimminjae', 30);//Person {name: 'kimminjae', age: 30} 각각의 인스턴스반환