Classes

O ES6 introduziu o conceito de "classes" em JavaScript, o que é diferente da em outras linguagens de programação. Aqui, as classes são funções especiais servem como modelos para criar objetos que já contêm dados, propriedades associados a esses dados e métodos relacionados à manipulação deles. Esses objetos, propriedades e métodos são chamados coletivamente de "membros" da .

Para definir uma classe, use a palavra-chave class. Seguir as práticas recomendadas e os estabelecida pelas funções de construtor integradas do JavaScript, inicie qualquer identificador de uma classe com letra maiúscula:

class MyClass {}

As aulas visam fornecer formas mais acessíveis de trabalhar com níveis avançados recursos de protótipos e funções de construtor:

class MyClass {}

typeof MyClass;
> "function"

Porque as classes foram parcialmente adicionadas para tornar o trabalho com JavaScript avançado mais fáceis e atraentes, eles às vezes são chamados de "açúcar sintático". No entanto, fazem mais do que apenas uma forma simples de trabalhar com herança prototipada. Introdução à sintaxe da classe criou oportunidades para abordar o design de longa data problemas de JavaScript sem introduzir problemas de compatibilidade com versões anteriores. Como um só por exemplo, todo o código dentro do corpo de uma classe é sempre avaliado modo estrito.

Para criar uma instância de uma classe, use o operador new.

class MyClass {}

const myClassInstance = new MyClass();

myClassInstance;
> Object { }

As funções definidas dentro do corpo de uma classe são expostas como métodos de cada instância dessa classe.

class MyClass {
    classMethod() {
        console.log( "My class method." );
    }
}

const myClassInstance = new MyClass();

myClassInstance.classMethod();
> "My class method."

Um método definido dentro de uma classe se torna um método no protótipo da instância resultante. Por causa da natureza cadeia de protótipos, é possível chamar esses métodos diretamente no objeto resultante:

class MyClass {
  classMethod() {
    console.log( "My class method." );
  }
}

const myClassInstance = new MyClass( "A string." );

myClassInstance;
> Object { }
    <prototype>: Object { … }
        classMethod: function classMethod()
        constructor: class MyClass { constructor(myPassedValue) }
        <prototype>: Object { … }

myClassInstance.classMethod();
> "My class method."

A criação de uma instância de uma classe chama um método constructor() especial que e faz a "configuração" necessária da instância recém-criada e inicializa propriedades associadas a ele. Quaisquer argumentos passados para a classe quando a é criada estão disponíveis para o método constructor():

class MyClass {
  constructor( myPassedValue ) {
    console.log( myPassedValue );
  }
}

const myClassInstance = new MyClass( "A string." );
> "A string."

No corpo de uma classe, o valor de this se refere à própria instância, com as propriedades definidas em this expostas como propriedades de cada instância do dessa classe:

class MyClass {
  constructor( myPassedValue ) {
    this.instanceProperty = myPassedValue;
  }
}

const myClassInstance = new MyClass( "A string." );

myClassInstance;
> Object { instanceProperty: "A string." }

Essas propriedades também estão disponíveis para todos os métodos no corpo da classe:

class MyClass {
  constructor( myPassedValue ) {
    this.instanceProp = myPassedValue;
  }
  myMethod() {
    console.log( this.instanceProp );
  }
}

const myClassInstance = new MyClass( "A string." );

myClassInstance.myMethod();
> "A string."

Se você não definir um constructor() para a classe, o mecanismo JavaScript assume uma posição "padrão" vazia constructor. Cada classe só pode ter um método chamado constructor():

class MyClass {
  constructor() {}
  constructor() {}
}
> Uncaught SyntaxError: A class may only have one constructor

Para definir uma classe, use uma declaração de classe ou expressão de classe. Todos os exemplos anteriores foram declarações de classe, que exige que nomes sejam invocados usando new. Expressões de classe podem ser nomeadas ou deixou sem nome para criar um "anônimo" .

let ClassExpression = class {
    constructor() {}
};

ClassExpression;
> class  {}

Você pode usar expressões de classe anônimas para funções que construa classes em tempo real:

function classMaker() {
  return class {
    constructor() {}
  };
}

let MyVariable = classMaker();

MyVariable;
> class  {}

A redefinição de uma classe usando uma declaração de classe causa um erro de sintaxe:

class MyClass {
    constructor( ) {
        console.log( "My class." );
    }
};

class MyClass {
    constructor() {
        console.log( "My new class." );
    }
};
> Uncaught SyntaxError: redeclaration of class MyClass

No entanto, as expressões de classe permitem redefinir uma classe:

let ClassExpression = class MyClass { };

ClassExpression = class MyOtherClass {
    constructor( myString ) {
        this.myProp = myString;
    }
};

new ClassExpression( "String." );
> MyOtherClass {myProp: 'String.'}

Não é possível invocar uma expressão de classe nomeada pelo nome da mesma forma que declaração de serviço. No entanto, o nome atribuído de uma expressão de classe está disponível como um da instância criada, principalmente para facilitar a depuração:

let MyVariable = class MyClass {};

MyClass;
> Uncaught ReferenceError: MyClass is not defined

MyVariable;
> class MyClass {}

MyVariable.name;
> "MyClass"

Quando você inicializa uma variável usando uma expressão de classe, a regras de elevação de para que a variável seja seguida conforme esperado. As declarações de classe seguem mesma "zona morta temporal" como let e const, e se comportar como se não tivessem sido elevados ao topo do escopo atual, o que significa que invocar uma classe antes da declaração de classe causa um erro:

{
    let myVar = new MyClass( "Property string." );

    class MyClass {
        myProp;

        constructor( myString ) {
            this.myProp = myString;
        }
    };
};
> Uncaught ReferenceError: Cannot access 'MyClass' before initialization

Teste seu conhecimento