Mi Lugarcito
JavaScript - Class VS object 객체지향 언어 클래스 정리 본문
class : template/ declare once/ no data in
object : (함수도 object 이다) class를 이용해서 새로운 인스턴스를 생성하면 object가 된다.
- instance of a class
- created many times
- data in
class : 커피 자판기
number of cafe : 커피 개수 = integer
커피머신으로 뭘 하지 (property) ? 커피 개수 & 동전넣고, 커피만들고..
number of cafe = integer : 설정을 -1으로 하면 안된다(0부터 시작하니까) --> 그래서 getter and setter 사용한다 (사용자가 -1이라고 설정하면 안되니까)
사용자가 -1이라고 설정해도 setter에서 0으로 만들어주는것
다른사람이 number of cafe 설정 및 수정하는것은 안좋으니 그래서, number of cafe라는 property를 private 로 만드는것이다. = 캡슐화
getter & setter 안에서 쓰는 변수 이름을 다르게 설정해야함
get : 값을 return 하고
set : 값을 설정하기(value를 꼭 받아와야한다, 설정하는 거라서!)
static
: 클래스 안에 있는 필드와 메소드 들은 새로운 오브젝트를 만들때마다 그대로 복제되어 값만 우리가 지정된 값으로 변경되어 만들어진다.
간혹 이런 오브젝트 = 데이터와 상관없이 클래스가 가지고 있는 고유한 값과 동일하게 반복적으로 사용이 되어지는 메서드가 있을 수 있다.
static 이용시 오브젝트와 상관없이 클래스자체에 연결되어 사용가능
instance of
: 오브젝트는 클래스를 이용해서 만들어진 새로운 instance인데, 오브젝트가 해당 클래스로 만들어진것 인지 아닌지를 판단하는것(t/f 반환)
'use strict';
// Object-oriendted programming
// class : template
// object : instance of a class
// JavaScript classed
// - introduced in ES6
// - syntactical sugar over prototype-based inheritance
// 1. Classs declarations
class Person{
//constructor
constructor(name, age){
//fields(name, age)에 전달된 데이터를 바로 할당해주는 것
this.name=name;
this.age=age;
}
//methods
speak(){
console.log(`${this.name}:hello!`);
}
}
//새로운 object 만들기
const selene = new Person('selene', 20);
console.log(selene.age);
console.log(selene.name);
selene.speak();
//2. Getter and Setters
//User라는 class에는 firstName, lastName, _age라는 필드가 3개 존재한다
class User{
constructor(firstName, lastName, age){
this.firstName=firstName;
this.lastName=lastName;
this.age=age;
}
//age가 아니라 getter & setter 안에서 쓰는 변수 이름을 다르게 설정해야함
get age(){
return this._age;
}
set age(value){
// if(value<0){
// throw Error('age can not be negative');
// }
this._age=value < 0 ? 0 : value;
}
}
const user1 = new User('Steve', 'Job', -1);
console.log(user1.age);
//3. Fields (public, private)
// too soon! (사용하려면 babel 이용해야한다네..?)
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(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 of`);
}
getArea(){
return this.width * this.height;
}
}
class Rectangle extends Shape{}
class Triangle extends Shape{
//상속하기
draw(){
super.draw(); // 부모 호출 (상속)
console.log('🥰');
}
//다양성
//필요한 함수만 재 정의해서 사용가능(overriding)
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);
console.log(triangle instanceof Rectangle);
console.log(triangle instanceof Triangle);
console.log(triangle instanceof Shape);
console.log(triangle instanceof Object);//true
console.log(triangle.toString());
'JavaScript' 카테고리의 다른 글
JavaScript - Array 기초 (0) | 2021.03.28 |
---|---|
JavaScript - object (0) | 2021.03.28 |
JavaScript - Arrow Function (0) | 2021.03.27 |
JavaScript - 연산 & 반복문 & 비교연산 (==/===) (0) | 2021.03.27 |
JavaScript - DataType (let & var, hoisting) (0) | 2021.03.27 |