[JS] Class

클래스는 객체 지향 프로그래밍에서 특정 객체를 생성하기 위해 변수와 메소드를 정의하는 일종의 틀로, 객체를 정의하기 위한 상태(멤버 변수)와 메서드(함수)로 구성된다.

클래스는 객체를 위한 핵심 청사진 같은 것!

• 클래스는 class키워드로 정의된다.

• 클래스는 Property(프로퍼티: 클래스에 정의한 변수)와 Method(메서드: 클래스에 정의한 함수)를 가질 수 있다.

  • 예)
    아래 Person이라는 객체는 class인데, name이라는 프로퍼티와 call이라는 메소드를 가지고 있다.

    class Person {
      name: 'Summer'
    call = () => { }      
    }

• 클래스의 인스턴스를 생성하기 위해서는 new 키워드를 사용한다.

  • 클래스는 생성자 함수(constructor fuctions)를 만드는 좀더 편한 방법이다. 따라서 클래스로 자바스크립트 객체를 생성할 수 있다.
  • 예)

  class myPerson = new Person();
  
  myPerson.call();
  console.log(myPerson.name);
  

• 클래스에서는 상속(Inheritance)을 할 수 있다.

  • 즉, 다른 클래스에 있는 프로퍼티와 메소드를 상속하면 잠재적으로 새로운 프로퍼티와 메소드를 추가한다는 뜻이다. 예로 prototype이 있다.
  • 예)

  class myPerson extends Master;

정리

class 만들기

class Person {
  //메소드 만들기: 이름 저장하는 생성자 함수
  constructor(){
    //프로퍼티 설정
    this.name = 'Euna';
  }
  
  //메소드 추가: 콘솔에 이름 출력하는 함수
  printMyName(){
    //생성한 this.name 전달
    console.log(this.name);
  }
}

//이 클래스를 new 클래스이름() 메소드를 사용해서
//상수 person에 저장
const person = new Person();

//실행
person.printMyName();


//결과값으로 콘솔에
//"Euna" 가 출력됨

class 상속하기

class Human {
  constructor(){
    this.gender = 'female';    
  }
  
  printGender(){
    console.log(this.gender);
  }
}

//Person 클래스는 extends 키워드를 사용하여
//Human 클래스를 상속받아 확장할 수 있음
class Person extends Human {
  constructor(){
    this.name = 'Euna';
  }
  
  printMyName(){
    console.log(this.name);
  }
}

const person = new Person();

person.printMyName();
person.printGender();


//결과값으로 콘솔에 에러가 뜬다!
//🔥 서브클래스에서는 super 생성자를 먼저! 호출해야 한다.

서브클래스에서는 super 생성자를 먼저 호출

class Human {
  constructor(){
    this.gender = 'female';    
  }
  
  printGender(){
    console.log(this.gender);
  }
}

//Person 클래스는 extends 키워드를 사용하여
//Human 클래스를 상속받아 확장할 수 있음
class Person extends Human {
  constructor(){
    //🔥서브클래스에서는 super 생성자를 먼저 호출해야 한다.
    super();
    this.name = 'Euna';
  }
  
  printMyName(){
    console.log(this.name);
  }
}

const person = new Person();

person.printMyName();
person.printGender();

//결과 값으로 이름과 젠더가 잘 뜬다.
// "Euna"
// "Female"

클래스 상속 받아 확장

class Human {
  constructor(){
    this.gender = 'female';    
  }
  
  printGender(){
    console.log(this.gender);
  }
}


//Person 클래스는 extends 키워드를 사용하여
//Human 클래스를 상속받아 확장할 수 있음
class Person extends Human {
  constructor(){
    super();
    this.name = 'Euna';
    //Human 클래스의 gender를 상속받아
    //🔥Person 클래스에서 gender를 확장하면
    this.gender = 'Male';
  }
  
  printMyName(){
    console.log(this.name);
  }
}

const person = new Person();

person.printMyName();
person.printGender();


//🔥결과값으로 gender는 Person에서 확장한대로 "Male"이 뜬다.

클래스는 리액트에서 컴포넌트를 만들때도 사용한다
클래스는 자바스크립트 객체를 위한 청사진!
클래스는 생성자 함수와 비슷하고, 상속은 프로토 타입과 비슷하다.