8. 클래스 문법

1. 기존 클래스 문법이란?

ES2015 (ES6)에 소개된 문법 입니다.

class Person {
  //초기화 메소드
  constructor(name, age) {
    console.log('생성 되었습니다.')
    this.name = name;
    this.age = age;
  }
}

var seho = new Person('세호', 30); // '생성 되었습니다'라고 console에 출력됩니다.

자바스크립트의 프로토 타입이란?
- 단순히 객체정보를 확장하는 것뿐 만아니라 거기에 정의되어있는 기능들을 바로바로 객체를 생성하나 배열을 생성했을때 사용하기 위해 프로토 타입을 사용하고 있습니다.

var user = {name: 'capt', age: 100};
var admin = {name: 'capt', age: 100, role: 'admin'}; 
// 속성 중복 발생 -> 프로토 타입을 이용한 상속을 바탕으로 중복 제거

///////////////////////////////////////////
var user = {name: 'capt', age: 100};
var admin = {};
admin.__proto__ = user;
// admin.name : capt
// admin.age : 100
admin.role = 'admin' //속성 추가!

프로토 타입 활용 사례
- object에서 제공하는 메소드를 모두 사용 가능합니다.
- object는 최상위 객체이기 때문에 사용가능합니다.
- Javascript Native API

var obj = { a: 10};

//이미 객체를 생성할 때 자동으로 object객체를 상속받게 받게 됩니다.
Object.keys(obj) // 출력 : ["a"]
obj.hasOwnProperty('a'); // 출력 : true

//array도 array라는 객체를 상속받아 array에서 제공하는 메소드를 모두 사용 가능한 것입니다.
var arr = [];

클래스와 프로토 타입의 관계
- 보기 좋게, 가독성 좋게 바꾼 것입니다.
- 클래스타입을 사용하지 않아도 상속 등 다양한 기능을 이용할 수 있다는 의미합니다.

// 함수형
function Person(name, age) {
  this.name = name;
  this.age = age;
}
var cpat = new Person('캡틴', 100);

// 클래스
class Person {
  constructor(name, age) {

    this.name = name;
    this.age = age;
  }
}

2. 타입스크립트의 클래스 문법

타입스크립트 오류 발생, 최상단에 멤버변수를 다 정의해줘야 합니다.
private, public, readonly를 통해 변수범위를 지정할 수 있습니다.
- readonly : 접근만 가능하며 읽기만 가능하다. (변경 불가능)

class Persons {
  private name: string;
  public age: number;
  readonly log: string;

  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }
}