JS (ES6 & above) - Class & Objects

■ Class

1) 정의

프로그램안에 객체로써 서로 관련이 있는 property(fields)와 method를 가지고 특정 기능을 수행할 수 있는 대상

※ dataclass : method는 없이 data property 만 가지고 있는 class

class persion{

    ...
    
    name;
    age;
    speak();
    
    ...

}

 

2) 세부 내용

(a) incapsulation : 접근가능 / 접근 불가능한 datatype으로 구분

보통 객체 메써드만으로 접근 가능한 방식으로 구현하는게 맞음

(b) 상속 : 부모의 method, property를 상속

(c) 여러가지 class( meta class 등 )이 존재

> 기본적으로 template / blueprint 와 같은 역할

> 객체 생성시 메모리에 적재 ... 이전에는(?)    

 

---

■ Javascript 에서의 Class

>  Object에서 바로 정의해서 사용하고 있었음 // 원래는 template로 function 사용

>  ES6에 도입이 처음 되었음

>  prototype-base inheritance를 겉으로 class 표기 형태로 감싼 것 ( sugar syntax... new keyword 강제성 )

>  constructor를 생성자로 사용

class Person{
  
  // constructor // python _init_, java의 constructor 등과 같은 기능
  // object를 만들 때 필요한 데이터를 전달
  constructor(name, age){
    //fields
    this.name = name;
    this.age = age;

  }

  //methods -> this가 Person참조, method라서
  speak(){
    console.log(`${this.name} : hello!`);
  }
}

 

 

■ Getter & Setters 

> 언더스코어를 써야 무한 loop 안빠질 수 있음!

 this.age = age 를 constructor에서 그대로 사용하면,
 set에서 무한loop 빠짐
 (get ,set 매써드가 hoisting되어서 계속 자기자신을 다시 stack에 올리는 형식으로 되어서..!)

// 2.Getters and setters
class User{
  constructor(firstName, lastName, age){
    this.firstName = firstName;
    this.lastName = lastName;
    this.age = age;
  }

  // getter, setter python과 동일하게 함수 -> value 표현형으로 변경

  get age(){
    return this._age; // underscore를 붙여 private 변수라고 명시해주어야 함
  }

  set age(value){
    if(value<0){
      // throw Error("age can not be neagative");
      this._age = 0 ? value < 0 : value; // 0이하는 0으로 변경
    }
    this._age = value; // _age property 업데이트 , 마찬가지로 getter-setter 사용을 위해
  }

}

const user1 = new User('Steve', 'Jobs', -1); // error throw 됨
console.log('user1 : ', user1);

 

 

■ Fields : Class, private, public (future...)

추가 참조 : ko.javascript.info/class

class Experiment {

  constructor(){}

  // class field
  publicField = "hi"; // can be property and others...
  #privateField = 3; // cannot be access outside the class
}

let exp = new Experiment(); // class는 생성을 new 키워드 없이 할 수 없음
console.log("publicField : ",exp.publicField);
console.log("privateField : ",exp.privateField); // undefined!

 

 

■ Static method / property

추가 참조 : ko.javascript.info/static-properties-methods

인스턴스에서 static method / property 접근 안됨( 파이썬과 완전 반대... 자바는 성립하는 듯? )

class Article {

  // instance에 상관 없이 반복적인 property나 method의 경우
  // 다음과 같이 class 원형에 선언하여 인스턴스가 참조하게 함
  // static 안의 this는 생성자 class를 가리킨다.
  // instance의 this는 class로 부터 나온 객체
  ////////////////
  //  instance에서 접근을 못하므로, 메모리 낭비가 적음
  ////////////////
  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);

// static은 instance에서 접근 못함
console.log("article1.publisher : ", article1.publisher); //undefined

// static은 생성자 class로 접근해야함
console.log("Article.publisher : ", Article.publisher); // Dream coding

 

 

■ 상속과 다향성

참조 : korshika.tistory.com/62 (메써드 오버라이딩)

> JS에도 상속, 메써드 오버라이딩 등 있음

> super로 부모 메써드 호출 가능

class Shape {
  constructor(width, height, color){
    this.width = width;
    this.height = height;
    this.color = color;
  }

  draw(){
    console.log(`drawing color ${this.color} !`);
  }

  getArea(){
    return this.width * this.height;
  }
}

/////////////////////////////////////////////////////

// extends 키워드로 상속
class Rectangle extends Shape{

}
const rect = new Rectangle(20, 20, 'blue');
console.log('rect 1', rect.draw());
console.log('rect 2', rect.getArea());

>>>
drawing color blue !
rect 1 undefined
rect 2 400



class Triangle extends Shape{
  // overriding
  draw(){
    super.draw(); // 부모 메써드 호출 가능
    console.log('▲');
  }
}
const tri = new Triangle(20, 20, 'red');
console.log('tri 1', tri.draw());
console.log('tri 2', tri.getArea());

>>>
drawing color red !
▲
tri 1 undefined
tri 2 400

 

 

■ instanceOf

class 상속관계 확인

> 상위 parent 여러단계여도 true

// parent - child 관계 확인
console.log(rect instanceof Rectangle);
console.log(tri instanceof Rectangle);
console.log(tri instanceof Triangle);
console.log(tri instanceof Shape);
console.log(tri instanceof Object);

>>>
true
false
true
true
true

※ 모든 JS object는

Object를 상속하였음

Object 안에 toString( ) 메써드가 존재하기 때문에 다음과 같이 overriding 할 수 있음

 

 

■ 자바스크립트 Object들 모두 확인 가능!

 

developer.mozilla.org/en-US/docs/Web/JavaScript/Reference

JavaScript reference - JavaScript | MDN

> 다음들을 확인하면 도움이 될 것!

---

참조 :

www.youtube.com/watch?v=_DLhUBWsRtw&list=PLv2d7VI9OotTVOL4QmPfvJWPJvkmv6h-2&index=8&t=24s