ES6 객체지향

1. class

class Parents {
  constructor(name) {
    this.name = name
    this.sayHi = function() { console.log('hellow')}
  }
  sayBye() {
    console.log('bye bye')
  }
}

const child = new Parents('Jeong')

const childProto = Object.getPrototypeOf(child)
console.log(childProto.sayBye())	// bye bye 출력

console.log(child)	// { name: 'Jeong' } 출력
console.log(child.sayHi())	// hellow 출력
console.log(child.sayBye())	// bye bye 출력
console.log(child.__proto__.sayBye())	// bye bye 출력

• ES6 문법으로 객체지향적으로 코딩할 때, class를 사용

• constructor(생성자)를 이용하여 속성을 만들고 파라미터 또한 삽입 가능

• constructor 밖에 함수를 생성하면, 부모의 prototype 에 생성

• proto를 대신하여
  Object.getPrototypeOf() 함수를 사용하면 직관적
  자식이 부모의 프로토타입을 불러내는 두 가지 방법 중 하나

2. class를 복사하는 extends / super

class GrandFather {
  constructor(LastName, FirstName) {
    this.LastName = LastName
    this.FirstName = FirstName
  }
}

class Father extends GrandFather {
  constructor(LastName, FirstName) {
    super(LastName, FirstName)
    this.age = 50
  }
}

const father = new Father('Kim', 'sumi')
console.log(father)	// { LastName: 'Kim', FirstName: 'sumi', age: 50 } 출력

• GrandFater 클래스를 상속한 Father 클래스를 생성

• extends를 쓰면 무조건 super() 함수를 사용하여야함

• super는 GrandFather 클래스의 constructor()와 같다

• 위 사진의 코드를 출력 시
  Father { LastName: undefined, FirstName: undefined, age: 50 }

• 물려받는 class의 constructor라는 뜻

class GrandFather {
  constructor(LastName, FirstName) {
    this.LastName = LastName
    this.FirstName = FirstName
  }
  sayHi() {
    console.log('안녕하세요')
  }
}

class Father extends GrandFather {
  constructor(LastName, FirstName) {
    super(LastName, FirstName)
    this.age = 50
  }
  sayBye() {
    console.log('잘 가용')
  }
}

const father = new Father('Kim', 'sumi')
console.log(father.sayHi())

• 부모의 prototype 또한 물려 받을 수 있다.

super의 또 다른 사용

class GrandFather {
  constructor(LastName, FirstName) {
    this.LastName = LastName
    this.FirstName = FirstName
  }
  sayHi() {
    console.log('안녕 전 할아버지예요')
  }
}

class Father extends GrandFather {
  constructor(LastName, FirstName) {
    super(LastName, FirstName)
    this.age = 50
  }
  sayHi() {
    console.log('안녕 전 아버지예요')
    super.sayHi()
  }
}

const father = new Father('Kim', 'sumi')
console.log(father.sayHi())

• super.sayHi()를 주석 처리하고 출력 시
  '안녕 전 아버지예요' 를 출력
  더 가까운 prototype를 출력

• 위 코드를 그대로 실행 시
  '안녕 전 할아버지예요'
  '안녕 전 아버지예요'
  순서대로 출력

• super는 부모 class의 prototype을 의미

• super
  • 부모 class의 constructor를 의미
  • super는 부모 class의 prototype을 의미

3. getter와 setter

getter와 setter를 사용 안 하고 했을 시

let person = {
  name : 'Park',
  age : 30,
  nextAge() {
    return this.age + 1
  },
  setAge(Age) {
    this.age = parseInt(Age)
  }
}

console.log( person.nexAge() )	// 31 출력

person.setAge(20)
console.log(person)	// 이미지 참조

• 내년의 나이를 계산하는 nexAge함수를 만듬

• 나이를 입력시 실수로 문자열로 등록하는 걸 방지하는 안전장치
  parseInt()를 사용

• getter, setter를 사용하지 않으면 함수명에 괄호() 를 붙여서 사용해야 함

• console.log(person) 출력 시, setAge함수로
  age가 30 => 20 으로 바뀐 걸 확인

getter와 setter 사용 시

class Person {
  constructor() {
    this.name = 'Park'
    this.age = 20
  }
  get nextAge() {
    return this.age + 1
  }
  set setAge(Age) {
    this.age = parseInt(Age)
  }
}

const person1 = new Person()

console.log(person1.nextAge)	// 21 출력

person1.setAge = 30
console.log(person1)	// 이미지 참조

• getter와 setter를 사용하면 괄호()를 사용하지 않아도 된다.

• getter의 법칙
  • 데이터를 꺼내 쓸 때 주로 사용함
  • return이 꼭 있어야 함
  • 파라미터가 없어야함

• setter의 법칙
  • 데이터를 변결할 때 주로 사용함
  • 파라미터는 1개만 있어야 함

- console.log(person1) 출력 시, setAge함수로 age가 20 => 30 으로 바뀐 걸 확인