자바스크립트 생성자 함수의 this와 prototype의 차이점과 사용법

자바스크립트에서 객체를 생성하기 위해 생성자 함수를 사용하는 경우, thisprototype은 두 가지 중요한 개념입니다. 이들은 객체지향 프로그래밍에서 중요한 역할을 수행하며, 객체의 특성과 메서드를 정의하는 데 유용합니다.

this 키워드

this는 현재 실행 컨텍스트 내부에서 참조하는 객체를 가리키는 키워드입니다. 생성자 함수 내부에서 new 키워드로 객체를 생성할 때, this는 생성된 객체를 가리킵니다. 이를 통해 생성자 함수 내부에서 객체의 프로퍼티나 메서드에 접근할 수 있습니다.

아래는 this 키워드의 사용 예시입니다.

function Car(make, model) {
  this.make = make;
  this.model = model;
  this.getMakeModel = function() {
    return this.make + ' ' + this.model;
  };
}

const myCar = new Car('Tesla', 'Model 3');
console.log(myCar.getMakeModel()); // Tesla Model 3

위 예시에서 Car 생성자 함수 안에서 this는 새로 생성된 Car 객체를 가리킵니다. getMakeModel 메서드는 this를 사용하여 makemodel 프로퍼티에 접근할 수 있습니다.

prototype

prototype은 자바스크립트 객체의 프로퍼티와 메서드를 정의하는 곳입니다. 생성자 함수를 통해 생성된 객체는 prototype 프로퍼티를 통해 공유된 메서드에 접근할 수 있습니다. 이는 메모리를 절약하고 메서드를 효율적으로 공유할 수 있게 해줍니다.

아래는 prototype의 사용 예시입니다.

function Car(make, model) {
  this.make = make;
  this.model = model;
}

Car.prototype.getMakeModel = function() {
  return this.make + ' ' + this.model;
};

const myCar = new Car('Tesla', 'Model 3');
console.log(myCar.getMakeModel()); // Tesla Model 3

위 예시에서 getMakeModel 함수는 prototype을 통해 Car 객체의 메서드로 추가되었습니다. 이를 통해 new 키워드로 생성된 객체들은 동일한 메서드를 공유하게 됩니다.

결론

this는 생성자 함수 내부에서 생성되는 객체를 가리키고, 객체의 프로퍼티와 메서드를 정의하는 데 사용됩니다. 반면에 prototype은 생성자 함수로부터 생성된 객체들에 대한 메서드를 공유하는 데 사용됩니다. 두 가지 개념을 적절히 활용하여 객체 지향 프로그래밍을 할 수 있습니다.

#JavaScript #생성자함수