2

Estou estudando JavaScript e reparei que, nas função construtoras, podemos declarar variáveis e constantes. Por exemplo:

function Teste() {
  const nome = 'Bruno';
  this.nomeAtributo = nome;
}

console.log((new Teste()).nomeAtributo);

Acima, eu declarei a constante nome e atribui seu valor à propriedade nomeAtributo.

Já nas classes, reparei que esse mesmo comportamento não é possível. Se eu tentar declarar constantes e variáveis no corpo das classes (fora do bloco de métodos), eu recebo um erro de sintaxe. A princípio dentro do escopo das classes só é possível declarar métodos e propriedades. É isso mesmo?

Tentei achar um texto que confirmasse isso, mas não achei.

1
  • 2
    É coisa da sintaxe da linguagem. Você não pode utilizar, por exemplo, a declaração const dentro do “bloco” de uma classe e esperar que funcione, uma vez que não faz parte das regras gramaticais da linguagem. Quanto à semântica de classe vs. função construtora, é a mesma coisa, baseada em “herança prototípica”, o que já foi respondido em outras perguntas aqui no site. Commented 5/05/2021 às 1:37

3 Respostas 3

3

Costuma-se pensar erroneamente que tudo aquilo que é delimitado por chaves ({ e }) é um bloco. E isso não é sempre o caso.

Obviamente não se aplica aos objetos literais, que também usam as chaves para denotar sua sintaxe.

As chaves que seguem class também não são um "bloco" propriamente dito, haja vista que blocos, de acordo com a documentação:

Um bloco (ou declaração composta em outras linguagens) é usado para agrupar zero ou mais declarações. O bloco é delimitado por um par de chaves.

E para a classe, as chaves delimitam o corpo da classe (não confundir com bloco) que, de acordo com a sintaxe da linguagem, contém uma "lista de elementos da classe", que, por sua vez, podem ser a definição de um método ou a definição de um método estático.

Portanto, de acordo com as regras sintáticas da linguagem:

  • Um bloco pode conter um conjunto de qualquer declaração da linguagem (tal como declarações if, const, for, while, etc).
  • O corpo de uma classe pode conter apenas definições de métodos.

Note que, mediante aprovação da class fields proposal, a "lista de elementos de classe" expandir-se-á para também acomodar propriedades, de modo que será possível declarar, no corpo de uma classe, métodos e propriedades diretamente.


Então, respondendo à sua pergunta:

  • Sintaticamente falando, classes e funções construtoras são diferentes ao ponto de que classes delimitam o corpo de uma classe (que pode definir métodos), enquanto funções construtoras delimitam o bloco de uma função (que pode conter qualquer tipo de declaração).

Desse modo, isto não funciona:

class Foo {
  const bar = 'baz';
}

Tendo em vista que const denota uma declaração, que é inválida dentro do corpo de uma classe.

Você poderia, no entanto, declarar um método (analogamente à função construtora seria o método constructor) que, por sua vez, poderia conter a declaração de variável.

Isso tudo é um pouco da sintaxe do JavaScript. Nesse sentido, você só pode fazer aquilo descrito pela sintaxe da linguagem. É a mesma coisa que fazer um while for if e esperar que dê certo.

Então, seguindo as normas sintáticas... Este código:

function Teste() {
  const nome = 'Bruno';
  this.nomeAtributo = nome;
}

Escrito com a sintaxe class fica assim:

class Teste {
  constructor() {
    const nome = 'Bruno';
    this.nomeAtributo = nome;
  }
}

Fora a diferença sintática, como disse nos comentários, não há muita diferença semântica, haja vista que classes e funções construtoras operam sobre o mesmo modelo prototípico.

2

Uma função construtora não deixa de ser uma função como qualquer outra, que pode ter qualquer código válido, não apenas declaração de constantes. Por exemplo:

function Teste(x, y) {
    // posso ter código "normal" que qualquer função teria
    const result = Math.pow(x, y);
    if (result >= 0)
        this.nomeAtributo = result;
    else this.nomeAtributo = result * -2;
}

console.log((new Teste(2, 3)).nomeAtributo); // 8

O que acontece é que, em algum momento, dentro da função construtora, ela seta os atributos do this com algum valor. Mas nada impede que ela tenha outros trechos de código "normal", que fazem qualquer coisa que seja permitida dentro de uma função. Veja no exemplo acima, eu declaro uma variável result, faço contas, if, etc, e em algum momento eu seto this.nomeAtributo. O fato de ser uma função construtora não exclui a possibilidade de termos código "a mais", que é perfeitamente válido.

Então quando você declarou const nome dentro da função, apenas criou uma variável local à função (uma variável que só existe dentro da função, mas que não será um atributo da classe). Tanto que se você tentar acessar (new Teste(2, 3)).nome, o resultado será undefined.

Ou seja, esse const nome que você criou não tem nada de especial, é apenas um código como qualquer outro, que é perfeitamente válido dentro de uma função (seja ela construtora ou não).


O equivalente à função acima, usando class, seria pegar todo o código da função e colocar no construtor:

class Teste {
    constructor(x, y) {
        const result = Math.pow(x, y);
        if (result >= 0)
            this.nomeAtributo = result;
        else
            this.nomeAtributo = result * -2;
    }
}

console.log((new Teste(2, 3)).nomeAtributo); // 8

Repare que nesse caso também não foi criado o atributo result. Esta é uma variável local ao construtor (assim como ele era local à função no exemplo anterior), ele só existe lá dentro e não tem relação nenhuma com a classe. Tanto que se eu tentar acessar (new Teste(2, 3)).result, o resultado será undefined.


Usando o seu exemplo, seria o mesmo que fazer isso:

class Teste {
    constructor() {
        const nome = 'Bruno';
        this.nomeAtributo = nome;
    }
}

console.log((new Teste(2, 3)).nomeAtributo); // Bruno

Ou seja, a variável const nome é local ao construtor (que não deixa de ser uma função, e portanto pode ter qualquer código válido dentro dele, incluindo declaração de variáveis locais).

Quando você disse que tentou fazer assim:

class Teste {
    const nome = "abc"
}

Isso dá erro porque a linguagem definiu que isso não pode ser feito (ver aqui e aqui). No corpo de uma classe (atualmente) só podem ter métodos ou declarações de campos estáticos.


Obs: existe no momento uma proposta experimental para permitir algo parecido com isso, mas sem o const:

// atenção, ainda é experimental, pode não funcionar em todos os ambientes
class Teste {
    campoPublico = 1;
    #campoPrivado = 2;
}
var t = new Teste();
console.log(t.campoPublico); // 1
console.log(t.campoPrivado); // undefined (campo privado não pode ser acessado)

Como é experimental, pode ser que não funcione em todos os ambientes (testei no Chrome 90 e Node 14 e funcionou). Mas enfim, isso é o que ainda será permitido, mas repare que não tem const.


Leitura complementar:

-1

No Javascript baunilha realmente não há.

Tem uma proposta para aceitar declaração de membros de uma classe, mais ou menos do jeito que você esperava, mas ainda não é suportada em todas as máquinas Javascript:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/Public_class_fields

https://github.com/tc39/proposal-class-fields

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .