🎈
생성자 함수( constructor ):new연산자와 함께 호출하여 객체( 인스턴스 )를 생성하는 함수
인스턴스( instance ): 생성자 함수에 의해 생성된 객체
✔️ 객체 생성
1. 객체 리터럴
const person = {
firstName: ‘Tia’,
lastName: ‘Kim’,
fullName(){ return this.firstName + this.lastName }
};객체 리터럴로 객체를 생성하는 방식은 직관적이고 편하지만 동일한 메서드에 프로퍼티만 변경되는 경우의 객체를 여러개 생성해야 하는 경우 매번 같은 내용을 다시 기술해야 하기 때문에 비효율적인 문제점을 가지고 있다.
2. 생성자 함수
class Employee {
constructor(name, time){
this.name = name;
this.time = time;
}
work(){
console.log(this.time*5)
}
};
const Tia = new Employee('Tia', 8);
console.log(Tia)생성자 함수는 객체( 인스턴스 )를 생성하는 함수로 객체( 인스턴스 )를 생성하기 위한 탬플릿( 클래스 )처럼 생성자 함수를 사용할 수 있다. 프로퍼티 구조가 동일한 객체 여러 개를 생성자 함수를 활용하여 간편하게 생성할 수 있고, 생성자 함수 내부의 this는 생성자 함수가 생성할 인스턴스를 가리킨다.
❓this
🎈
this: 자신의 프로퍼티나 메서드를 참조하기 위한 자기 참조 변수( self-referencing variable )
this가 가리키는 값, 즉 this 바인딩은 함수 호출 방식에 따라 동적으로 결정된다. 전역에서 바인딩 되었을 경우 ‘window’를 가리키고 일부 함수로서의 호출일 경우 ’전역 객체’, 메서드로서 호출일 경우 ‘메서드를 호출한 객체( 마침표 앞의 객체 ), 생성자 함수로서 호출일 경우 ’해당 생성자 함수에 의해 생성될 인스턴스‘를 가리킨다.
✔️ 생성자 함수의 인스턴스 생성과정
생성자 함수는 인스턴스를 생성하고 생성된 인스턴스를 초기화한다.
생성자 함수( constructor )는 new 연산자와 함께 사용되어 암묵적으로 ‘인스턴스( 빈 객체 )’를 생성하고 this에 바인딩한다. 여기서 바인딩은 ’식별자와 값을 연결하는 과정‘으로 변수 선언으로 예를 들면 변수 이름(식별자)과 확보된 메모리 공간의 주소를 바인딩 하는 것 등이 있다.
빈 객체를 암묵적으로 생성한 뒤 생성된 ’인스턴스‘를 초기화한다. this에 바인딩 되어 있는 인스턴스를 초기화 하는 것인데, 이는 this에 바인딩 되어 있는 인스턴스에 프로퍼티나 메서드를 추가하고 생성하는 함수가 인수로 전달받은 초기값을 인스턴스 프로퍼티에 할당하여 초기화하거나 고정값을 할당하는 것을 의미한다.
이렇게 생성 및 초기화되어 ‘완성된 인스턴스’가 바인딩 된 this를 암묵적으로 반환한다.
생성자 함수 내부에서 return문을 사용할 경우 생성한 객체가 반환되지 않으므로 return문은 반드시 생략한다.
✔️ new 연산자
new 연산자와 함께 함수를 호출하면 해당 함수는 생성자 함수로 동작하여 [[Construct]]를 호출한다. 하지만 new 연산자 없이 생성자 함수를 호출하면 일반 함수로 동작하여 [[Call]]을 호출하고 해당 함수 내 this는 전역 객체 window를 가리키므로 주의해야 한다 !
