필드
클래스 필드는 명시적으로 선언되지 않고 클래스 본문 내에 직접 선언됨
this
값의 속성으로 추가됩니다. 하지만 결과는 동일합니다.
속성을 사용해야 합니다.
class MyClass {
myField;
}
const myClassInstance = new MyClass();
myClassInstance;
> MyClass { myField: undefined }
필드를 값으로 초기화할 수 있습니다. 이 값은 일반적으로 다음 항목을 덮어쓸 수 있습니다.
class MyClass {
myResult = false;
set setValue( myValue ) {
this.myResult = myValue;
}
}
const myClassInstance = new MyClass();
myClassInstance;
> Object { myResult: false }
myClassInstance.setValue = true;
myClassInstance;\
> Object { myResult: true }
클래스 필드는 클래스에 연결된 속성과 기능적으로 동일합니다.
this
사용. 즉, 프로젝트 외부에서 액세스하고 수정할 수 있습니다.
클래스에 대해 자세히 알아보세요.
class MyClass {
myField = true;
}
const myClassInstance = new MyClass();
myClassInstance.myField;
> true
myClassInstance.myField = false;
myClassInstance.myField;
> false;
필드는 클래스의 고급 기능 중 일부를 위한 기초가 됩니다.
비공개 필드 및 메서드
비공개 필드 및 메서드는 클래스 외부에서 액세스할 수 없습니다. 프라이빗 속성은 클래스의 인스턴스와 연결됩니다. 즉, 각 인스턴스는 에는 클래스에 정의된 대로 자체적인 비공개 필드와 메서드 세트가 포함되어 있습니다.
속성을 비공개로 설정하려면 다음과 같은 경우 식별자 시작 부분에 #
를 추가하세요.
다음과 같이 선언합니다.
class MyClass {
#myPrivateField = true;
#myPrivateMethod() {}
}
const myClassInstance = new MyClass();
myClassInstance;
> MyClass { #myPrivateField: true }
#myPrivateField: true
<prototype>: Object { … }
constructor: class MyClass {}
<prototype>: Object { … }
비공개 필드는 포함하는 클래스의 본문에서 선언해야 합니다. 다음과 같은 작업을 할 수 있습니다.
나중에 값을 this
의 속성으로 변경할 수 있지만 필드를 만들 수는 없습니다.
this
사용.
비공개 필드는 스크립트의 다른 곳에서는 액세스할 수 없습니다. 이렇게 하면 속성이 제공된 getter 및 setter 메서드 외부에서 변경되지 않도록 방지 포함된 값과 상호작용하며 클래스 자체 내에서만 사용할 수 있는 메서드입니다.
class MyClass {
#myResult = false;
set setValue( myValue ) {
this.#myResult = myValue;
}
}
const myClassInstance = new MyClass();
myClassInstance;
> MyClass { #myResult: false }
myClassInstance.#myResult = true;
> Uncaught SyntaxError: reference to undeclared private field or method #myResult
myClassInstance.setValue = true;
myClassInstance;\
> MyClass { #myResult: true }
하지만 브라우저의 개발자 콘솔은 일반적으로 매우 관대한 디버깅을 위해 비공개 필드에 대한 액세스를 허용하는 것과 관련해 일관성이 없음 용도:
class MyClass {
#myPrivateField = true;
#myPrivateMethod() {
console.log( "This is inside a private method." );
}
}
const myClassInstance = new MyClass();
myClassInstance;
> MyClass {#myPrivateField: true}
myClassInstance.#myPrivateField;
> true
myClassInstance.#myPrivateMethod();
> "This is inside a private method."
class MyClass {
#myPrivateField = true;
#myPrivateMethod() {
console.log( "This is inside a private method." );
}
}
const myClassInstance = new MyClass();
myClassInstance;
> MyClass {#myPrivateField: true}
myClassInstance.#myPrivateField;
> Uncaught SyntaxError: reference to undeclared private field or method #myPrivateField
myClassInstance.#myPrivateMethod();
> Uncaught SyntaxError: reference to undeclared private field or method #myPrivateMethod
비공개 필드는 필드가 포함된 클래스의 본문으로 범위가 엄격히 지정되어 있습니다. 즉, 하위 클래스조차 상위 클래스:
class MyClass {
#myPrivateField = true;
}
class ChildClass extends MyClass {
childMethod() {
console.log( this.#myPrivateField );
}
}
> Uncaught SyntaxError: reference to undeclared private field or method #myPrivateField
정적 필드 및 메서드
정적 필드와 메서드는 인스턴스를 만듭니다. 따라서 정적 필드는 가볍게 여겨지는 데이터 포인트가 아니라 참조해야 하는 인스턴스도 있습니다(예: 공유 구성 정보). 정적 메서드는 클래스에 대해 설명합니다.
클래스 본문에 정적 필드와 메서드를 정의하려면 static
를 사용합니다.
키워드:
class MyClass {
static myStaticField;
static myStaticMethod() {}
}
const myClassInstance = new MyClass();
점 표기법을 사용하여 정적 메서드를 만들 수도 있습니다.
class MyClass {
constructor() {}
}
MyClass.myStaticMethod = function() {}
클래스의 인스턴스에서 정적 속성에 액세스할 수 없지만 클래스 생성자에서 사용할 수 있습니다.
class MyClass {
static myStaticField = true;
static myStaticMethod() {
console.log( "A static method." );
}
}
const myClassInstance = new MyClass();
myClassInstance.myStaticField;
> undefined
myClassInstance.myStaticMethod();
> Uncaught TypeError: myClassInstance.myStaticMethod is not a function
MyClass.myStaticField;
> true
MyClass.myStaticMethod();
> "A static method."
기술적으로 필요하지는 않지만 정적 메서드를 사용하는 것이 클래스의 인스턴스를 다루는 유틸리티를 만듭니다. 이에 대한 예는 클래스의 인스턴스 정렬 전용 정적 메서드 또는 정적 메서드 생성자의 인스턴스를 생성하는 데 필요한 설정이 포함된 팩토리 메서드입니다. 클래스를 열고 클래스 인스턴스를 반환합니다.
class User {
constructor( name, email ) {
this.name = name;
this.email = email;
}
static fromObject( myObject ) {
return new User( myObject.name, myObject.email ?? "Omitted" );
}
}
const userObject = {
"name" : "My Name",
"email" : "my@email.address"
};
const secondUserObject = {
"name" : "My Name"
};
const firstUser = User.fromObject( userObject );
const secondUser = User.fromObject( secondUserObject );
firstUser;
> Object { name: "My Name", email: "my@email.address" }
secondUser;
> Object { name: "My Name", email: "Omitted" }
이해도 확인
다음 중 어떻게 해야 할까요?
Static fields