Javascript의 개인 클래스 필드(ES2022)

클래스 필드와 클래스 메서드는 기본적으로 공개됩니다.
클래스 필드를 비공개로 설정하는 것이 일반적입니다. Java 배경에서 온 경우 Java 클래스 정의 내부의 private 키워드를 사용하여 이를 달성할 수 있습니다. JavaScript는 처음부터 이러한 기능이 없었습니다.

기사 섹션

How to create a private class field

Inheritance

Weird syntax? Why not use private keyword?

개인 클래스 필드를 만드는 방법

ES2022부터는 식별자 앞에 붙은 # 부호를 사용하여 클래스의 비공개 필드를 정의할 수 있습니다. 클래스 선언 내의 클래스 생성자에서 전용 필드에 액세스할 수 있습니다.

예를 들어 다음은 비공개 필드Circle가 있는 radius 클래스를 정의합니다.

class Circle {
  // private field
  #radius;
  constructor(value) {
    // You can access private field from constructor
    this.#radius = value;
  }
  get area() {
    return Math.PI * Math.pow(this.#radius, 2);
  }
}

위의 예에서

클래스

의 본문에 전용 필드#radius를 선언합니다.

생성자의 #radius 필드를 인수로 초기화합니다.

getter 메서드에서 #radius 전용 필드에 액세스하여 원의 면적을 계산합니다.

다음은 Circle 클래스의 새 인스턴스를 만들고 해당 영역을 계산합니다.

const circle = new Circle(10);
console.log(circle.area); // 314.1592653589793

이제 #radius는 비공개 필드이므로 Circle 클래스 내에서만 액세스할 수 있습니다. 즉, #radius 필드는 Circle 클래스 외부에서 보이지 않습니다.

클래스 외부의 개인 필드에 액세스하려고 하면 구문 오류가 발생합니다.

console.log(circle.#privateField);   // Syntax error

계승

공개 필드와 마찬가지로 비공개 필드는 기본 클래스에서 구성 시 또는 하위 클래스에서 super()가 호출되는 지점에 추가됩니다. 그러나 하위 클래스에서 Private 필드에 액세스하려고 하면 SyntaxError 가 발생합니다. 비공개 필드는 둘러싸는 클래스(정의된 클래스)에서만 액세스할 수 있습니다. 예를 들어, 다음은 Cylinder 클래스를 확장하는 Circle 클래스를 정의합니다.

class Cylinder extends Circle {
  #height;
  cRadius;
  constructor(radius, height) {
    super(radius);
    this.#height = height;

    // cannot access the #radius of the Circle class here
    this.cRadius = this.#radius // Syntax Error
  }
}

#radius 클래스의 Cylinder 비공개 필드에 액세스하려고 하면 SyntaxError 가 표시됩니다.

이상한 구문? 비공개 키워드를 사용하지 않는 이유는 무엇입니까?

클래스 정의는 ES6에 도입되었고 대중의 의견은 냉정했습니다. ES2019 클래스 필드는 더 적은 코드를 필요로 하고, 가독성을 돕고, 몇 가지 흥미로운 객체 지향 프로그래밍 가능성을 가능하게 합니다.

비공개 필드를 표시하기 위해 #를 사용하는 것은 보기 흉하고 해킹처럼 느껴지기 때문에 일부 비판을 받았습니다.

대부분의 언어는 private 키워드를 구현하므로 클래스 외부에서 해당 멤버를 사용하려는 시도는 컴파일러에서 거부됩니다. JavaScript가 해석됩니다. 다음 코드를 고려하십시오.

참고: Vanilla Javascript는 private 키워드를 지원하지 않지만 지금은 클래스의 private 키워드가 지원된다고 가정해도 문제가 되지 않습니다.

class MyCircle {
  private rad = 15;
  #radius
}

const myCircle = new MyCircle();
myCircle.rad = 20;

클래스( const myCircle = new MyCircle(); )를 인스턴스화한 후 비공개rad 속성( myCircle.rad = 20; )에 액세스하려고 합니다. 이렇게 하면 마지막 줄에서 런타임 오류가 발생하지만 단순히 사유 재산.
아시다시피 JavaScript ES5는 모든 객체에 대한 속성 수정을 허용했습니다. Javascript 클래스는 후드 아래의 개체입니다. 따라서 클래스의 개인 속성을 설정하려고 시도하여 런타임 오류를 발생시키는 것은 실제로 자신의 규칙/규칙을 설정하는 것과 같습니다🔥.

보기에는 무미건조하지만 # 표기법은 클래스 정의 외부에서는 유효하지 않습니다. 액세스를 시도하면myCircle.#radius 구문 오류가 발생합니다.syntax error는 Javascript에서 속성 이름이 밑줄 또는 문자로 시작할 수 있으므로 논리적입니다.

좋아요 버튼을 누르고 저를 팔로우하여 요즘 소식을 받아보세요. 여기 dev.to에서 저를 팔로우하고 제 다음 기사가 올라올 때 계속 지켜봐 주세요! 피스✌️