JavaScript에서 class는
① 객체(특정 데이터 구조)를 만들고,
② 상태(멤버 변수 또는 속성)에 대한 초기 값을 제공하고,
③ 동작 구현(멤버 함수 또는 메서드)
을 위한 템플릿입니다.
# class
다음은 Person이라는 이름의 기본 클래스의 예입니다.
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
sayHello() {
console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
}
}
클래스를 사용하려면 new키워드를 사용하여 클래스의 객체(인스턴스)를 만든 다음 해당 인스턴스에서 메서드를 호출할 수 있습니다.
예를들면 다음과 같습니다.
const person1 = new Person("John", 30);
person1.sayHello(); // 출력: "Hello, my name is John and I am 30 years old."
const person2 = new Person("Jane", 25);
person2.sayHello(); // 출력: "Hello, my name is Jane and I am 25 years old."
• constructor / this / get / set
constructor메서드는 클래스의 새 인스턴스가 생성될 때 호출되는 특수한 메서드입니다.
개체의 초기 상태를 설정하는 데 사용됩니다.
this키워드는 클래스의 현재 인스턴스를 나타냅니다.
아래의 코드에서
sayHello메서드는 클래스에 추가할 수 있는 동작의 간단한 예입니다 .
또한 클래스 내의 속성 값을 더 많이 제어하기 위해 getter 및 setter 메서드를 클래스에 추가할 수 있습니다.
class Person {
constructor(name, age) {
this._name = name;
this._age = age;
}
get name() {
return this._name;
}
set name(newName) {
this._name = newName;
}
sayHello() {
console.log(`Hello, my name is ${this.name} and I am ${this._age} years old.`);
}
}
이 예에서는 _name 속성 값을 반환하는 name이라는 getter와 _name 속성 값을 설정하는 name이라는 setter가 있습니다. getter 및 setter를 사용하면 기본 속성 값(_name에 저장됨)을 비공개로 유지하면서 클래스가 공개적으로 액세스할 수 있는 이름 속성을 가질 수 있습니다.
name 및 age 앞의 밑줄(_)은 JavaScript에서 private한 변수를 나타내기 위해 자주 사용되는 규칙입니다.
즉, 클래스 외부에서 직접 액세스해서는 안 됩니다.
이것은 자바스크립트 내에서 강제되지는 않지만 속성이 클래스 내부에서만 사용됨을 나타내는 보편적인 네이밍 규칙 중 하나입니다.
# extends
class를 extends(확장)를 사용하여 추가 속성 및 메서드가 있는 새로운 클래스를 만들 수도 있습니다.
class Student extends Person {
constructor(name, age, school) {
super(name, age);
this.school = school;
}
sayHello() {
console.log(`Hello, my name is ${this.name} and I am ${this._age} years old. I study at ${this.school}`);
}
}이 예에서 Student 클래스는 Person 클래스의 모든 속성과 메서드를 상속하고 새로운 속성 school과 sayHello()라는 새로운 메서드 를 추가합니다.
# Getter / Setter
JavaScript에서 getter 및 setter는 개체의 속성 값을 가져오거나 설정할 때 사용자 지정 동작을 정의할 수 있는 메서드입니다.
클래스 내의 속성 값에 대한 더 많은 제어를 제공하는 데 사용됩니다.
• get
Getter는 속성 값을 반환하는 데 사용됩니다.
get키워드는 속성 이름, 속성에 반환할 때 실행할 코드가 포함된 중괄호 쌍을 사용하여 정의됩니다.
예를 들면 다음과 같습니다.
class Person {
constructor(name) {
this._name = name;
}
get name() {
return this._name.toUpperCase();
}
}
const person = new Person("John");
console.log(person.name); // 출력 "JOHN"
이 예에서 name getter는 _name속성 값을 대문자로 반환합니다.
name를 사용하여 속성에 액세스하면 console.log(person.name);getter 메서드가 호출되고 이름이 대문자로 반환됩니다.
• set
setter는 속성 값을 설정하는 데 사용됩니다.
set키워드는 속성 이름, 속성이 설정될 때 실행할 코드가 포함된 중괄호 쌍을 사용하여 정의 됩니다.
예를 들면 다음과 같습니다.
class Person {
constructor(name) {
this._name = name;
}
get name() {
return this._name;
}
set name(newName) {
this._name = newName.toUpperCase();
}
}
const person = new Person("John");
console.log(person.name); // 출력 "John"
person.name = "Jane";
console.log(person.name); // 출력 "JANE"이 예에서 name setter는 _name속성 값을 대문자로 설정합니다.
name로 속성을 설정하면 person.name = "Jane"; setter 메서드가 호출되고 새 이름의 대문자 버전이 _name속성으로 설정됩니다.
getter 및 setter를 사용하면 속성 값을 가져오거나 설정하는 프로세스에 유효성 검사 또는 기타 논리를 추가하여 코드를 보다 강력하고 유지 관리할 수 있습니다.
# super
super는 JavaScript의 부모 클래스에 대한 참조이며 하위 클래스(자식 클래스) 내에서 부모 클래스의 생성자 또는 메서드를 호출하는 데 사용됩니다.
extends 키워드와 같은 클래스 컨텍스트 내에서만 사용할 수 있습니다.
예를 들면 다음과 같습니다.
class Animal {
constructor(name) {
this.name = name;
}
speak() {
console.log(`${this.name} makes a sound.`);
}
}
class Dog extends Animal {
constructor(name, breed) {
super(name); // 부모 클래스의 생성자를 호출하고 이름을 설정합니다.
this.breed = breed;
}
speak() {
super.speak(); // 부모 클래스의 speak 메서드를 호출합니다
console.log(`${this.name} barks.`);
}
}
const dog = new Dog("Fido", "Labrador");
dog.speak(); // 출력: Fido makes a sound. Fido barks.
이 예제에서 Dog 클래스는 Animal 클래스를 확장하고 super를 사용하여 부모 클래스의 생성자를 호출하여 name 속성을 설정합니다.
Dog 클래스 또한 speak 메서드를 재정의하고 super.speak()를 사용하여 자신의 console.log를 출력하기 전에 부모 클래스의 speak 메서드를 호출합니다.