JavaScript Class Expressions

JavaScript 클래스 식 소개

함수와 마찬가지로 클래스에도 식 형식이 있습니다.클래스 식을 사용하면 새 클래스를 정의할 수 있습니다.

클래스 표현식에서는 다음 ID가 필요 없습니다.class키워드를 지정합니다.또한 변수 선언에서 클래스 식을 사용하여 인수로 함수에 전달할 수 있습니다.

예를 들어, 다음은 클래스 식을 정의합니다.

let Person = class { constructor(name) { this.name = name; } getName() { return this.name; } }

Code language: Python (python)

작동 방식.

표현 왼쪽에는Person변수.클래스 표현식에 할당되어 있습니다.

클래스 식은 다음 키워드로 시작합니다.class이어서 클래스 정의를 입력합니다.

클래스 표현식에 이름이 있을 수도 있고 없을 수도 있습니다.이 예에서는 이름 없는 클래스식이 있습니다.

클래스 표현식에 이름이 있는 경우 해당 이름은 클래스 본문에 대해 로컬일 수 있습니다.

다음은 의 인스턴스를 만듭니다.Person클래스 표현구문은 클래스 선언과 동일합니다.

let person = new Person('John Doe');

Code language: Python (python)

클래스 선언과 마찬가지로 클래스 식 유형도 함수입니다.

console.log(typeof Person); // function

Code language: Python (python)

함수식과 마찬가지로 클래스 표현식은 중단되지 않습니다.즉, 클래스 식을 정의하기 전에는 클래스의 인스턴스를 만들 수 없습니다.

일등 시민

JavaScript 클래스는 일류 시민입니다.즉, 클래스를 함수로 전달하고 함수에서 반환하여 변수에 할당할 수 있습니다.

다음의 예를 참조해 주세요.

function factory(aClass) { return new aClass(); } let greeting = factory(class { sayHi() { console.log('Hi'); } }); greeting.sayHi(); // 'Hi'

Code language: Python (python)

작동 방식.

첫 번째로,factory()클래스 식을 인수로 사용하여 클래스의 인스턴스를 반환하는 함수:

function factory(aClass) { return new aClass(); }

Code language: Python (python)

다음으로 이름 없는 클래스 식을 factory() 함수에 전달하고 그 결과를 그리팅 변수에 할당합니다.

let greeting = factory(class { sayHi() { console.log('Hi'); } });

Code language: Python (python)

클래스 표현식에는 다음과 같은 메서드가 있습니다.sayHi()그리고...greetingvariable은 클래스 표현의 인스턴스입니다.

세 번째,sayHi()그리팅 오브젝트의 메서드:

greeting.sayHi(); // 'Hi'

Code language: Python (python)

싱글턴

싱글톤은 클래스의 인스턴스화를 단일 인스턴스로 제한하는 설계 패턴입니다.그러면 시스템 전체에서 클래스의 인스턴스를 하나만 만들 수 있습니다.

클래스 식을 사용하여 클래스 생성자를 즉시 호출하여 싱글톤을 만들 수 있습니다.

그러기 위해서는newclass expression을 지정하고 다음 예시와 같이 클래스 선언 끝에 괄호를 포함합니다.

let app = new class { constructor(name) { this.name = name; } start() { console.log(`Starting the ${this.name}...`); } }('Awesome App'); app.start(); // Starting the Awesome App...

Code language: Python (python)

작동 방식.

다음은 이름 없는 클래스 표현입니다.

new class { constructor(name) { this.name = name; } start() { console.log(`Starting the ${this.name}...`); } }

Code language: Python (python)

그 반에는constructor()의론을 받아들입니다.아슬로에는 '아슬로'라는 방법이 있습니다.start().

클래스 표현식은 클래스로 평가됩니다.따라서 표현식 뒤에 괄호를 넣으면 해당 생성자를 즉시 호출할 수 있습니다.

new class { constructor(name) { this.name = name; } start() { console.log(`Starting the ${this.name}...`); } }('Awesome App')

Code language: Python (python)

이 식은 앱 변수에 할당된 클래스 식의 인스턴스를 반환합니다.

다음에서 호출합니다.start()앱 개체의 메서드:

app.start(); // Starting the Awesome App...

Code language: Python (python)

요약

• ES6는 클래스 식을 사용하여 새 클래스를 정의하는 대체 방법을 제공합니다.
• 클래스 표현식에 이름을 붙이거나 이름을 붙일 수 있습니다.
• 클래스 식을 사용하여 싱글톤 개체를 만들 수 있습니다.

 

 

 

 

참고: https://www.javascripttutorial.net/es6/javascript-class-expressions/