Campos privados JavaScript

Resumo : neste tutorial, você aprenderá sobre campos privados JavaScript e como usá-los de maneira eficaz.

Introdução aos campos privados JavaScript

ES2022 permite definir campos privados para uma classe . Para definir um campo privado, você prefixa o nome do campo com o #sinal.

Por exemplo, o seguinte define a Circleclasse com um campo privado radius:

class Circle {
  #radius;
  constructor(value) {
    this.#radius = value;
  }
  get area() {
    return Math.PI * Math.pow(this.#radius, 2);
  }
}Linguagem de código:  JavaScript  ( javascript )

Neste exemplo:

• Primeiro, defina o campo privado #radiusno corpo da classe.
• Segundo, inicialize o #radiuscampo no construtor com um argumento.
• Terceiro, calcule a área do círculo acessando o #radiuscampo privado no método getter.

O seguinte cria uma nova instância da Circleclasse e calcula sua área:

let circle = new Circle(10);
console.log(circle.area); // 314.1592653589793Linguagem de código:  JavaScript  ( javascript )

Por #radiusser um campo privado, você só pode acessá-lo dentro da Circleclasse. Em outras palavras, o #radiuscampo é invisível fora da Circleclasse.

Usando getter e setter para acessar campos privados

O seguinte redefine a Circleclasse adicionando o radiusgetter e o setter para fornecer acesso ao #radiuscampo privado:

class Circle {
  #radius = 0;
  constructor(radius) {
    this.radius = radius; // calling setter
  }
  get area() {
    return Math.PI * Math.pow(this.#radius, 2);
  }
  set radius(value) {
    if (typeof value === 'number' && value > 0) {
      this.#radius = value;
    } else {
      throw 'The radius must be a positive number';
    }
  }
  get radius() {
    return this.#radius;
  }
}Linguagem de código:  JavaScript  ( javascript )

Como funciona.

• O radiussetter valida o argumento antes de atribuí-lo ao #radiuscampo privado. Se o argumento não for um número positivo, o radiussetter gera um erro.
• O radiusgetter retorna o valor do #radiuscampo privado.
• O construtor chama o radiussetter para atribuir o argumento ao #radiuscampo privado.

Campos privados e subclasses

Os campos privados só são acessíveis dentro da classe onde estão definidos. Além disso, eles não são acessíveis nas subclasses. Por exemplo, o seguinte define a Cylinderclasse que estende a Circleclasse:

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

    // cannot access the #radius of the Circle class here
  }
}Linguagem de código:  JavaScript  ( javascript )

Se você tentar acessar o #radiuscampo privado da Cylinderclasse, receberá um arquivo SyntaxError.

O inoperador: verifique se existem campos privados

Para verificar se um objeto possui um campo privado dentro de uma classe, você usa o inoperador:

fieldName in objectName

Por exemplo, o seguinte adiciona o hasRadius()método estático à Circleclasse que usa o inoperador para verificar se o circleobjeto possui o #radiuscampo privado:

class Circle {
  #radius = 0;
  constructor(radius) {
    this.radius = radius;
  }
  get area() {
    return Math.PI * Math.pow(this.radius, 2);
  }
  set radius(value) {
    if (typeof value === 'number' && value > 0) {
      this.#radius = value;
    } else {
      throw 'The radius must be a positive number';
    }
  }
  get radius() {
    return this.#radius;
  }
  static hasRadius(circle) {
    return #radius in circle;
  }
}

let circle = new Circle(10);

console.log(Circle.hasRadius(circle));
Linguagem de código:  JavaScript  ( javascript )

Saída:

trueLinguagem de código:  JavaScript  ( javascript )

Campos privados estáticos

O exemplo a seguir mostra como usar um campo privado estático:

class Circle {
  #radius = 0;
  static #count = 0;
  constructor(radius) {
    this.radius = radius; // calling setter
    Circle.#count++;
  }
  get area() {
    return Math.PI * Math.pow(this.radius, 2);
  }
  set radius(value) {
    if (typeof value === 'number' && value > 0) {
      this.#radius = value;
    } else {
      throw 'The radius must be a positive number';
    }
  }
  get radius() {
    return this.#radius;
  }
  static hasRadius(circle) {
    return #radius in circle;
  }
  static getCount() {
    return Circle.#count;
  }
}

let circles = [new Circle(10), new Circle(20), new Circle(30)];

console.log(Circle.getCount());
Linguagem de código:  JavaScript  ( javascript )

Como funciona.

Primeiro, adicione um campo estático privado #countà Circleclasse e inicialize seu valor como zero:

static #count = 0;Linguagem de código:  JavaScript  ( javascript )

Segundo, aumente em #countum no construtor:

Circle.#count++;Linguagem de código:  JavaScript  ( javascript )

Terceiro, defina um método estático que retorne o valor do #countcampo estático privado:

static getCount() {
    return Circle.#count;
}Linguagem de código:  JavaScript  ( javascript )

Por fim, crie três instâncias da Circleclasse e envie o countvalor para o console:

let circles = [new Circle(10), new Circle(20), new Circle(30)];
console.log(Circle.getCount());
Linguagem de código:  JavaScript  ( javascript )

Resumo

• Coloque um sinal no nome do campo #para torná-lo privado.
• Os campos privados são acessíveis apenas dentro da classe, não fora da classe ou subclasses.
• Use o inoperador para verificar se um objeto possui um campo privado.