자바스크립트 함수는 재사용 가능하내 코드의 묶음으로 사용하는 것 외에 객체를 생성하기 위한 방법으로도 사용됩니다. 객체를 생성하기 위해 직접적으로 객체를 반환해도 되지만 new 키워드를 사용하여 함수를 호출하게 되면 return 문이 없어도 새로운 객체가 반환 됩니다. 이렇게 객체를 생성하는 역할을 하는 함수를 생성자 함수라고 합니다. 생성자 함수는 new 키워드를 사용하지 않으면 일반적인 함수와 동일하게 작동하기 때문에 새로운 객체를 반환하지 않습니다. 그렇기 때문에 함수명을 대문자로 시작하는 관례를 가지고 있습니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
function Teacher(name, age, subject){
this.name = name;
this.age = age;
this.subject = subject;
this.teach = function(student){
console.log(`${student} 에게 ${this.subject}를 가르칩니다.`)
// 실행 결과 'lee 에게 JavaScript를 가르칩니다.'
}
}
const kim = new Teacher('kim', 30, 'JavaScript')
console.log(kim)
kim.teach('lee')
console.log(kim.constructor)
console.log(kim instanceof teacher)
const kim2 = Teacher('kim', 30, 'JavaScript')
console.log(kim2) <-- 실행 결과 undefined
console.log(age) <-- 실행 결과 30
1 ~ 9 코드 설명
Teacher 생성자 함수를 정의합니다. 매개변수는 name, age, subject를 정의하며 전달받은 매개 변수들의 값을 this 속성으로 대입합니다. 그리고 teach 메소드를 정의합니다.
11 코드 설명
new 키워드와 함께 생성자 함수를 호출하면 생성자 함수 블록이 실행되고 별도의 return문이 없어도 새로운 객체가 반환이 됩니다. 이때 반환 되는 새로운 객체를 가리키는 것이 this 입니다.그래서 kim 변수에 반환된 객체가 할당이 됩니다. 15 ~ 16 코드 설명
모든 객체를 constructor 속성을 가집니다. 이 속성은 객체를 만든 생성자 함수를 가리킵니다. 그러므로 kim 객체의 constructor 속성은 Teacher 생성자 함수를 가리키고 콘솔에 해당 내용이 출력이 됩니다. instanceof를 사용하여 kim 객체가 Teacher 생성자 함수의 인스턴스 여부를 확인 할 수 있습니다.
18 ~ 20 코드 설명
new 키워드를 빼고 Teacher 생성자 함수를 호출 합니다. 이 때 생성자 함수의 this는 전역 객체를 가리키게 됩니다. 전역 객체에 name, age, subject 속성으로 전달받은 매개변수가 할당 됩니다. 그래서 전역 변수 age를 참조하여 콘솔에 30이 출력이 됩니다. 또 새로운 객체가 반환되지 않아 kim2는 undefined가 출력이 됩니다.