TIL (class)

💡 class

 

class -  함수를 함수 표현식과 함수 선언으로 정의할 수 있듯이 class 문법도 class 표현식과 class 선언 두 가지 방법을 제공한다. 클래스는 객체를 생성하기 위한 틀이라 볼 수 있다.

1. class 선언 

- class를 선언하기 위해서 클래스 이름과 함께 class 키워드를 사용한다.

class Human {
constructor(name, gender) {
 this.name = jessi;
 this.gender = female;
} }

- 함수 선언과 클래스 선언의 중요한 차이점은 함수의 경우는 정의하기전에 호출할 수 있지만, 클래스는 반드시 정의한 뒤에 사용할 수 있다.

- 클래스 내에 정의된 함수를 method로 부르며, 클래스를 통해 생성된 객체를 인스턴스라고 부른다.

- 클래스 이름은 항상 대문자로 시작한다.

 

2. Class 표현식

- class를 정의하는 또 다른 방법인 class 표현식은 이름을 가질 수도 있고 갖지 않을 수 도 있다.

- 이름은 가진 class 표현식의 이름은 클래스 body의 local 안에서 유효하다.

// 이름이 없는 경우
let Human = class {
  constructor(name, gender) {
 this.name = jessi;
 this.gender = female;
};
console.log(Human.name); // "Human"

// 이름이 있는 경우
let Human = class Human2 {
  constructor(name, gender) {
 this.name = jessi;
 this.gender = female;
 };
};
console.log(Human.name); // "Human2"

 

3. class 상속 & extends

 - 상속은 클래스 간에 코드 재사용을 가능하게 한다. 기본 클래스를 상속받아 새로운 클래스를 정의할 수 있게한다.

class Female {
  constructor(name, age) {
     this.name = name;
     this.age = age;
  }
  
  introduce() {
        return `my name is ${this.name}.`
    }
 }
 
 class male {
  constructor(name, age) {
     this.name = name;
     this.age = age;
  }
  
  introduce() {
        return `my name is ${this.name}.`
    }
 }

 

- 두개의 클래스는 같은 기능을 사용하기 때문에 두 클래스 모두 확장시킬 수 있는 새로운 클래스로 이동시킬 수 있다.

  (부모와 자식 관계)

class Human {
  constructor(name, age) {
     this.name = name;
     this.age = age;
  } 
  introduce() {
        return `my name is ${this.name}.`
    }
 }
class Female extends Human {
     Hobby() {
      return 'swimming'
 } } 
 class male extends Human {
     Job() {
     return 'engineer'
 } }
 
 let john = new male("John", "Freelance")
 john.introduce() // my name is John.

 

 

 

 

참고 : Classes - JavaScript | MDN (mozilla.org)