Class

💻Class

클래스 선언

class Person()

• 연관있는 변수와 함수를 하나로 묶기 위해 사용한다.
• 변수를 선언하고 변수에 데이터를 넘겨준다.
• 멤버변수: 클래스 내부에 선언된 변수들

class Person(){
	name = 'kim'
    age = 30
    heigth = 190
    weight = 100
}

---

클래스 사용

• 붕어빵 틀 = 클래스 / 붕어빵 틀로 찍어낸 붕어빵 = 객체(인스턴스)
• 클래스를 통한 객체 생성은 new 키워드를 사용한다.
• 멤버변수에 접근하려면 .연산자를 사용한다.

class Person(){
	name = 'kim'
    age = 30
    heigth = 190
    weight = 100
}
const kim = new Person()
kim.name
kim.age
kim.height
kim.weight

---

constructor

• 고정된 멤버변수로는 객체를 만들 수 없다.
• class 내부에서 Constructor는 한 개만 존재한다.
• constructor는 기본적으로 선언되어 있는 함수로 new 키워드를 통해 객체를 생성할 때 마다 실행된다.
• 객체생성시 멤버변수들의 초기값들을 넣어주고 싶다면 constructor의 매개변수로 객체 생성시 받을 값들을 선언해 준다.
• 해당 값들을 this.멤버변수명을 통해 접근해서 값을 넣어준다.

class Person{
    name = 'kim'
    age = 20
    height = 180
    weight = 100

    constructor(name, age, height, weight){
        if(name) this.name = name
        if(age) this.age = age
        if(height) this.height = height
        if(weight) this.weight = weight
    }
}

const lee = new Person('lee', 30, 170, 50)
console.log('lee: ', lee);

const lee = new Person('lee', 30, 170, 50)

• 객체를 생성할 때 클래스 뒤의 괄호안에 constructor로 전달한 데이터들을 넣어주면 constructor에 해당 데이터들을 사용할 수 있다.

---

Class 메서드

• 기존 함수를 선언할 땐 function키워드가 필요했지만 클래스 내부에서 선언할 경우 따로 function예약어 없이 함수 선언이 가능하다.
• 클래스 내부에서 선언된 함수를 멤버함수또는 메서드라고 부른다.

class Person {
 name = 'kim'
 age = 30
 height = 190
 weight = 100
 
 sayHi() {
 console.log('Hi !!')
 }
}

const kim = new Person()
kim.sayHi()

---

클래스 멤버함수에서 멤버변수 접근

• 클래스 멤버함수에서 멤버변수에 접근하기 위해서는 this키워드를 사용한다.

class Person{
    name = 'kim'
    age = 20
    height = 180
    weight = 100

    sayMyName(){
        console.log(this.name)
    }
}
const lee = new Person('lee', 30, 170, 50)
lee.sayMyName() //lee

• 여기서 this는 객체 자신을 나타낸다.
• this가 객체 자신을 말하는 것이기 때문에 this.name은 객체 자체의 name을 불러오게 된다.

---

클래스 멤버함수를 이용한 멤버변수 변경

• 새로운 매개변수를 받고, 받은 매개변수를 멤버변수에 넣어준다.

class Person{
    name = 'kim'
    age = 20
    height = 180
    weight = 100

    constructor(name,age,height,weight){
        this.name = name
        this.age = age
        this.height = height
        this.weight = weight
    }
    sayMyName(){
        console.log(this.name)
    }
    changeMyage(newAge){
        this.age = newAge
    }
}

const lee = new Person('lee', 30, 170, 50)
const newAge = lee.changeMyage(20)
console.log('lee: ', lee); //{ name: 'lee', age: 20, height: 170, weight: 50 }

---

클래스에서 this

class forThisClass{
    showThis(){
        console.log(this)
    }
}
const test = new forThisClass()
test.showThis() //forThisClass

• 메서드 내부의 this는 메서드를 호출한 객체에 바인딩 된다.

[.bind()]

class forThisClass{
    showThis(){
        document.onclick = function(){
            console.log(this)
        }.bind(this)
    }
}
const test = new forThisClass()
test.showThis()

• 함수에 this를 사용자가 직접 바인딩 할 수 있다.
• function.bind()는 함수의 매개변수로 바인딩 하려는 this를 받는다.

---

클래스 정적 메서드

• prototype이 아닌 클래스 함수 자체에도 메서드를 호출할 수 있다.
• 인스턴스 없이 클래스에서 바로 호출이 가능하다.
• static키워드를 붙여 선언한다.
• staticMethod를 호출하면 this는 클래스 생성자가 아닌 Person 자체가 된다.
• 특정 객체가 아닌 클래스에 속한 함수를 구현하고자 할 때 주로 사용된다.
• 인스턴스에 호출할 수 없고 오직 클래스 생성자에서만 호출할 수 있다.

class Person{
    constructor(name){
        this.name = name
    }

    static sayHi(){
        console.log(`Hi!`)
    }
}

Person.sayHi() //Hi

---

클래스 상속과 생성자 함수 상속

• 상속에 의한 클래스 확장은 기존 클래스를 상속받아 새로운 클래스 확장하여 정의한다.
• 생성자함수는 클래스와 같이 상속을 통해 다른 생성자 함수를 확장할 수 있는 문법이 제공되지 않는다.

class Animal{
    constructor(age, weight){
        this.age = age
        this.weight = weight
    }

    eat(){ return 'eat' }
    move(){ return 'move' }
}

class Brid extends Animal{
    fly(){return 'fly'}
}

const brid = new Brid(1, 5)
console.log('brid: ', brid);
console.log(brid.eat())
console.log(brid.move())
console.log(brid.fly())

• 상속을 통해 확장된 클래스를 서브클래스라고 부른다.

• 서브클래스에 상속된 클래스를 수퍼클래스라고 부른다.

• 서브클래스를 파생클래스 또는 자식클래스라고 부르기도 한다.

• 수퍼클래스를 베이스클래스 또는 부모클래스라고 부르기도 한다.

• extends 키워드의 역할은 수퍼 클래스와 서브클래스 간의 상속 관계를 설정하는 것이다.

• 클래스도 프로토타입을 통해 상속 관계를 구현한다.