자바스크립트 클래스
ES6이라고도 하는 ECMAScript 2015에는 JavaScript 클래스가 도입되었습니다.
JavaScript 클래스는 JavaScript 객체용 템플릿입니다.
자바스크립트 클래스 구문
키워드 class
를 사용하여 클래스를 만듭니다.
항상 다음과 같은 메소드를 추가하십시오 constructor()
.
통사론
class ClassName {
constructor() { ... }
}
예시
class Car {
constructor(name, year) {
this.name = name;
this.year = year;
}
}
위의 예는 "Car"라는 클래스를 생성합니다.
클래스에는 "이름"과 "연도"의 두 가지 초기 속성이 있습니다.
JavaScript 클래스는 객체가 아닙니다 .
JavaScript 객체를 위한 템플릿 입니다.
클래스 사용
클래스가 있으면 클래스를 사용하여 객체를 만들 수 있습니다.
예시
let myCar1 = new Car("Ford", 2014);
let myCar2 = new Car("Audi", 2019);
위의 예에서는 Car 클래스 를 사용하여 두 개의 Car 객체 를 만듭니다 .
생성자 메서드는 새 개체가 생성될 때 자동으로 호출됩니다.
생성자 메서드
생성자 메서드는 특수 메서드입니다.
- 정확한 이름이 "생성자"여야 합니다.
- 새 객체가 생성되면 자동으로 실행됩니다.
- 객체 속성을 초기화하는 데 사용됩니다.
생성자 메서드를 정의하지 않으면 JavaScript는 빈 생성자 메서드를 추가합니다.
클래스 메서드
클래스 메서드는 객체 메서드와 동일한 구문으로 생성됩니다.
키워드 class
를 사용하여 클래스를 만듭니다.
항상 constructor()
메소드를 추가하십시오.
그런 다음 원하는 수의 방법을 추가합니다.
통사론
class ClassName {
constructor() { ... }
method_1() { ... }
method_2() { ... }
method_3() { ... }
}
Car age를 반환하는 "age"라는 클래스 메서드를 만듭니다.
예시
class Car {
constructor(name, year) {
this.name = name;
this.year = year;
}
age() {
let date = new Date();
return date.getFullYear() - this.year;
}
}
let myCar = new Car("Ford", 2014);
document.getElementById("demo").innerHTML =
"My car is " + myCar.age() + " years old.";
클래스 메서드에 매개변수를 보낼 수 있습니다.
예시
class Car {
constructor(name, year) {
this.name = name;
this.year = year;
}
age(x) {
return x - this.year;
}
}
let date = new Date();
let year = date.getFullYear();
let myCar = new
Car("Ford", 2014);
document.getElementById("demo").innerHTML=
"My car is
" + myCar.age(year) + " years old.";
브라우저 지원
다음 표는 JavaScript의 클래스를 완벽하게 지원하는 첫 번째 브라우저 버전을 정의합니다.
Chrome 49 | Edge 12 | Firefox 45 | Safari 9 | Opera 36 |
Mar, 2016 | Jul, 2015 | Mar, 2016 | Oct, 2015 | Mar, 2016 |
"엄격하게 사용"
클래스의 구문은 "엄격 모드"로 작성해야 합니다.
"엄격한 모드" 규칙을 따르지 않으면 오류가 발생합니다.
예시
"엄격 모드"에서 변수를 선언하지 않고 사용하면 오류가 발생합니다.
class Car {
constructor(name, year) {
this.name = name;
this.year = year;
}
age() {
// date = new Date(); // This will not work
let date = new Date(); // This will work
return date.getFullYear() - this.year;
}
}
JS 엄격한 모드 에서 "엄격한 모드"에 대해 자세히 알아보세요 .