class 내에 속성(fields, property)만 있고 method 없는 경우는 데이터 class라 부른다.
1. class(틀, 자체에 데이터는 없다 => 메모리에 안올라간다.)
- template
- declare once
- no data in
2. object(객체, 인스턴스. 실제 데이터 있음 => 메모리에 올라감)
- instance of a class
- created many times
- data in
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference
참고하기
'use strict';
// Object-oriented programming(OOP)
// class: template
// object: instance of a class
// JavaScript classes
// - 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);
console.log(ellie.age);
ellie.speak();
// 2. Getters 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);
// 3. Fields (public, private)
// Too soon yet!
class Experiment {
publicField = 2;
#privateField = 0;
}
const experiment = new 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 Article(2);
console.log(article1.publisher); //undefined
console.log(Article.publisher); // 'Dream Coding'
Article.printPublisher();
// 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();
console.log('🔺')
}
getArea() {
return (this.width * this.height) / 2;
}
toString() {
return `Triangle: color ${this.color}`;
}
};
const rectangle = new Rectangle(20, 20, 'blue');
rectangle.draw();
console.log(rectangle.getArea());
const triangle = new Triangle(20, 20, 'red');
triangle.draw();
console.log(triangle.getArea());
// 6. Class checking: instanceOf
console.log(rectangle instanceof Rectangle); //true
console.log(triangle instanceof Rectangle); //false
console.log(triangle instanceof Triangle); // true
console.log(triangle instanceof Shape); // true
console.log(triangle instanceof Object); // true. 모든 클래스는 JS의 object를 상속
console.log(triangle.toString());
'개발 공부 > 자바스크립트' 카테고리의 다른 글
[엘리의 드림코딩 JS] 8. 배열(Array) (0) | 2022.12.04 |
---|---|
[엘리의 드림코딩 JS] 7. Object (0) | 2022.12.04 |
[엘리의 드림코딩 JS] 5. 함수(Function) (0) | 2022.12.04 |
[엘리의 드림코딩 JS] 4. 연산(operator) (0) | 2022.12.04 |
[엘리의 드림코딩 JS] 3. 데이터 타입, 호이스팅 (0) | 2022.12.04 |