🌎 Web/JavaScript
[JavaScript] 자바스크립트의 클래스(Class)
오늘 ONEUL
2022. 4. 22. 01:02
클래스란?
클래스(Class)란 객체 지향 프로그래밍에서 특정 객체를 생성하기 위해 변수와 메서드를 정의하는 일종의 틀로, 객체를 정의하기 위한 상태(멤버 변수)와 메서드(함수)로 구성된다. ES6에 도입되었으며, JavaScript 객체용 템플릿이라고 볼 수 있다.
클래스 생성
class ClassName {
constructor() { ... }
}class키워드를 사용한다.- 생성자 메서드
constructor()를사용한다.
name과 year 속성을 가진 'Car'라는 클래스를 만들어보자.
class Car {
constructor(name, year) {
this.name = name;
this.year = year;
}
}
// 객체 생성
let myCar1 = new Car("Ford", 2014);
let myCar2 = new Car("Audi", 2019);- Car 클래스를 이용하여 2개의 Car 객체를 만들었다.
- 넘겨받은 인수와 함께
constructor가 자동으로 실행된다.
클래스 메서드
class ClassName {
constructor() { ... }
method_1() { ... }
method_2() { ... }
method_3() { ... }
}- 여러 메서드를 정의할 수 있다.
- 클래스를 만들고,
new ClassName()을 호출하면 내부에서 정의한 메서드가 들어 있는 객체가 생성된다.
'Car' 클래스에 age라는 메서드를 추가해보자.
class Car {
constructor(name, year) {
this.name = name;
this.year = year;
}
age() { // method
let date = new Date();
return date.getFullYear() - this.year;
}
}
let myCar = new Car("Ford", 2014);
console.log(myCar.age()); // 8- "Ford"는
this.name에 할당되고, 2014는this.year에 할당된다. myCar.age()와같은 방식으로 객체 메서드를 호출할 수 있다.
클래스 상속
클래스 상속을 사용하면 클래스를 다른 클래스로 확장할 수 있다. 클래스 상속으로 생성된 클래스는 다른 클래스의 모든 메서드를 상속한다. 따라서 코드 재사용에 아주 유용하다.
class Car {
constructor(brand) {
this.carname = brand;
}
present() {
return 'I have a ' + this.carname;
}
}
class Model extends Car {
constructor(brand, mod) {
super(brand);
this.model = mod;
}
show() {
return this.present() + ', it is a ' + this.model;
}
}
let myCar = new Model("Ford", "Mustang");
console.log(myCar.show()); // I have a Ford, it is a Mustang- Car 클래스에서 메서드를 상속할 Model이라는 클래스를 만들기 위해
extends키워드를 사용한다. - Model 클래스로 만든 myCar객체는 Car클래스에 정의된 메서드에도 접근할 수 있다.
super()메서드는 부모 메서드를 토대로 일부 기능만 변경하는 메서드 오버라이딩에 사용된다.- 상속 클래스의 생성자에서는
this를 사용하기 전에 반드시super()를 호출해야 한다. (생성자 오버라이딩)
게터와 세터
리터럴을 사용해 만든 객체처럼 클래스도 getter나 setter를 사용할 수 있다. 주로 변수에 직접적인 접근을 제한하기 위해 사용한다.
class Car {
constructor(brand) {
this._carname = brand;
}
get carname() {
return this._carname; // 속성과 구분하기 위해 언더바(_) 사용
}
set carname(x) {
this._carname = x;
}
}
let myCar = new Car("Ford");
myCar.carname = "Volvo"; // 괄호 사용X
console.log(myCar.carname); // "Volvo"get/set키워드를 사용한다.- getter/setter의 이름과 속성명이 같을 수 없으므로 속성 이름 앞에 언더바(_)를 사용한다.
- getter로 속성 값을 가져올 때나 setter로 속성 값을 설정할 때 모두 괄호를 사용하지 않는다.
static 메서드
static 메서드는 클래스 자체에 정의되며, 특정 클래스 인스턴스가 아닌 클래스 '전체'에 필요한 기능을 만들 때 사용할 수 있다. 객체에서 메서드로 호출할 수 없고, 클래스명으로만 호출할 수 있다.
class Car {
constructor(name) {
this.name = name;
}
static hello() { // static method
return "Hello!!";
}
}
let myCar = new Car("Ford");
// static 메서드는 클래스명으로만 호출할 수 있음
console.log(Car.hello()); // "Hello!!"
// myCar.hello() 불가능메서드 내에서 myCar 객체를 사용하려면 파라미터로 전달하면 된다.
class Car {
constructor(name) {
this.name = name;
}
static hello(x) {
return "Hello " + x.name;
}
}
let myCar = new Car("Ford");
console.log(Car.hello(myCar)); // "Hello Ford"
클래스의 기본적인 개념 위주로 다뤄 보았다😇
더 자세한 내용은 아래를 참고하면 좋을 듯하다!
※ 참고 자료
https://www.w3schools.com/js/js_class_intro.asp