오늘은 생활코딩의 egoing님께 배운 class에 대해 포스팅 해보려고 한다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
class Person2 {
constructor(name, first, second, third) {
this.name = name;
this.first = first;
this.second = second;
this.third = third;
}
sum() {
return 'classes : ' + (this.first + this.second + this.third);
}
}
class Person2Plus extends Person2 {
avg() {
return 'average : ' + (this.first + this.second + this.third) / 3;
}
}
var kim = new Person2Plus(kim, 10, 20, 30);
var kim = new Person2Plus(kim, 10, 20, 30);
var lee = new Person2(lee, 10, 10, 10);
console.log("kim", kim.sum());
console.log("kim", kim.avg());
console.log("lee", lee.sum());
|
class는 prototype과 마찬가지로 객체를 만드는 공장이라고 생각하면 된다고 한다.
prototype은 미리 만들어 놓은 객체를 상속받아 메소드를 추가하는 방법이라고 한다면,
class는 constructor을 이용해(2번째 줄 참고) 원하는 변수들을 선언해 놓을 수 있고,
8번째 줄의 sum()과 같이 객체안의 메소드를 선언할 수 있다.
그리고, class Person2를 상속받는 다른 객체를 만들고 싶다면, class Person2Plus extends Person2 { 와 같이 extends를 이용하면 된다 !
이 extends는 function을 이용해 객체를 만들어 놓고 prototype을 이용하여 메소드를 추가하는 것과 유사하다고 생각하면 될 듯 하다 !
코드를 다시 한번 복기하면서, class에 대하여 이해해보도록 한다 !
이 포스팅을 보시는 분 중 제가 틀린 부분, 잘못 이해한 부분이 있어 알려주실만한 내용이 있다면 언제든 편하게 댓글 남겨주세요 :)
감사합니다 !
728x90
반응형
'비개발자, CPO가 되기까지' 카테고리의 다른 글
19.12.11 개발기록 -[Javascript] 화면 전환 버튼 구현하기 (0) | 2019.12.11 |
---|---|
19.12.09 개발기록 -[CSS] text가 width를 넘어가면 말 줄임표(...) 으로 표현되게 하기 (0) | 2019.12.09 |
19.12.07 개발기록 -[Javascript] Prototype를 이용한 객체 만들기 (0) | 2019.12.07 |
19.12.06 개발 기록 - [Javascript] 뉴스피드의 몇 년 전, 몇 개월, 몇 일 전, 전 몇 시간 전, 몇 분 전, 몇 초 전 만들기 (0) | 2019.12.07 |
19.12.05 개발 기록 - CSS transition (0) | 2019.12.05 |
댓글