728x90
반응형
class
{
속성 (fields);
행동 (methods);
}
- 청사진
- template
- delcare once
- no data in (메모리안에 안들어간다)
class를 이용해서 실제 데이터를 넣어서 새로운 인스턴스를 생성하면
object가 된다.
object
- instance of a class
- created many times
- data in (메모리안에 들어간다)
'use strict'
js파일 제일 위에 써서 모던하게 사용하자.
// class: template
// object: instance of a class
1. Class declarations
class Person {
// constructor
constructor(name, age) {
// fileds
this.name = name;
this.age = age;
}
// methods
speak() {
console.log(`${this.name}: hello!`);
}
}
const ellie = new Person('ellie', 20);
console.log(ellie.name);
console.log(ellie.age);
ellie.speak();
2. Getter and setters
내가 만든 클레스를 잘 못 사용해도 방어할 수 있도록 하기 위함
class User {
constructor(firstName, lastName, age) {
this.firstName = firstName;
this.lastName = lastName;
this.age = age;
// age라는 getter를 정의하는 순간 this.age는 메모리에 올라가있는 데이터를 읽어오는것이 아니라 get age를 호출 한다.
// setter를 정의하는 순간. age는 setter를 호출하게 된다.
// 전달된 value를 this.age에 할당할때 메모리레 값을 업데이트하는것이 아니라 setter를 다시 호출 -> 무한정 반복되서 콜스택이 닫힐 수 있다.
// 이를 방지하기 위해서 getter, setter에서 사용하는 변수의 명을 변경해줘야한다.
// 이렇게 되면 User라는 class안에는 firstName, lastName, _age 총 세개의 field가 있게 된다.
}
get age() { // 값을 리턴
return this._age;
}
set age(value) { // 값을 설정
this._age = value < 0 ? 0 : value;
}
}
const user1 = new User('Steve', 'job', -1);
console.log(user1);
3. Fields (public, private)
// Too soon!
class Experiment {
publicField = 2;
#privateField = 0;
}
const experiment = enw Experiment();
console.log(experiment.publicField);
console.log(experiment.privateField);
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 Artice(2);
console.log(article1.publisher);
console.log(Article.publisher);
Article.printPublisher();
// object에 상관업이 들어오는 데이터에 상관없이 공통적으로 class에서 쓸수있는거라면 static을 사용하는것이 메모리 사용을 줄일 수 있다.
5. 상속과 다양성
// 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(`draw ${this.color} color of`);
}
getArea() {
return this.width * this.height:
}
}
class Rectangle extneds Shape{}
class Triangle extneds Shape{
// 필요한 함수만 재 정의 가능 - 오버라이딩
draw() {
super.draw();
console.log('111');
}
getArea() {
return (this.width * this.height) / 2;
}
}
const rectangle = new Rectangle(20, 20, 'blue');
rectangle.draw();
const triangle = new Rectangle(20, 20, 'blue');
triangle.draw();
6. Class checking: instanceOf
console.log(rectangle instanceof Rectangle)
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference
https://www.youtube.com/watch?v=_DLhUBWsRtw&list=PLv2d7VI9OotTVOL4QmPfvJWPJvkmv6h-2&index=6
728x90
반응형
'typescript' 카테고리의 다른 글
자바스크립트 8. 배열 제대로 알고 쓰자. 자바스크립트 배열 개념과 APIs 총정리 (0) | 2020.06.22 |
---|---|
Typescript - class (0) | 2020.06.19 |
자바스크립트 7. 오브젝트 넌 뭐니? | 프론트엔드 개발자 입문편 (JavaScript ES6) (0) | 2020.06.17 |
자바스크립트로 공백제거(replace, trim) (0) | 2020.06.15 |
type 정보들 (0) | 2020.06.10 |
댓글