JS - class 객체지향언어

js에 class나 object가 없다면 우리가 정의한 변수들이 둥둥 떠다님
class는 연관있는 데이터를 한데 묶어놓는 container같은 아이

class person{
  name; // 속성(field)
  age; // 속성(field) 
  speak(); //행동(method)
}
//class는 연관있는 데이터들을 묶어놓은 fields와 method가 종합적으로 묶여있는 것!

class
-template // 클래스 자체에는 데이터가 들어있지 않고 틀만, 템플릿만 정의해 놓음
-declare once // 한 번만 선언
-no data in
-es6에서 추가됨- 이전엔 클래스를 정의하지 않고 바로 오브젝트를 만들 수 있었음

object // 클래스를 이용해서 실제로 데이터를 넣어서 만든 것
-instance of a class
-created many times
-data in

1. class 선언

class Person{
  //constructor
  constructor(name, age){
    //fields
    this.name = name;
    this.age = age;
  }
  
  //method
  speak(){
    console.log(`${this.name}: hello!`);
  }
}

위에 정의한 class를 이용해서 object 만들기

const ellie = new Person('ellie',20);
console.log(ellie.name);
console.log(ellie.age);
ellie.speak();
//새로운 오브젝트 만들 때는 new라는 키워드 씀 

2. Getter and Setters

class User{
  constructor(firstName, lastName, age){
    this.firstName = firstName;
    this.lastName = lastName;
    this.age = age;
  }
  
  //get이라는 키워드로 값을 리턴하고
  get age() {
    return this._age;
  }
  //age라는 getter를 정의하는 순간 this.age는 메모리에 올라가있는 데이터를 읽어오는 것이 아니라 바로 getter를 호출하게 됨 
  
  //set이라는 키워드로 값을 설정할 수 있음 - set은 값을 설정하기 때문에 value받아와야함
  set age(value){
    this._age = value;
  }
  //그리고 우리가 setter를 정의하는 순간 값을 할당할 때 바로 메모리의 값을 할당하는 것이 아니라 setter를 호출하게 됨. 
  //콜스택 초과 에러 발생 --- 
}

const user1 = new User('Steve', 'job', -1);
console.log(user1.age); // 사람의 나이가 -1 되는 것이 말이 안됨.. 
//class를 사용하는 사용자가 잘못사용해도 방어적인 자세로 만들 수 있도록 해주는 것이 getter와 setter 

++와 진짜 이해안됨 !!!!!!!!!!!!
getter setter 다시 공부

3. Field (public, private)

class Experiment {
  publicField = 2;
  #privateField = 0;
}
const experiment = new Experiment();
console.log(experiment.publicField);
console.log(experiment.privateField);
//생성자를 사용하지 않고 field를 정의할 수 있는데 
//그냥 정의하면 외부에서 접근이 가능하고 (public)
//#를 붙이면 private field인데 클래스 내부에서만 값이 보여지고 접근 가능하고 값이 변경가능하지만 클래스 외부에서는 값을 읽을수도 변경할 수도 없음 

4. Static properties and methods

static publisher = 'Dream coding';
constructor(articleNumber){
  this.articleNumber = articleNumber;
  }

static printPublisher(){
  console.log(Article.publisher);
  }
}

class 안에 있는 field와 method는 새로운 object를 만들때마다
그대로 복제되어서 값만 지정된 값으로 변경되어서 만들어지는데
간혹 이런 오브젝트에 상관없이 클래스가 가지고 있는 고유한 값과
데이터에 상관없ㄷ이 동일하게 반복적으로 사용되는 메소드가 있을 수 있는데
그런것들을 static이라는 키워드를 이용해 붙이면 object에 상관없이 class자체에 연결되어있는데 ->
static은 오브젝트마다 할당되어지는 것이 아니라 class자체에 붙어있음

5. 상속과 다양성

shape에 공통적으로 쓰이는 속성값을 extends이용하여 재사용하면 더 간편!
유지보수가 더 용이함, 문제가 있다면 shape을 수정하면 됨.

class shape {
  constructor (width, height, color){
    this.width = width;
    this.height = height;
    this.color = color;
  }
  
  draw(){
    console.log(`drawing ${this.color} color`);
  }
  
  getArea(){
    return width * this.height;
  }
}
//필드가 세개(width, height, color), 메소드가 두개(draw(),getArea()) 있음 

class Rectangle extends shape{}
//extands라는 키워드를 이용해서 shape을 바로 연장함 
//shape에서 정의한 field와 method가 자동적으로 Rectangle에 포함됨. 
class Triangle extends shape{
 	getArea(){
    	return (this.width * this.height)/2;
    }
}

const rectangle = new Rectangle(20,20,'blue');
rectangle.draw(); // drawing blue color
console.log(rectangle.getArea()); // 400출력

const triangle = new Triangle(20,20,'red');
triangle.draw(); //drawing red color
console.log(trianlge.getArea()); // 400출력
// 근데 삼각형의 넓이는 계산식이 다르잖아 ! - 다양성 이용하기 (우리가 필요한 함수만 재정의해서 사용)

6. instance of Operator

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);
//class를 이용해서 만들어진 새로운 instance
//instanceof은 왼쪽에 있는 오브젝트가 오른쪽 클래스의
//인스턴스인지 아닌지 확인하는 것 - 트루 펄스 리턴함
//shape을 상속했기 때문에 0 
// 자바스크립트에서 만든 모든 오브젝트 클래스들은 자바스크립트의 오브젝트를 상속한 것```