반응형
SMALL
자바스크립트에서 생성자 함수는 객체를 생성하기 위해 사용되는 특별한 함수입니다. 생성자 함수에서 this 키워드는 생성될 새로운 객체를 가리킵니다. 이를 통해 생성자 함수 내에서 객체의 속성과 메서드를 정의할 수 있습니다.
생성자 함수의 작동 원리
- 새 객체 생성: new 연산자와 함께 생성자 함수를 호출하면 자바스크립트 엔진은 먼저 새로운 빈 객체를 만듭니다.
- this에 바인딩: 생성된 빈 객체는 생성자 함수의 **this**에 바인딩됩니다. 이로 인해 생성자 함수 내부에서 **this**를 사용하면 새로 만들어진 객체를 가리키게 됩니다.
- 속성 및 메서드 추가: 생성자 함수 내에서 **this**를 사용해 새 객체에 속성과 메서드를 추가합니다.
- 객체 반환: 생성자 함수의 실행이 끝나면 **this**에 바인딩된 새 객체가 반환됩니다. 별도의 반환문이 없어도 자동으로 이 객체가 반환됩니다.
예시
function Person(name, age) {
this.name = name;
this.age = age;
this.introduce = function() {
console.log(`My name is ${this.name} and I am ${this.age} years old.`);
};
}
// 'new' 키워드를 사용하여 생성자 함수를 호출하고, 새 객체를 생성합니다.
var person1 = new Person("Alice", 30);
person1.introduce(); // "My name is Alice and I am 30 years old."
주의 사항
- 반드시 new 연산자 사용: 생성자 함수는 반드시 new 연산자와 함께 호출되어야 합니다. new 없이 생성자 함수를 호출하면 **this**는 전역 객체(window 또는 global)를 가리키게 되어 예기치 않은 결과를 초래할 수 있습니다.
- 화살표 함수의 제한: 화살표 함수는 자체 this 바인딩을 가지지 않기 때문에 생성자 함수로 사용할 수 없습니다. 대신 일반 함수 선언을 사용해야 합니다.
생성자 함수와 **this**의 사용은 객체 지향 프로그래밍 패러다임에서 매우 중요한 개념입니다. 자바스크립트에서 객체를 유연하게 생성하고 관리하는 데 도움이 됩니다.
728x90
반응형
LIST
'javascript > 모던 자바스크립트 Deep Dive' 카테고리의 다른 글
렉시컬스코프와 클로저의 차이점 (0) | 2024.02.09 |
---|---|
실행 컨텍스트 ECMAScript 의 소스코드 4가지 타입 (0) | 2024.02.02 |
전역객체 (0) | 2024.02.02 |
프로토타입 체인 (0) | 2024.02.02 |
화살표 함수가 논컨스트럭터 구조인 이유와 반례 (0) | 2024.02.02 |