[Javascript] Constructor (생성자 함수)

해당 글은 모든 자바스크립트 개발자가 알아야 하는 33가지 개념에서 열다섯 번째인 new, Constructor, instanceof and Instances 항목을 공부하면서 간단하게 작성한 글이다.

 

동일한 로직을 가진 객체를 여러 개 만들 때 각 객체마다 반복해서 생성을 한다면 비효율적이다. 그래서 객체의 구조 또는 blueprint를 만들어서 재사용을 하게 되면 효율적으로 여러 개의 객체를 생성할 수 있다. 이때 사용할 수 있는 것이 Constructor 함수 (생성자 함수)이다. 

Constructor (생성자) 함수

생성자 함수는 객체를 만들어내는 역할을 한다. 객체를 return 하는 Factory 함수와 동일하게 객체를 만들어내는 역할이지만 Constructor 함수는 객체를 return 하지 않는다. Constructor 함수에서는 this 키워드를 사용해서 객체의 blueprint를 만든다. 그리고 함수의 이름은 Pascal Case를 사용한다.

function Person(name) {
    this.name = name;
}

new

Constructor 함수를 사용해서 객체를 생성할 때 사용되는 또 하나의 키워드는 바로 new 이다. new 키워드는 사용자 정의 객체 타입이나 내장 객체 타입의 인스턴스를 생성한다. 

const jjakddo = new Person('jjakddo');

위에서 만든 변수를 브라우저 콘솔에서 출력을 하게 되면, Person {name: 'jjakddo'}로 나오게 된다. 생성된 객체의 타입이 Person 이라는 의미이다.

 

그리고 new 키워드를 사용하게 되면 내부적으로 2가지 일이 발생한다. Constructor 함수에서 this라는 객체를 생성하고 this를 return 하게 된다.

function Person(name) {
    const this = {};
    this.name = name;
    return this;
}

instance

instance란 new 키워드를 이용해서 생성된 객체들을 얘기한다.

instanceof

객체의 prototype 체인 어딘가에 Constructor 함수가 존재하는지 확인하는 연산자이다. 따라서 특정 객체가 어떤 Constructor 함수로 생성되었는지 확인할 수 있다.

 

Person이라는 객체 인스턴스의 prototype 체인 안에 Constructor 함수 Person(name)과 Object()가 존재하고 있다.

const kim = new Person('kim');

kim instanceof Person; // true
kim instanceof Object; // true
kim instanceof Function; // false