JavaScript 클래스

ECMAScript 2015,도 ES6라고도하는 JavaScript 클래스가 도입되었습니다

JavaScript 객체의 템플릿입니다

JavaScript 클래스는

문법

키워드를 사용하십시오 class 클래스를 생성하십시오。

항상 이름을 추가하십시오 constructor() 메서드를 추가하십시오：

문법

class ClassName {
  constructor() { ... }
}

인스턴스

class Car {
  constructor(name, year) {
    this.name = name;
    this.year = year;
  }
}

위의 예제는 "Car" 이름의 클래스를 생성했습니다。

이 클래스는 두 개의 초기 속성을 가집니다: "name"과 "year".

JavaScript 클래스아니요객체입니다

그것은 단지 JavaScript 객체의템플릿。

클래스 사용

클래스가 있다면, 그 클래스를 사용하여 객체를 생성할 수 있습니다：

인스턴스

let myCar1 = new Car("Ford", 2014);
let myCar2 = new Car("Audi", 2019);

직접 시도해 보세요

위의 예제는 Car 클래스두 개를 생성했습니다 Car 객체。

새 객체를 생성할 때 자동으로 호출됩니다

Constructor 메서드

구조 함수는 특별한 메서드입니다：

  • 그것은 "constructor" 이름을 가진 정확한 이름을 가져야 합니다
  • 새 객체를 생성할 때 자동으로 실행됩니다
  • 객체 속성을 초기화하는 데 사용됩니다
  • 구조 함수 메서드가 정의되지 않았을 경우 JavaScript는 비어 있는 구조 함수 메서드를 추가합니다。

Class 메서드

클래스 메서드의 생성

문법

객체 메서드와 동일하게

키워드를 사용하십시오 class 클래스를 생성하십시오。

항상 추가하십시오 constructor() 메서드

그런 다음 원하는 만큼의 메서드를 추가할 수 있습니다。

문법

class ClassName {
  constructor() { ... }
  method_1() { ... }
  method_2() { ... }
  method_3() { ... }
}

"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 클래스를 완전히 지원하는 최초의 브라우저 버전을 나타냅니다:

크롬 IE 파이어폭스 사파리 오페라
크롬 49 에지 12 파이어폭스 45 사파리 9 오페라 36
2016년 3월 2015년 7월 2016년 3월 2015년 10월 2016년 3월

이 강의의 마지막 부분에서는 JavaScript 클래스에 대해 더 많이 배울 것입니다.