[JavaScript] ES6문법 - 클래스, 클래스 상속

 

 

---

 

Class

 

 ✅ 클래스의 멤버변수를 선언할 때는 키워드를 사용하지 X

 

    class Person {
      // 멤버변수 - 변수 키워드 쓰지 않음
      name = "홍길동";
      age = 20;
      state = {subject : "JS"};
    }

 

 

 ✅ 생성자는 1개이다 (생성자 중복 불가)

 ✅ 멤버변수는 선언하지 않더라도 this.변수명을 지칭하면 자동 생성

 

    //생성자는 자바스크립트에서 반드시 1개이다(중복 불가)
    constructor(addr) {
    //선언한 적 없지만 자동으로 addr이라는 멤버변수로 지칭
       this.addr = addr;
    }

 

클래스 내부에서의 함수

   //함수
   func = () => {
      console.log("func실행");
    }

 

기본 생성자가 없더라도 허용된다 (매개변수가 있는 생성자만 있어도 허용)

    //객체로 생성 - 기본 생성자 없더라도 허용 👉 constructor(){};
    let p = new Person();
    console.log(p.name); // 멤버변수 접근
    console.log(p.age);  // 멤버변수 접근
    console.log(p.state.subject);  // 멤버변수 접근
    p.func();  // 클래스 내 함수 접근

    let p2 = new Person("서울");
    console.log(p2.addr);

 

 

 

클래스 상속

 

   class Shape {
      constructor() {}    // 기본 생성자
           
      func = () => {      //func이라는 함수
         console.log("func호출");
      }
   }

 

 

위에서 생성한 클래스 Shape를 상속받는다면..?

다른 클래스를 상속받았는데 생성자를 직접 작성한다면(기본 생성자가 아니라) super로 상속받은 클래스와 연결해야 한다

 

   class Rect extends Shape {
     constructor(w, h){
        super(); //부모의 생성자 연결
        this.w = w; //멤버변수에 w 저장
        this.h = h; //멤버변수  에 h 저장
        
      //set
      setW = (w) => {
           this.w =w;
      }

      getW = () => {
           return this.w;
      }
   }

 

 

그렇다면 상속받은 클래스 내부에 있는 기능들을 사용하려면 어떻게 해야 할까?

 

   //객체 생성
   let rect = new Rect();   -- 자식 클래스 객체 생성
   lect rect = new Shape();  -- 부모 클래스 객체 생성
   rect.func();  // 물려받음

 

객체를 생성해서 객체를 참조해 상속받은 클래스에 접근할 수 있다 (기본 생성자)

부모 클래스의 객체에 직접 접근해도 되고, 상속 받은 자식 클래스로 접근해도 된다

 

 

     //객체 생성 2
     let rect2 = new Rect(10, 20);
     console.log(rect2.w);  // 10
     console.log(rect2.h);  // 20

     rect2.setW(30);  
     console.log(rect2.getW());

 

프로그래머가 직접 생성한 매개변수가 있는 생성자에 접근하기 위해서는 위와 같이 코드를 작성하면 되는데, 이 생성자는 자식 클래스에서 직접 생성한 것이기 때문에 부모 클래스와는 무관하다

 

 

제대로 알고 가자!  getter, setter 메서드 

    //set
    setW = (w) => {
        this.w =w;
    }

 

클래스 외부에서 받은 값을 w라는 이름을 가진 매개변수에 넣어주게 되면 그 값이 클래스 내부의 w라는 변수에 저장이 된다. 이로써 w라는 값이 생성되는 것이다

 

   //get
    getW = () => {
        return this.w;
    }

 

위에서 setter 메서드로 w값을 설정했기 때문에 이를 클래스 외부에서 호출할 수 있도록 해줘야 하는데 이럴 때 필요한 게 getter 메서드이다. 외부에서 받아온 값을 클래스 내부에 저장한(즉, this. w) 값을 반환하도록 하면 클래스 외부에서 그 값을 사용할 수 있게 된다