Class

클래스는 oop(객체지향프로그래밍)에서 특정한 객체를 생성하기 위해서 변수와 메소드를 정의하는 일종의 템플릿이며, 객체를 정의하기 위한 변수와 메소드로 구성이 된다.

class의 기본적인 형태

class Practice {
	constructor() {...}
    method1() {...}
    method2() {...}
    ...
    //메소드들 사이에는 쉼표(,)가 존재하지 않는다 주의하자!
}

constructor() 는 객체의 기본 상태를 설정해주는 생성자 메소드이다.
예를들어 내가 new Practice()를 호출하면 new에 의해서 자동으로 호출이 된다. 또한 특별한 과정 없이도 객체 초기화가 가능하다.

기본적인 형태를 따라서 한번 만들어보자.

class Person {
	constructor(name, age) {
    	this.name = name
        this.age = age
    }
    
    sleep() {
    	console.log('zzz..')
    }
}

//어떻게 사용할까?? 아래와 같이 사용해주면 된다.
let person = new Person('steve', 30)
person.sleep()

new Person('steve', 30) 호출하면 어떻게 될까??
새로운 객체가 생성되면서, 'steve', 30 인수들을 넘겨받아 자동으로 constructor가 실행된다!

대충 틀은 알겠고, 그러면 class 문법구조가 진짜 하는 일은 뭘까.?
위 코드로 예를들어 보면 Person이라는 함수를 만들고 함수 본문은 생성자 메소드인 constructor에서 가져온다고 보면된다. 그런데 만약, 생성자 메소드가 없으면 그냥 빈상태로 함수가 만들어진다.
마지막으로 클래스 내부에서 정의한 메소드인 sleep은 Person.prototype에 저장한다. 여기에 대한 내용은 앞서 정리한 prototype 내용을 보면 되겠다.

Class 상속

Class상속 사용시 기존에 있던 기능을 토대로 새로운 기능을 만드는게 가능하다. 말그래도 다른 Class로 상속이 가능하다는 말이다.

class Animal {
	constructor(name, appearance) {
    	this.name = name
        this.appearance = appearance
        this.speed = 0
    }
    velocity(speed) {
    	this.speed = speed
        alert(`${this.name}의 현재 최고시속은 ${this.speed}km/h 입니다.`)
    }
  	find () {
    	this.speed = 0
      	alert(`${this.name}는 개뼉다귀를 발견했습니다.`)
    }
}

let animal = new Animal('동물', 'cute')

다른 클래스를 하나 더 만들어보겠슴당!

class Dog extends Animal {
	sound() {
    	alert(`${this.name}는 왈왈 짖습니다.`)
    }
}

let dog = new Dog('그레이 하운드')
dog.speed('72') // 그레이 하운드의 현재 최고시속은 72km/h 입니다.
dog.sound() // 그레이 하운드는 왈왈 짖습니다.

Dog 클래스를 이용해 만든 객체는 Dog에 정의된 메서드(dog.sound())에도 접근이 가능하고, dog.speed()처럼 Animal에 있는 메서드에도 접근이 가능하다!

새로운 클래스를 만들 때 사용한 extends는
Dog.prototype.[[Prototype]]을 Animal.prototype으로 설정하고,
만약에 Dog.prototype에서 메서드 확인이 안될경우 상위객체인 Animal.prototype에서 메서드를 가져온다..!

super??

class도 알았겠다, extends도 대충 알았겠다.

그럼 super는 언제 사용하는걸까??
Animal이 가지고 있는 메소드를 기반으로 일부 기능만 바꾸고 싶을때가 생길것이다. 한번 코드로 직접 작성해서 보는게 이해가 제일 빠를것 같아서 간단하게 코딩을 해봤다.

class Animal {
	constructor(name, appearance) {
    	this.name = name
        this.appearance = appearance
        this.speed = 0
    }
    velocity(speed) {
    	this.speed = speed
        alert(`${this.name}의 현재 최고시속은 ${this.speed}km/h 입니다.`)
    }
  	find () {
    	this.speed = 0
      	alert(`${this.name}는 개뼉다귀를 발견했습니다.`)
    }
}

class Dog extends Animal {
	sound() {
    	alert(`${this.name}는 왈왈 짖습니다.`)
    }
    find() {
    	super.find()
        this. sound()
    }
}

let dog = new Dog('그레이 하운드')
dog.velocity(72) // 그레이 하운드의 현재 최고시속은 72km/h 입니다.
dog.find() // 그레이 하운드는 개뼉다귀를 반견했습니다. 그레이 하운드는 왈왈 짖습니다.

Animal을 부모 클래스, Dog를 자식 클래스라고 비유를 들면 쉽게 보인다!

super.method(...)는 부모 클래스에 정의된 메소드를 호출하는 역할!

super(...)는 부모 생성자(constructor)를 호출한다!
(단, 자식 생성자 내부에서만 사용 가능하다.)