[JavaScript] 자바스크립트의 클래스

자바스크립트의 클래스

클래스는 동일한 모양의 객체를 더 쉽게 생성하도록 도와주는 문법

 

// 사용 전 : 코드 중복

let studentA = {
  name: "이정환",
  grade: "A+",
  age: 27,
  study() {
    console.log("열심히 공부 함");
  },
  introduce() {
    console.log("안녕하세요!");
  },
};

let studentB = {
  name: "홍길동",
  grade: "A+",
  age: 27,
  study() {
    console.log("열심히 공부 함");
  },
  introduce() {
    console.log("안녕하세요!");
  },
};

 

1. 클래스 선언하기

 

1-1) 클래스 선언

class Student {

}

 

1-2) 필드 선언

필드 : 이 클래스가 생성할 객체가 갖는 프로퍼티

class Student {
  // 필드
  name;
  age;
  grade;
}

 

1-3) 생성자 선언

• 생성자 : 특수한 메서드로 실직저으로 객체를 생성하는 함수
• 매개변수로 프로퍼티 값을 받아 this.프로퍼티의 값으로 할당
  • 이때 this는 객체이며 현재 만들고 있는 객체를 의미
  • 따라서 이 생성자 메서드는 현재 만들고 있는 객체의 name, grade, age 프로퍼티의 값을 매개변수로 전달받은 값으로 설정하는 역할

class Student {
  // 필드
  name;
  age;
  grade;

  // 생성자
  constructor(name, grade, age) {
    this.name = name;
    this.grade = grade;
    this.age = age;
  }
}

 

1-4) 클래스 호출

• 클래스를 이용해 새로운 객체를 생성할 때에는 new 클래스이름 형태로 클래스의 생성자 함수를 호출
  • 이때 인수로 name, grade, age 전달
  • 생성자가 호출되어 this.name에는 매개변수 name에 저장된 “홍길동”을 this.grade에는 매개변수 grade에 저장된 “A+”를 this.age에는 매개변수 age에 저장된 27을 저장

const studentB = new Student("홍길동", "A+", 27);

console.log(studentB);
// Student { name: '홍길동', age: 27, grade: 'A+' }

• 객체 생성 결과

{ name: "홍길동", grade: "A+", age: 27 }

 

1-5) 클래스가 생성할 객체의 메서드 설정

class Student {
  // 필드
  name;
  grade;
  age;

  // 생성자
  constructor(name, grade, age) {
    this.name = name;
    this.grade = grade;
    this.age = age;
  }

  // 메서드
  study() {
    console.log("열심히 공부 함");
  }

  introduce() {
    console.log(`안녕하세요!`);
  }
}

let studentB = new Student("홍길동", "A+", 27);

studentB.study(); // 열심히 공부 함
studentB.introduce(); // 안녕하세요!

 

2. this 활용하기

클래스 내부에서 this : 현재 만들고 있는 객체를 의미

• 메서드에 this를 활용해 객체 프로퍼티의 값을 활용하는 것 또한 가능

class Student {

  introduce() {
    console.log(`안녕하세요 ${this.name} 입니다!`);
  }
}

let studentB = new Student("홍길동", "A+", 27);

studentB.introduce(); // 안녕하세요 이정환 입니다!

 

2-2) 상속

• 앞서 만든 Student 클래스를 기반으로 추가적인 필드와 메서드를 갖는 클래스를 선언하고 싶다면 다음과 같이 상속을 이용 가능

class StudentDeveloper extends Student {
}

• StudentDeveloper 클래스는 Student 클래스를 확장(상속)한다.
• 이 확장은 앞서 살펴본 인터페이스의 확장과 기본적으로 비슷하다.
• 따라서 Student 클래스에 정의된 모든 필드와 메서드를 자동으로 갖게 됩니다.
• StudentDeveloper 클래스만의 새로운 필드나 메서드도 다음과 같이 정의할 수 있습니다.

class StudentDeveloper extends Student {
  // 필드
  favoriteSkill;

  // 생성자
  constructor(name, grade, age, favoriteSkill) {
    this.favoriteSkill = favoriteSkill;
  }

  // 메서드
  programming() {
    console.log(`${this.favoriteSkill}로 프로그래밍 함`);
  }
}

• 그런데 이때 StudentDeveloper 클래스에서 Student 클래스의 생성자를 함께 호출해줘야 한다.
• 그렇지 않으면 생성되는 객체의 name, grade, age 값이 제대로 설정되지 않기 때문에 다음과 같이 super 라는 메서드를 호출

class StudentDeveloper extends Student {
  // 필드
  favoriteSkill;

  // 생성자
  constructor(name, grade, age, favoriteSkill) {
    super(name, grade, age);
    this.favoriteSkill = favoriteSkill;
  }

  // 메서드
  programming() {
    console.log(`${this.favoriteSkill}로 프로그래밍 함`);
  }
}

• super를 호출하고 인수로 name, grade, age를 전달하면 슈퍼 클래스(확장 대상 클래스)의 생성자를 호출한다.
• 따라서 this.name, this.grade, this.age의 값을 설정하게 된다.