티스토리 뷰
class
- template
- declare once
- no data in
- introduced in ES6
- syntactical sugar over prototype-based inheritance
1. class declarations
class Person {
// constructor
constructor (name, age) {
// fields
this.name = name;
this.age = age;
}
// methods
speak() {
console.log(`${this.name}: hello! `);
}
}
const ellie = new Person('ellie', 20);
console.log(ellie.name); // ellie
console.log(ellie.age); // 20
ellie.speak(); // ellie: hello!
2. Getter and setters
class User {
constructor(firstName, lastName, age) {
this.firstName = firstName;
this.lastName= lastName;
this.age= age;
}
get age() {
return this._age;
}
set age(value) {
this._age = value < 0 ? 0 : value;
}
}
const user1 = new User('Steve', 'Job', -1);
console.log(user1.age); // 0
3. Fields (public, private)
- Too soon !
class Experiment {
publicField = 2;
#privateField = 0;
}
const experiment = new Experiment();
console.log(experiment .publicField); // 2
console.log(experiment .privateField); // undefined
4. Static properties and methods
- Too soon !
class Article {
static publisher = 'Dream Coding';
constructor(articleNumber) {
this.articleNumber = articleNumber;
}
static printPublisher() {
console.log(Article.publisher);
}
}
const article1 = new Article(1);
const article2 = new Article(2);
console.log(Article.publisher); // Dream Coding
Article.printPublisher(); // Dream Coding
5. Inheritance
- a way for one class to extend another class
class Shape {
constructor (width, height, color) {
this.width = width;
this.height= height;
this.color= color;
}
draw() {
console.log(`drawing ${this.color} color!`);
}
getArea() {
return this.width * this.height;
}
}
class Rectangle extends Shape {}
class Triangle extends Shape {
draw() {
super.draw(); // drawing this.color color !
console.log('tri'); // tri
}
getArea() {
return (this.width * this.height) / 2;
}
}
const rectangle = new Rectangle(20, 20, 'blue');
rectangle.draw();
console.log(rectangle.getArea()); // 400
const triangle = new Triangle(20, 20, 'red');
triangle.draw();
console.log(triangle.getArea()); // 200
6. Class checking : instanceof
console.log(rectangle instanceof Rectangle); // t
console.log(triangle instanceof Rectangle); // f
console.log(triangle instanceof Triangle); // t
console.log(triangle instanceof Shape); // t
console.log(triangle instanceof Object); // t
console.log(triangle.toString());
Object
- instance of a class
- created many times
- data in
※출처
반응형
'JavaScript & TypeScript' 카테고리의 다른 글
7. Array, API (0) | 2020.11.14 |
---|---|
6. what is object (0) | 2020.11.14 |
4. Arrow Function (0) | 2020.11.13 |
3. operator, if, for loop (0) | 2020.11.13 |
2. data types, let vs var, hoisting (0) | 2020.11.13 |
링크
최근에 올라온 글
최근에 달린 댓글
- Total
- Today
- Yesterday
TAG
- Spring Security
- 백기선 스터디
- GCP
- JPA 연관관계 매핑
- HTTP 완벽가이드
- JS 딥다이브
- 김영한 http
- dreamcoding
- 프로그래머스 SQL
- BOJ
- 가상 면접 사례로 배우는 대규모 시스템 설계 기초
- 이펙티브자바 스터디
- java
- 킹수빈닷컴
- js array
- 이펙티브자바 아이템59
- 모던자바스크립트
- 패스트캠퍼스 컴퓨터공학 완주반
- 이펙티브자바
- 이펙티브자바 아이템60
- REST API
- 집 구하기
- 백준
- js promise
- js api
- 드림코딩
- HTTP 완벽 가이드
- 김영한 JPA
- 프로그래머스
- http
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 | 27 | 28 | 29 | 30 |
글 보관함