[자바스크립트 필기] #11 - 생성자 함수와 객체 생성

 

*이 필기는 웹 프로그래밍 튜토리얼에서 보고 작성합니다. 

 

1. Object 생성자 함수 

new 연산자와 함께 Object 생성자 함수를 호출하면 빈 객체를 생성하여 반환한다. 이후 프로퍼티와 메서드를 추가하면 객체를 완성할 수 있다. 

const person = new Object();

person.name = 'Lee';
person.sayHello = function () {
    console.log('Hello!');
};

• 생성자 함수 : new 연산자와 함께 호출하여 객체(인스턴스)를 생성하는 함수를 말한다.
• 인스턴스 : 생성자 함수에 의해 생성된 객체를 말한다. 

Object 생성자 함수 말고도 많은 생성자 함수들이 있다. 

무조건 Object 생성자 함수를 써야하는건 아니고 객체 리터럴을 쓰는 것이 더 편하다. 

 

2. 생성자 함수

하지만, 객체 리터럴로 객체를 만들게 되면 단 하나의 객체밖에 못만든다. 따라서 동일한 프로퍼티를 갖는 객체를 여러번 만들기 어렵다.

그래서 생성자 함수를 만들어서 인스턴스를 생산하는 템플릿(클래스)으로 여러 개의 구조와 동일한 인스턴스를 간편하게 생성할 수 있다. 

// 생성자 함수 
function Circle(radius) {
    // 생성자 함수 내부의 this는 생성자 함수가 만들 인스턴스를 가리킨다.
    this.radius = radius;
    this.getDiameter = function () {
        return 2 * this.radius;
    };
}

// 인스턴스의 생성
const circle1 = new Circle(5);
const circle2 = new Circle(10);

this란?

객체 자신을 참조하기 위한 변수이다. this가 가리키는 값은 동적으로 결정된다. 

함수 호출 방식	this가 가리키는 값(this 바인딩)
일반 함수로서 호출	전역 객체
메서드로서 호출	메서드를 호출한 객체
생성자 함수로서 호출	생성자 함수가 생성할 인스턴스

 

이러한 생성자 함수는 객체를 만드는 함수이다. 이러한 함수는 그냥 일반 함수와 동일한 방법으로 정의하고 그저 new 연산자와 함께 호출하면 해당 함수는 생성자 함수로서 작동하게 된다. 그러므로 당연히 new 연산자를 빼고 호출하면 일반 함수로서 작동하게 된다. 

 

모든 함수가 생성자 함수가 될 수 있는건 아니다.

함수가 호출될 때는 내부 메서드 [[Call]]이 호출된다. 그리고 new 연산자와 함께 호출되면 내부 메서드 [[Construct]]가 호출된다. 우선 호출되지 못하는 함수는 함수가 아니므로 함수는 무조건 내부 메서드 [[Call]]를 가지고 있어야한다. 

하지만, [[Construct]]가 없는 함수는 존재하는데 없는 함수는 non-constructor라 불린다. 

이러한 constructor <-> non-constructor 함수는 어떻게 구분이 될까?

자바스크립트는 단순하게 함수 정의 방식에 따라서 구분한다. 

• constructor : 함수 선언문, 함수 표현식, 클래스 
• non-constructor : 메서드, 화살표 함수 

 

여기까지 입니다 - 틀린 점이 있다면 꼭 지적해주세요!