[TypeScript] es6 이전 자바스크립트의 클래스 선언과 prototype

자바스크립트와 클래스

es6 이후의 자바스크립트는 class 예약어를 통해 선언할 수 있습니다.

보통 웬만한 브라우저에서는 es6 문법을 지원하므로 우리는 자연스럽게 class 키워드를 통해 클래스를  선언합니다.

그러나, 과거 자바스크립트에서는 이러한 문법이 지원되지 않았기 때문에 클래스를 선언하려면

함수(function)을 사용해야 했습니다. 함수 내부의 변수를 통해 클래스의 속성(프로퍼티)를 구현하였습니다.

 

// class
var Person = /** @class */ (function () {
    function Person(name) {
        this.data = 0;
        this.name = name;
    }
    return Person;
}());

var p1 = new Person('jo');
var p2 = new Person('kim');

console.log(p1.data); // Person { data: 0, name: 'jo' }
console.log(p2.data); // Person { data: 0, name: 'kim' }

 

자바스크립트와 Prototype

사실 자바스크립트의 이러한 특성 때문에 자바스크립트에서 제공하는 여러가지 기능을 추가할 때 어떻게 개발자들에게 배포할 것인가가 큰 난제였을 것입니다.

그러나 자바스크립트 개발진은 Prototype이라는 숨김 속성을 추가하여 여러 가지 새로운 기능들을 추가했습니다.

가령 배열의 sort() 메서드 같은 것들 말이죠. 또한, 자바스크립트에서 어떤 속성을 찾을 때 그 속성이 없다면 자동으로 Prototype에 있는지 확인하는 프로세스가 존재하며 이러한 원리로 여러가지 기능들을 배포할 수 있게 되었습니다.

자바스크립트의 프로토타입(Prototype)은 아래와 같이 사용할 수 있습니다.

 

// class
var Person = /** @class */ (function () {
  function Person(name) {
    this.data = 0;
    this.name = name;
  }
  return Person;
})();

var p1 = new Person("jo");
var p2 = new Person("kim");

console.log(p1);
console.log(p2);

// Person class에 print라는 함수 추가
Person.prototype.print = function (value) {
  console.log(value);
};

p1.print("hey"); // hey
// .prototype.print 라고 호출하지 않아도 됌!

 

이제 Person 클래스에서는 print라는 함수를 사용할 수 있게 되었으며,

Person 클래스의 인스턴스에서 print 메서드를 사용할 수 있습니다.