본문 바로가기
javascript/모던 자바스크립트 Deep Dive

생성자함수 this

by yongfront 2024. 2. 2.
반응형
SMALL

자바스크립트에서 생성자 함수는 객체를 생성하기 위해 사용되는 특별한 함수입니다. 생성자 함수에서 this 키워드는 생성될 새로운 객체를 가리킵니다. 이를 통해 생성자 함수 내에서 객체의 속성과 메서드를 정의할 수 있습니다.

생성자 함수의 작동 원리

  1. 새 객체 생성: new 연산자와 함께 생성자 함수를 호출하면 자바스크립트 엔진은 먼저 새로운 빈 객체를 만듭니다.
  2. this에 바인딩: 생성된 빈 객체는 생성자 함수의 **this**에 바인딩됩니다. 이로 인해 생성자 함수 내부에서 **this**를 사용하면 새로 만들어진 객체를 가리키게 됩니다.
  3. 속성 및 메서드 추가: 생성자 함수 내에서 **this**를 사용해 새 객체에 속성과 메서드를 추가합니다.
  4. 객체 반환: 생성자 함수의 실행이 끝나면 **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