본문 바로가기

Javascript/Javascript초급

생성자 함수(Constructor Function)의 이해

반응형

자바스크립트는 다양한 객체 생성 방법을 제공합니다.

최신의 고급 기법인 클래스를 사용하면 되지만, 조금 더 단순하고 심플하게 함수를 클래스처럼 사용할 수 있는 방법도 제공합니다.


자바스크립트에서는 이것을 생성자 함수라고 합니다.

클래스와 마찬가지로 생성자 키워드인 new로 인스턴스를 생성할 수 있고, 내부 메서드와 변수를 사용할 수 있습니다.

함수라는 특징을 제외하면 클래스의 사용법과 많이 유사합니다.


그렇다고, 클래스처럼 상속을 통해 확장을 할 수 있거나 한 것은 아니므로 어디까지나 용도에 맞게 사용해야 합니다.


함수로 정의하지만 클래스나 객체 리터럴과 유사한 기능을 하는 생성자 함수에 대해 알아보겠습니다.

클래스에서 만들었던 견젹가를 계산하는 클래스를 생성자 함수로 구현해봅니다.



1. 함수를 하나 정의합니다. 파라메터도 넘깁니다.

클래스와 마찬가지로 함수의 첫 문자는 대문자로 합니다.


function Estimate(param){
}



2. this 키워드를 사용해 현재 함수 객체의 로컬 변수와 메서드를 생성합니다.

인스턴스로 생성할 때 함수 안의 this 키워드는 함수 인스턴스를 가리킵니다.

따라서 생성되는 변수와 메서드는 인스턴스 내부의 변수가 됩니다.


function Estimate(param){
  this.unit = param;
  this.getEstimate = function(unittypewidthheight){
      let priceinfo = this.unit.find(item=>item.type == unittype);
      return priceinfo.price*width*height
  }
}



3. 초기화 데이터를 파라메터 넘겨서 new 키워드로 함수의 인스턴스를 생성합니다.


let unitinfo = [{type: "wood"price: 100}, {type: "iron"price: 300}, {type: "plastic"price: 200}];
const estimator = new Estimate(unitinfo);



4. 메서드를 호출해 견젹가를 얻습니다.


let result = estimator.getEstimate('wood'2020);
console.log(result);



클래스로 구현하는 것보다 보기에도 이해가 쉽고, 빠르게 기능을 구현할 수 있는 장점이 있습니다.


생성자 함수는 생성자 new 키워드로 인스턴스를 생성해 사용할 수 있지만, 인스턴스를 생성하지 않고 일반 함수처럼 사용할 수도 있습니다.

3번의 생성자 키워드 new  없이


const result2 = Estimate(unitinfo);


이렇게 호출할 수 있습니다.

인스턴스 생성자 없이 호출하면 인스턴스가 반환되지 않기 때문에 result2 는 undefined 가 됩니다.

하지만 에러가 발생하지는 않습니다.

함수 호출 밑에서


console.log(unit);


을 찍어보면 함수 내부에서 선언한 unit 정보가 있는 것을 알 수 있습니다.

인스턴스를 생성하지 않으면, 함수 안의 this 키워드는 전역 객체를 가리킵니다.

즉 unit은 전역 객체로 생성된 것입니다.


마찬가지로 


getEstimate('wood'2020);


도 호출할 수 있습니다. this 키워드로 전역 함수로 설정되었기 때문입니다.


new 키워드로 인스턴스를 생성하는 것과 그렇지 않은 경우 함수 안의 this가 가리키는게 무언인지 그 차이를 꼭 알아야 합니다.



!주의할 점


생성자 키워드 new로 만든 인스턴스는 사용이 끝나면 반드시 즉시 해제를 해야 합니다.

해제를 하지 않으면 계속 메모리 영역을 차지고 있습니다. 


반응형

닫기