본문 바로가기
Typescript

class, factory function, prototype

by 루에 2022. 1. 3.
반응형

type alias로 타입을 지정하는 방법도 있지만, 실제로 javascript에서 지원하는 방법은 아니기 때문에 js로 컴파일 될 때 type은 날아간다. 이를 방지하기 위해서는 class를 이용해 object를 만드는 방법이 있다.

 

class 혹은 factory function으로 instance를 만들어 사용할 수 있도록 할 수 있다.

개념적으로는 일반적인 java나 kotlin의 class와 비슷하지만, 어디까지나 데이터 혹은 prototype에 등록하여 사용할 함수를 위한 목적이 강하다. factory function은 class 키워드가 도입되기 전에 사용했던 문법으로 기능적으로는 비슷하지만 자세히 들여다보면 같은 기능임에도 조금 차이가 나긴한다. 어느 문서에 따르면 class가 메모리 측면에서는 유리하고 factory function이 특정 상황에서 보안적으로 나을 수 있다고 한다.

 

factory function

fucntion OldObject(param1: string, param2: number) {
    this.param1 = param1;
    this.param2 = param2;
}
let oldObj = new OldObj("파람1", 1);

위 코드를 class object로 선언하면 아래처럼 constructor() 안에서 선언하게 되고, 변수도 미리 선언해야 한다.

class NewObjectClass {
    a: String;
    b: number;
    constructor(a: String, b: number) {
        this.a = a;
        this.b = b;
    }
}
let newObj = new NewObjectClass("new", 2);

 

prototype 문법을 이용해서 자식 객체가 가지지 않은 데이터나 함수를 사용하도록 할 수도 있다. prototype은 object의 원형으로써, 내 부모 객체가 가진 모든 데이터와 함수를 포함한다.

 

아래처럼 NewObjectClass에 aa() 라는 함수를 추가하고 newObj에 새로운 객체(자식객체)로 선언하고 콘솔로 출력해보았다.

class NewObjectClass {
    a: String;
    b: number;
    constructor(a: String, b: number) {
        this.a = a;
        this.b = b;
    }
    aa() {}
}

let newObj = new NewObjectClass("new", 2);

콘솔로 출력한 newObj

prototype이란 object가 있고 그 안에 aa()가 있는 것을 확인할 수 있다.

 

 

반응형

댓글