[Deepdive] 17장 생성자 함수에 의한 객체 생성

프론트엔드/JavaScript

[Deepdive] 17장 생성자 함수에 의한 객체 생성

반신욕좋아하는J 2022. 4. 5. 20:07

객체 리터럴로 객체를 생성하는것이 일반적이나 생성자 함수로도 객체를 생성하는 방법이있다.

생성자 함수란 new 연산자와 함께 호출하여 객체를 생성하는 함수이다.

생성자 함수에의해 생성된 객체를 인스턴스라 한다.

이방법의 장단점을 알아보자

Object 생성자 함수

new Object() 함수를통해 빈객체를 생성할수있고 이후에 프로퍼티를 추가하여 객체를 완성할수있다.

물론 빈객체를 생성하지않고 프로퍼티 값을 넣을수있긴하다.

// 생성자 함수를 통해 빈객체 생성
const person = new Object();
// 빈객체에 프로퍼티들을 동적으로 추가 
person.name = "jaehyun";
person.sayHello = function () {
    console.log(`Hi My name is ${this.name}`);
};
// String 생성자 함수에 의한 객체 생성 
const strObj = new String("lee");
console.log(typeof sstrObj) // object
console.log(strObj); // String{"lee"}

// Number 생성자 함수에 의한 객체 생성 
const numObj = new Number(123);
console.log(typeof numObj); // object
console.log(numObj); // Number{123}

// boolObj 생성자 함수에 의한 객체 생성 
const boolObj = new Boolean(true);
console.log(typeof boolObj); // object
console.log(boolObj); // Boolean{true}

// Function 생성자 함수에 의한 객체 생성 
const func = new Function('x', 'return x * x');
console.log(typeof func); // Function
console.log(func); // f anonymous{x}

// Array 생성자 함수에 의한 객체 생성 
const arr = new Array(1,2,3);
console.log(typeof arr); // object
console.log(arr); // [1,2,3]

// RegExp 생성자 함수에 의한 객체 생성 
const regExp = new RegExp(/ab+c/i);
console.log(typeof regExp); // object
console.log(regExp); // /ab+c/i

// Date 생성자 함수에 의한 객체 생성 
const date = new Date();
console.log(typeof date); // object
console.log(date); // -----시간출력됨

생성자 함수

객체 리터럴에 의한 객체 생성 방식의 문제점

객체 리터럴에 의한 생성방식은 직관적이고 간편하다 다만 동일한 프로퍼티를 갖는 객체를 여러개 생성해야하는 경우 매번 같은 프로퍼티를 기술해야 하기때문에 비효율적이다.

//객체 리터럴로 객체 생성하는 방식의 문제점
const circle1 = {
  radius: 5,
  getDiameter() {
    return 2 * this.radius;
  },
};
const circle2 = {
  radius: 10,
  getDiameter() {
    return 2 * this.radius;
  },
};

위코드의 getDiameter 메서드는 완전동일하다 프로퍼티 구조가 같음에도 불구하고 같은 프로퍼티와 메서드를 기술해야되는점이 객체 리터럴이 가진 단점이다.

생성자 함수에 의한 객체 생성 방식의 장점

마치 객체를 생성하기위한 템플릿 처럼 생성자 함수를 사용해 프로퍼티가 구조가 동일한 객체를 여러개 간편하게 생성할수있다.

// 생성자 함수에 의한 객체 생성 방식의 장점 / 생성자 함수의 인스턴스 생성 과정 1~3
// 1. 생성자 함수를 선언한다
function Circle(radius) {
    // 생성자 함수 내부의 this 는 생성자 함수가 생성할 인스턴스를 가르킨다.
    // 2. 인스턴스 초기화 
    this.radius = radius;
    this.geteDiameter = function () {
        return 2 * this.radius;
    };
}
// 3. 인스턴스 생성 
const circle12 = new Circle(5); // 반지름인 5인 circle 객체를 생성 
const circle13 = new Circle(10); // 반지름인 10인 circle 객체를 생성 

console.log(circle12.geteDiameter()) // 10
console.log(circle13.geteDiameter()) // 20

생성자 함수의 인스턴스 생성 과정

위 코드의 1~3 순서대로 생성이되는데 내부코드를 보자면 this 에 프로퍼티를 추가하고 전달된 인수를 프로퍼티 초기값으로 할당해 인스턴스를 초기화 한다 이후 인스턴스를 생성하고 반환하는건 자바스크립트 엔진이 암묵적으로 처리를 하는데 new 연산자와 함게 호출해야 자바스크립트 엔진이 인스턴스를 생성하고 초기화한후 암묵적으로 인스턴스를 반환한다.

다만 명시적으로 객체를 반환하게되면 this 가 반환되지못하고 return 문에 명시된 객체가 반환되게된다.

또 명시적으로 원시값을 반환하려하면 원시값 반환은 무시가 되고 암묵적으로 this 가 반환된다.

이처럼 생성자 함수 내부에서 명시적으로 this 가 아닌 다른값을 반환하는것은 생성자 함수 의 기본동작을 훼손하기때문에 생성자 함수 내부에서 return 문을 반드시 생략해야한다.

function Circle(radius) {
  // 생성자 함수 내부의 this 는 생성자 함수가 생성할 인스턴스를 가르킨다.
  // 2. 인스턴스 초기화
  this.radius = radius;
  this.geteDiameter = function () {
    return 2 * this.radius;
  };
  // 명시적으로 객체 반환 -> this 값이 반환되지못하고 명시한 객체가 반환됨.
    return {};
    // 또는 명시적으로 원시값 반환 -> 원시값은 무시되고 암묵적으로 this 가 반환됨.
    return 100;
}
// 3. 인스턴스 생성
const circle12 = new Circle(5); 
console.log(circle12)
// 명시적으로 객체 반환했을시  -> {}
// 명시적으로 원시값을 넣었을시 -> Circle {radius : 1 , getDiameter: f}

내부 메서드 [[Call]] 과 [[Construct]]

함수는 new 연산자를 사용해 생성자 함수로 호출하여 객체를 생성할수있다.

함수는 객체 이므로 일반 객체와 동일하게 동작할 수 있다. 내부슬롯과 내부메서드를 모두 가지고있기때문

다만 함수는 객체이지만 일반객체와는 다른점이있다. 일반객체는 호출할수없지만 함수는 호출할수있다.

일반 객체가 가지고있는 내부 슬롯과 내부 메서드는 가지고있고 + 함수로 동작하기위한 함수객체 또한 추가로 가지고있다.

// 내부메서드를 이용해 함수호출
function foof() {
};
//일반적인 함수로서 호출 : [[Call]]이 호출된다.
foo(); 
// 생성자 함수로서 호출 :  [[Construct]] 가 호출된다.
new foo();

내부 메서드 [[Call]] 을 갖는 함수 객체를 callabel 라고하며

내부 메서드 [[Construct]] 를 갖는 함수를 constructor 라고한다.

갖고있지않은경우는 non-constructor 라 하는데 모든 함수 객체가 [[Construct]]를 갖는것은 아니다

자바스크립트 엔진은 함수 정의를 평가하여 함수 객체를 생성할때 함수 정의 방식에 따라 이 둘을 구분한다.

constructor : 일반함수 , 생성자 함수로서 호출할수있는 객체
- 함수 선언문 , 함수 표현식 , 클래스
non-constructor : 일반 함수로서만 호출할수있는 객체
- 메서드(ES6 메서드 축약 표현), 화살표 함수

// constructor 와 non-constructor 구분

//constructor 
// 일반 함수 정의 : 선언문, 표현식 
function foo() { }
const bar = function () { };
//프로퍼티 x 의 값으로 할당된 것은 일반 함수로 정의된 함수이다 -> 메서드로 인정하지않음
const baz = {
    x : function () {}
}

//일반 함수로 정의된 함수만이 constructor 이다.
new foo(); // foo {}
new bar(); // bar {}
new baz.x(); // x {}

//non-constructor
//화살표 함수 
const arrow = () => { };
new arrow(); // TypeError 
//메서드 정의 ES6이후 축약표현만 메서드로 인정함
const obj = {
    x() { }
};
new obj.x(); // TypeError

일반함수 를 호출할때는 [[Call]] 이 호출된다 이건 모든함수 객체면 구현이되있지만

생성자 함수를 호출할때는 [[Construct]] 이 호출되기때문에 가지고있지않은 non-constructor 은 에러가 발생하게된다.

New 연산자

일반 함수와 생성자 함수에는 특별한 형식적 차이는 없다 .따라서 생성자 함수는 일반적으로 첫 문자를 대문자로 기술하는 파스칼 케이스로 작성하여 일반 함수와 구별할수있도록 해야한다. 다만 new 연산자와 함께 호출하면 해당함수는 생성자 함수로 동작을 하게된다. 함수 객체의 내부 메서드 [[Construct]] 이 호출하게 된다.

단 new 연산자와 함께 호출하는 함수는 Non-constructor 가 아닌 constructor 이어야한다.

반대로 new 연산자 없이 생성자 함수를 호출하면 일반함수 로 동작되고 함수객체 내부메서드 [[Call]] 이 호출된다.

// new 연산자 일반함수 > new 연산자를 사용해 호출 
// 일반함수 
function add(x, y) {
    return x + y;
}
// 일반함수를 new 연산자와 함께 호출 
let inst = new add();
// 함수 객체가 반환되지 않아 반환문이 무시되고 , 빈객체가 생성되 반환된다
consone.log(inst); //  {}

//객체를 반환하는 일반 함수 
function createUser(name, role) {
    return { name, role };
}
// 일반 함수를 new 연산자와 함께 호출
inst = new createUser('lee', 'admin');
// 함수가 생성된 객체를 반환한다.
console.log(inst); // {name: "lee", role:"admin"}

// new 연산자 없이 생성자 함수를 호출 
function Circle(radius) {
    this.radius = radius;
    this.geteDiameter = function () {
        return 2 * this.radius;
    };
}
// new 연산자 없이 생성자 함수를 호출하면 일반 함수로서 호출된다.
const circle = Circle(5); 
console.log(circle) // undefined

// 일반 함수 내부의 this 는 전역 객체 window 를 가르킨다.
console.log(radius); //5
console.log(getDiameter()) //10;

circle.getDiameter(); // TypeError

new.target

생성자 함수가 new 연산자 없이 호출되는것을 방지하기 위해 파스칼 케이스를 사용한다해도 실수는 언제나 발생할수있다. ES6 는 이런 위험을 제거하기위해 new.target을 지원한다.

new.target 은 this 와 유사하게 constructor 인 모든 함수 내부에서 암묵적으로 지역변수와 같이 사용되며 메타 프로퍼티라고 부른다.

함수 내부에서 new.target 를 사용하면 new 연산자와 함께 생성자 함수로 호출되었는지 확인할수있다.

new 연산자와 함께 생성자 함수로서 호출되면 함수내부의 new.target 은 함수 자신을 가리킨다. new 연산자 없이 일반함수로 호출된 함수내부의 new.target 은 undefined이다.

// ## new.target 을 사용하는 방법 
// 생성자 함수 
function Circle(radius) {
    // 이함수가 new 연산자와 함께 호출되지 않았다면 new.target 은 undefined이다.
    // 즉 false 기 때문에 해당 if 문이 실행된다.
    if (!new.target) {
        // new 연산자와 함께 생성자 함수를 재귀 호출하여 생성된 인스턴스를 반환한다.
        return new Circle(radius);
    }
    this.radius = radius;
    this.getDiameter = function () {
        return 2 * this.radius;
    };
}
// new 연산자 없이 생성자 함수를 호출하여도 new.target을 통해 생성자 함수로서 호출된다.
const circle = Circle(5);

스코프 세이프 생성자 패턴

// ## 스코프 세이프 생성자 패턴 Scope-Safe Constructor Pattern
function Circle(radius) {
  // 생성자 함수가 new 연산자와 함께 호출되면 함수의 선두에 빈 객체를 생성하고 
  // this에 바인딩 한다. 이때 this 와 Circle 은 프로토타입에 의해 연결된다.
  // new 연산자와 함께 호출되지않는다면 this 는 전역객체인 window를 가르키게되고 
  // this 와 Circle은 프로토타입에 의해 연결되지않는다 이점을 이용해 사용한다.
  if (!(this instanceof Circle)) {
    // new 연산자와 함께 생성자 함수를 재귀 호출하여 생성된 인스턴스를 반환한다.
    return new Circle(radius);
  }
  this.radius = radius;
  this.getDiameter = function () {
    return 2 * this.radius;
  };
}
// new 연산자 없이 생성자 함수를 호출하여도 생성자 함수로서 호출된다.
const circle = Circle(5);

빌트인 함수의 생성자 함수

대부분의 빌트인 생성자 함수는 new 연산자와 함께 호출되었는지 확인후 적절한 값을 반환하게된다.

object 와 function 은 new 연산자 없이 호출해도 new 연산자와 함께 호출했을대랑 동일하게 동작한다.

그에 반해 String , Number, Boolean 생성자 함수는 new 연산자와 함께 호출했을때는 객체를 생성하여 반환하지만 new 연산자 없이 호출하게되면 문자열 , 숫자 , 불리언 값을 반환하게된다. 이를통해 테이터 타입을 변환하기도 한다.

저작자표시 (새창열림)