자바스크립트 클래스(JavaScript Class)
Info: 📁 완성파일
https://jsfiddle.net/qwerew0/qfezhc0g/11/
1. 개요
- class ? 객체 팩토리(공장)
Class는 객체의 모양과 동작에 대해 미리 정의해 놓은 틀
클래스는 객체의 기본값(속성)을 정해놓고 메소드를 여러번 정의하기 위해씀
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Classes
클래스 정의하기
클래스는 class 키워드를 사용하여 정의됩니다.
class ClassName {
// 클래스 내용
}
클래스 생성자
클래스는 생성자를 가질 수 있습니다. 생성자는 클래스의 객체를 만들 때 호출되며 객체의 초기 상태를 설정하는 데 사용됩니다.
class ClassName {
constructor() {
// 생성자 내용
}
}
자바스크립트 클래스에서 constructor(생성자)는 클래스로부터 객체를 생성할 때 호출되는 특별한 메서드입니다. 클래스를 인스턴스화(객체를 생성)할 때 이 메서드가 자동으로 실행되며, 해당 객체의 초기화를 담당합니다. constructor 내부에는 객체를 초기화하기 위한 코드를 작성할 수 있습니다.
생성자 함수는 다음과 같은 역할을 수행합니다:
1. 객체의 프로퍼티 초기화: constructor 내부에 있는 코드를 사용하여 객체의 프로퍼티를 초기화합니다. 객체의 상태와 속성을 정의하는 데 사용됩니다.
1. 인자 전달: 클래스로부터 객체를 생성할 때, 생성자 함수의 매개변수를 통해 외부에서 전달된 인자들을 객체 내부로 받아올 수 있습니다. 이를 활용하여 객체를 개별적으로 초기화할 수 있습니다.
1. 부모 클래스의 생성자 호출: 상속을 사용하는 경우, 하위 클래스에서 constructor를 정의할 때, `super()`를 호출하여 상위 클래스의 생성자를 실행시킵니다. 이를 통해 하위 클래스에서도 상위 클래스의 초기화 로직을 사용할 수 있습니다.
클래스 메소드
클래스 내에서 메소드는 함수와 같이 정의됩니다. 메소드는 클래스의 객체에서 호출됩니다.
class ClassName {
constructor() {
// 생성자 내용
}
methodName() {
// 메소드 내용
}
}
클래스 상속
클래스는 다른 클래스를 상속할 수 있습니다. 상속은 extends 키워드를 사용하여 정의됩니다.
class ChildClassName extends ParentClassName {
// 클래스 내용
}
참고: 위의 코드는 ES6에서 도입된 새로운 구문입니다. 따라서 구형 브라우저에서는 작동하지 않을 수 있습니다.
2. class 선언
클래스는 생성자함수와 메서드를 갖는다
- Dog 클래스에 생성자 함수를 선언하고 name 속성에 값을 할당한다.
printName 함수에 name 을 콘솔로 출력하는 내용을 작성한다.
class Dog{
constructor(){
this.name="mango"
}
printName(){
console.log(this.name);
}
}
const dog= new Dog();
dog.printName();
- 상수에 new 키워드로 클래스 인스턴스를 할당한다
- 이제 상수 dog 은 Dog 인스턴스의 메소드를 사용할수 있다
3. class 상속
class Breed{
constructor(){
this.kind="말티즈";
}
printKind(){
console.log(this.kind)
}
}
class Dog** extends Breed**{
constructor(){
** super();**
this.name="망고"
}
printName(){
console.log(this.name);
}
}
const dog= new Dog();
dog.printName();
dog.printKind();
Dog 는 Breed 의 속성을 상속받는다
서브클래스 Dog 에서는 super() 메소드를 호출해야 한다.