제이스크립트 클래스

ECMAScript 2015, 또는 ES6로 알려진 것처럼 JavaScript 클래스가 도입되었습니다.

JavaScript 클래스는 JavaScript 객체의 템플릿입니다.

JavaScript 클래스의 문법

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

항상 이름이 constructor() 메서드를 생성하십시오:

문법

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

인스턴스

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

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

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

제이스크립트 클래스아니요객체입니다.

그것은 JavaScript 객체의템플릿.

클래스 사용

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

인스턴스

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

직접 시도해보세요

위의 예제는 Car 클래스을 두 개를 만들기 위해 사용됩니다 Car 객체.

새로운 객체를 생성할 때 자동으로 구조 메서드(constructer method)가 호출됩니다.

구조 메서드

구조 메서드는 특별한 메서드입니다:

  • 그 이름이 정확하게 "constructor"여야 합니다
  • 객체를 생성할 때 자동으로 실행됩니다
  • 객체 속성을 초기화하는 데 사용됩니다
  • 구조 메서드를 정의하지 않았다면 JavaScript가 비어 있는 구조 메서드를 추가합니다.

클래스 메서드

클래스 메서드의 문법은 객체 메서드와 같습니다.

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월

"use strict"

클래스의 문법은 strict 모드로 작성되어야 합니다。

strict 모드 규칙을 따르지 않으면 오류 메시지를 받습니다。

인스턴스

strict 모드에서는 변수를 선언하지 않고 사용하면 오류가 발생합니다：

class Car {
  constructor(name, year) {
    this.name = name;
    this.year = year;
  }
  age() {
    // date = new Date();  // 이렇게는 작동하지 않습니다
    let date = new Date(); // 이렇게는 작동합니다
    return date.getFullYear() - this.year;
  }
}

직접 시도해보세요

에서 JS strict 모드 “strict 모드”에 대해 더 많은 내용을 배우기 위해 여기서 공부하세요。