[JavaScript] 생성자 함수 활용법에 대해 알아보자!

💡목표

JavaScript에서 생성자 함수의 활용법에 대해 이해한다.

생성자 함수 정의

Java, Python 등 여러 프로그래밍 언어에서 사용하는 클래스(Class)가 JavaScript에서 곧 생성자(Constructor)입니다.

JavaScript에서는 함수명의 첫 글자를 대문자로 표시하여 생성자를 정의합니다.

일반적인 클래스와 마찬가지로 생성자 함수는 필드, 함수를 포함합니다.

예시 코드

아래 예시 코드와 함께 살펴보겠습니다.

// 함수명의 첫 글자가 대문자인 경우 = 생성자 함수
function ConstructorExample(){
    // ----필드 시작----
    this.name = 'Tony';
    this.age = 20; // 멤버 변수(필드)
    // ----필드 끝----

    // ----멤버 함수 시작--- 
    this.functionA = function(){
        console.log("function A");
    }
    
    this.functionB = () =>{
        console.log("function B");
    }
    // ----멤버 함수 끝----
}

필드(field)에서는 멤버 변수 정의를 위해 this를 활용하여 변수명 앞에 입력해 줍니다.

this는 객체 자기 자신을 가리키는 문법입니다.

멤버 함수 역시 함수명 앞에 this를 붙여 정의합니다.

생성자 함수 호출의 잘못된 예시

// 생성자 함수는 함수 호출하듯이 사용하지 않음
//ConstructorExample();

생성자 함수는 일반적인 함수를 호출하듯이 사용하지 않는다는 점을 유념해 주세요.

객체 생성

// 객체 생성
let obj = new ConstructorExample();

생성자 함수를 활용하여 새로운 객체를 생성해 줍니다.

멤버 변수 호출

// 멤버 변수 호출
console.log("이름: ", obj.name);
console.log("나이: ", obj.age);

 

 

멤버 변수는 생성한 객체명 뒤에 dot(.)을 붙여주고 변수명을 입력하면 호출할 수 있습니다.

실행결과

이름:  Tony
나이:  20

멤버 함수 호출

// 멤버 함수 호출
obj.functionA();
obj.functionB();

멤버 함수 역시 생성한 객체명 뒤에 dot(.)을 붙여주고 함수명을 입력하면 호출할 수 있습니다.

실행결과

function A
function B

---

오늘은 JavaScript에서 생성자 함수의 활용법에 대해 알아봤습니다.

포스팅 내용에 오류가 있다면 아래에 댓글 남겨주세요.

그럼 오늘도 즐겁고 멋진 하루 만드시길 바랍니다.

고맙습니다 :)