입력란
클래스 필드는 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;
필드는 클래스의 고급 기능을 위한 기초를 제공합니다.
비공개 필드 및 메서드
Private 필드 및 메서드는 클래스 외부에서는 액세스할 수 없습니다. 비공개 속성은 클래스의 인스턴스와 연결됩니다. 즉, 각 인스턴스에는 클래스에 정의된 대로 고유한 비공개 필드 및 메서드 집합이 포함됩니다.
속성을 비공개로 설정하려면 식별자를 선언할 때 #를 식별자 시작 부분에 추가합니다.
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