클래스 필드 및 메서드

필드

클래스 필드는 명시적으로 선언되지 않고 클래스 본문 내에 직접 선언됨 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