[JS]ES6에 들어간 Class : 이전엔 prototype

ES6에 들어간 class 를 확인해 보려고 한다.

※이 자료는 생활코딩의 영상을 보고 개인이 작성한 글입니다.(업데이트 : 2023.09.16)

 

ES6이전와 이후로 코딩 작성 방법을 비교해보면 좋을꺼 같다.

ES6 이전	ES6 이후
prototype	class

 

ES6 이전 : prototype

역시나 tistoryd에서 제공하는 '코드블럭' 기능이 안되서 사진을 활용하겠다.

 

A : console.log('kim.sum()', kim.sum());

1. New를 통해 새로운 객체 및 속성값 기본 세팅(name, first, second)을 한다

2. kim.sum을 통해서 sum이라는 method를 호출 한다. 여기 있는 kim object에서 sum이라는 method를 호출할때, 제일 먼저 그 객체 자신이 sum이라는 property를 가지고 있는 확인한다.--> 핑크색 박스

3. 핑크색 박스의 sum 함수를 통해 계산하고 결과를 도출한다.

 

B : console.log('lee.sum()', lee.sum());

1. New를 통해 새로운 객체 및 속성값 기존 세팅(name, first, second)을 한다

2. lee.sum을 통해서 sum이라는 method를 호출 한다. 자신/자체적으로 가지고 있는 함수가 없기때문에 lee object 생선자인 person에서 함수를 확인한다.--> 하늘색 박스

3. 하늘색 박스의 sum 함수를 통해  계산하고 결과를 도출한다.

 

핑크색 박스처럼 Person.pototype.sum을  function Person 박으로 빼는 이유는 2가지 측면이 있다.

1. Memory 사용 감소. 호출을 할때마다 function을 계속 돌려야 하기 때문에

2. 개별 수정이 가능하기 때문에.

 

 

---

 

ES6 이후 : class

class 코드블록 안에 constructor을 넣고 'function'이라는 키워드를 생략하여 작성한다.

 

코드가 실행되는 순서

 

 

 

 

결과값

왼쪽 하단을 보면

--> kim.sum() this : 30

--> lee.sum() prototype : 20