CH05. 클래스

🥝prototype

: 각각의 속성이나 메소드들은 기본적으로 프로토타입 속성에 연결되어있음

• 메소드 등록하기

const tbz = new Array['ksw', 'jcm', 'kyh'] //tbz는 생성자 함수에서 반환된 하나의 인스턴스
Array.prototype.mem = function () {    //일반함수 사용
  console.log(this)
}

tbz.mem()

실행결과: (3)['ksw', 'jcm', 'kyh']

• 메소드 만들고 같은 구조의 여러 객체에서 활용 가능

function User(first, last) {   //파스칼 케이스(대문자로 시작)로 작성
  this.firstName = first
  this.lastName = last
}
User.prototype.getFullName = function() { //this정의가 달라지기 때문에 화살표함수 사용불가
  return `${this.firstName} ${this.lastName}`
}

const ksw = new User('sw','k')   //생성자함수

console.log(ksw)
console.log(ksw.getFullName())

실행결과:
User {firstName:'sw', lastName: 'k'}
sw k

🥝ES6 Class 기본문법

: 프로토타입 방식을 내장하여 새로운 문법으로 돌아감

class User {
  constructor(first, last) {    //프로토타입에서의 함수 역할
  	this.firstName = first
  	this.lastName = last
  }
  getFullName() {
  	return `${this.firstName} ${this.lastName}`
  }
}

const ksw = new User('sw','k')
console.log(ksw.getFullName())

실행결과: sw k

🥝Getter와 Setter

: 값을 얻어내는(조회할때)/지정하는(할당할때) 용도의 메소드

class User {
  constructor(first, last) {
    this.firstName = first
    this.lastName = last
  }
  get fullName() {     //getter
    console.log('Getting full name!')
    return `${this.firstName} ${this.lastName}`
  }
  set fullName(value) {   //setter
    console.log(value)      //뒤 대괄호와 명령구분을 위한 콜론 추가
    ;[this.firstName, this.lastName] = value.split(' ') //띄어쓰기를 기준으로 배열 구조분해
  }
}

const ksw = new User('sw', 'k')
console.log(ksw.fullName)     //fullName이라는 메소드를 속성처럼 사용

ksw.firstName = 'cm'
console.log(ksw.fullName)

ksw.fullName = 'jcm'     //할당연산자로 들어가는 jcm을 매개변수 value가 받아서 출력

실행결과:
Getting full name!
sw k
Getting full name!
cm k
jcm

🥝정적 메소드(Static method)

: 프로토타입 속성없이 클래스 자체에서 만들어서 사용하는 메소드, 데이터 구조를 확인하는 보조함수

class User {
  constructor(first, last) {
    this.firstName = first
    this.lastName = last
  }
  getFullName() {
    return `${this.firstName} ${this.lastName}`
  }
  static isUser() {    //인스턴스가 아니고 클래스 자체에서 바로 호출할 수 있게됨
    if (user.firstName && user.lastName) {   //이름과 성이 모두 있는지 확인
      return true
    }
    return false
  }
}

const ksw = new User('sw', 'k')
const jcm = new User('cm', 'j')
const kyh = {   
  name: 'kyh',
  age: '28'
}

//console.log(User.getFullName())   :static이 없으면 user의 getFullName이 함수가 아니라 호출할 수 없어서 에러 발생
//console.log(ksw.isUser()) :클래스에서만 사용 가능하고 인스턴스에선 사용 불가해서 에러발생
console.log(User.isUser(ksw))
console.log(User.isUser(jcm))
console.log(User.isUser(kyh))

실행결과:
true
true
false

🥝상속과 인스턴스

• instanceof : 이 키워드 앞에 있는 데이터가 뒤에 있는 클래스에서 인스턴스로 만들어져 있는지를 확인하는 키워드
• extends : 이 키워드 앞에 있는 클래스에서 뒤에 있는 클래스를 상속(확장)

//운송수단
class Vehicle {
  constructor(acceleration = 1) {
    this.speed = 0
    this.acceleration = acceleration
  }
  acceleration() {
    this.speed += this.acceleration   //가속도크기만큼 가속
  }
  deceleration() {
    if(this.speed <= 0){         //속도 0일시 정지
      console.log("정지")
      return
    }
    this.speed -= this.acceleration      //가속도크기만큼 감속
  }
}

//자전거
class Bicycle extends Vehicle {   //자전거 클래스에서 운송수단 클래스를 상속하여 사용(=확장)
  constructor(price = 100, acceleration) {
	super(acceleration)   //운송수단 클래스가 가지고 있는 constructor 부분 호출(따라서 1개의 인수필요)
    this.price = price
    this.wheel = 2
  }
}

const bicycle = new Bicycle(300)   //변수 bicycle은 Bicycle 클래스의 인스턴스
bicycle.accelerate()    //호출 할때마다 가속도 증가
console.log(bicycle instanceof Bicycle)  //변수 bicycle은 Bicycle 클래스의 인스턴스가 맞기 때문에 true 출력
console.log(bicycle instanceof Vehicle)  //변수 bicycle은 Vehicle 클래스를 상속받은 Bicycle 클래스의 인스턴스가 맞기 때문에 true 출력


//자동차
class Car extends Bicyle {
  constructor(license, price, acceleration) {
    super(price, acceleration)   //자전거 클래스를 상속하므로 인수 2개 필요
    this.license = license
    this.wheel = 4
  }
  
//오버라이딩: 기존 메서드를 새로운 메서드로 덮어씀
  accelerate() {
    if (!this.license) {
      console.error('무면허')        //license가 false일시 무면허 에러 출력
      return
    }
    this.speed += this.acceleration
    console.log('가속', this.speed)
  }
}

//보트
class Boat extends Vehicle {   //운송수단 클래스 상속
  constructor(price, acceleration) {
    super(acceleration)
    this.price = price
    this.motor = 1
  }
}

const boat = new Boat(10000, 5)
console.log(boat instanceof Bicycle) //보트 클래스는 자전거 클래스에서는 상속하지 않았기 때문에 false 출력 

🥝instanceof와 constructor

• 개념

class A {
  constructor() {}
}
class B extends A {
  constructor() {
  	super()
  }
}
class C extends B {
    constructor() {
  	super()
  }
}

const a = new A()
const b = new B()
const c = new C()

console.log(c instanceof A)   //A는 C의 조상클래스로 true 출력
console.log(c instanceof B)	  //B는 C의 부모클래스로 true 출력
console.log(c instanceof C)

console.log(c.constructor === A)  //A와 C클래스는 구조가 다르기 때문에 false 출력
console.log(c.constructor === B)  //B와 C클래스는 구조가 다르기 때문에 false 출력
console.log(c.constructor === C)  //C클래스의 constructor 함수이기 때문에 true 출력

• 활용예시

const tbz = ['ksw', 'jcm']
console.log(tbz.constructor === Array)     //true 출력 (tbz라는 데이터는 Array라는 클래스의 하나의 인스턴스)
console.log(tbz instanceof Array)          //true 출력