class(상속)

👉 상속 기능 사용하는 방법 (ES6)

• 원하는 형태로 object 만들어 사용하기 위해

✓ 다음과 같이 class를 통해 constructor 생성

	
       class Parent1 {
           constructor() {
               this.name = "Kim";
               this.sayHi1 = function() {
                   console.log('hello');
               }
           }
       }

       let child1 = new Parent1();
       console.log(child1) // Parent {name: 'Kim', sayHi: ƒ}
       // console.log(child1.sayHi1())

✓ prototype 만드는 방법

	class Parent2 {
            constructor() {
                this.name = "Park";
            }
            sayHi2() {
                console.log('hello')
            }
        }
        /**
         * constructor 밖에다가 변수 넣을 시
         * Parent2.prototype 에 추가 됨  
        */

        let child2 = new Parent2();
        console.log(child2)  // {name: 'Park'}
        // console.log(child2.sayHi2())
        console.log(Parent2.prototype) // {constructor: ƒ, sayHi2: ƒ}
        console.log(child2.__proto__)  // {constructor: ƒ, sayHi2: ƒ}

---

👉 extends를 통한 class 복사

• 비슷한 형태이지만 객체 안 데이터 수정이 필요하거나, 복사할 class가 많을 경우 사용

✓ super()를 통해 class에 있는 값들을 그대로 옮겨 올 수 있음

 // class 생성
    class GrandFather {
        constructor(name) {
            this.firstName = name;
            this.lastName = 'Park';  
        }
      //prototype, sayHi() 생성
        sayHi() {
            console.log('안녕 난 할아버지!')
        }
    }

    let grandFather1 = new GrandFather('jaehyeon');
    console.log(grandFather1) // {firstName: 'jaehyeon', lastName: 'Park'}


    class Father extends GrandFather {
        constructor(name) {
            super(name)        // super() -> GrandFather 속성 그대로 옮겨 줌
          		       //parameter도 똑같이 지정해줘야 함
            this.age = 50;
        }
        // sayHi() {
        //     console.log('안녕 난 아버지!')
        // }
    }

    let father1 = new Father('sanghun')
    console.log(father1)    // {firstName: 'sanghun', lastName: 'Park', age: 50}
    console.log(father1.sayHi())  // 부모 class prototype도 똑같이 복사되서 동작됨!!

    /**
     * 만약 Father class에도 같은 sayHi()가 선언되어 있다면
     * 가까운 prototype인 Father의 prototype을 찾아 출력한다
     */

👉 getter, setter

• object자료가 복잡하거나, 이를 수정하여 원하는 형태로 꺼내 쓰고 싶을 때

• 데이터를 조작 할 수 있는 방법을 미리 지정해 놓음으로 써 객체 데이터를 수정할 때 실수를 방지

• get, set을 사용하지 않고도 데이터를 꺼내쓰거나 수정할 수 있지만 더 직관적인 표현을 위해 get, set을 사용함

• get : 데이터 원하는 형태로 꺼내 쓸 때 사용
  (필수적으로 return 요구 됨)

• set : 데이터 변경 시
  (필수적으로 파라미터 1개만 지정해줘야 함)

✓ 일반 변수에서 사용 시

let people = {
        name : 'Park',
        age : 30,
        // 내년 나이를 계산하는 함수
        // get의 경우 필수적으로 return값  
        get nextAge() {
            return this.age + 1;
        },
        // 나이를 변경하는 함수
        // set의 경우 필수적으로 파라미터 1개만 넣어야함
        // 함수 앞에 set 붙이게 되면 호출할 때 ()생략, =으로 표기
        set setAge(targetAge) {
            this.age = parseInt(targetAge)
        }
    }

    console.log(people.nextAge)    // 31

    people.setAge = 20
    console.log(people.age)          // 20

✓ class 에서 사용 시

    class People {
        constructor() {
            this.name = 'Park';
            this.age = 20;
        }
      //prototype, 내년 나이 리턴
        get nextAge() {
            return this.age + 1;
        }
      //prototype, 나이 수정
        set setAge(targetAge) {
            this.age = parseInt(targetAge)
        }
    }

    let people1 = new People();
    console.log(people1)             // {name: 'Park', age: 20}
    console.log(people1.nextAge)     // 21

    people1.setAge = 50;            
    console.log(people1.age)         // 50