클래스

//ES2015(ES6) 문법
class Person{
    //클래스 로직
    constructor(name, age) { //초기화
        console.log('생성 되었습니다')
        this.name = name;
        this.age = age
    }
}

var seho = new Person('세호', 30);//생성 되었습니다.
console.log(seho)

 

• ES6 이상부터 사용 가능한 문법이다.
• constructor를 사용하면, 초기화 함수를 사용할 수 있다.

자바스크립트 프로토타입

https://developer.mozilla.org/ko/docs/Learn/JavaScript/Objects/Object_prototypes

Object prototypes - Web 개발 학습하기 | MDN

Chrome Console 텝 테스트

var user = {name: 'capt', age:100}
var admin = {}
admin.__proto__ = user
admin //admin 찍어보기
admin.role = 'admin' //어드민 프로퍼티 추가
admin //admin 찍어보기

프로토 타입 이해

• 프로토 타입은 console에서 __proto__ 로 접근할 수 있다.
• 함수를 정의하면 다른 곳에 생성되는 프로토 타입 객체는 자신이 다른 객체의 원형이 되는 객체로 모든 객체는 프로토 타입 객체에 접근할 수 있다.

자바스크립트 프로토타입의 활용 사래

chrome 콘솔 테스트

• 기본적으로 객체를 생성하게 되면 Object라는 프로토타입을 상속받아 사용하며, Object에서 제공하는 API를 사용할 수 있는 것이다.

프로토타입과 클래스와의 관계

function Person(name, age){ //기존의 function으로 사용하던 것을 class 로 변경한 것일 뿐이다.
    this.name = name
    this.age = age
}
var capt = new Person('캡틴', 100) //이러한 생성자 함수는 기본적으로 function으로 구현할 수 있지만, 좀 더 쉽게 사용하기위해 class 라는 것을 사용한 것 뿐이다.

• 이전에 class로 작성한 로직을 function을 사용해서도 똑같이 구현할 수 있다.
• 단, 이전 객체지향 개발자들의 편의성(class를 사용)을 제공하기 위해 ES6이후부터 자바 스크립트에서도 class 문법을 제공한 것일 뿐이다.

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

class Person{
    private name: string; //변수의 접근 범위도 정의 할 수 있다
    public age: number;
    readonly log: string //읽기만 가능한 범위
    //리액트나, 뷰와 같은 프레임 워크도 최근에는 클래스 기반이 아닌 function 기반으로 작성한다
    constructor(name: string, age:number ) { //생성자로 들어오는 파라미터를 타입 제약을 할 수 있다
        //타입 스크립트에서는 프로퍼티가 없으면, 사용할 수 없다
        this.name = name
        this.age = age
    }
}

• 생성자로 받는 파라미터의 타입 제약이 가능하다.
• 생성자에서 더 이상 프로퍼티에 없는 값을 넣을 수 없다. -> 선언이 되어 있어야 한다.
• 프로퍼티의 접근 범위 또한 정의할 수 있다.
• 최신 리액트, 뷰와 같은 프레임 워크는 클래스 기반보다 function 기반 함수형으로 많이 작성하도록 변경되고 있기에 자주 사용되지는 않는다.