객체지향 es5에서 es6로 변환

2021. 11. 11. 16:07TIL/웹퍼블리셔취업과정

728x90

기존 es5 객체지향의 불편한 점

 

1. 생성자 함수와 그에 수반되는 다양한 메서드들이 따로 떨어져 표기되어 있으므로 구조적으로 안정적이지 않음

2. 특정 생성자의 프로토타입에 메서드를 등록하기 위해서는 생성자.prototype 형식으로 일일이 지정을 해줘야 함

3. 메서드 안쪽의 this 값이 이벤트문, ajax문, each문, setTimeout문에서는 값이 변경이 되기 때문에 일일이 .bind(this)로 해당 값을 고정시켜야 함

 

ES6클래스방식으로 변환하는 순서

1. class 생성자명{} 으로 전체 코드를 묶어줌

2. 그 안쪽에 명시적으로 constructor함수를 생성

3. 해당 클래스 블럭 안쪽에 prototype에 담겨야되는 메서드를 넣어줌

4. 메서드는 생성자.prototype을 생략하고 집어넣음

5. 메서드 안쪽의 익명함수를 화살표 함수로 변경