Em programação orientada a objetos, uma classe é extensível-programa de código-modelo para a criação de objetos, fornecendo valores iniciais para o estado (variáveis de membro) e implementações de comportamento (funções ou métodos).
na prática, muitas vezes precisamos criar muitos objetos do mesmo tipo, como usuários, ou bens ou o que quer que seja.como já sabemos pelo construtor do capítulo, o operador “novo”, new function
pode ajudar com isso.,
mas no JavaScript moderno, há uma construção mais avançada de “classe”, que introduz grandes novas características que são úteis para a programação orientada a objetos.
“classe” sintaxe
A sintaxe básica é:
class MyClass { // class methods constructor() { ... } method1() { ... } method2() { ... } method3() { ... } ...}
em Seguida, use new MyClass()
para criar um novo objeto com todos os métodos listados.
O método é chamado automaticamente pornew
, então podemos inicializar o objeto lá.,
Por exemplo:
class User { constructor(name) { this.name = name; } sayHi() { alert(this.name); }}// Usage:let user = new User("John");user.sayHi();
Quando new User("John")
é chamado de:
- Um novo objeto é criado.
- o
constructor
executa com o argumento dado e atribui-o athis.name
.
…então podemos chamar métodos de objetos, tais como user.sayHi()
.
A common pitfall for novice developers is to put a vírgula between class methods, which would result in a syntax error.,
a notação aqui não deve ser confundida com literais de objetos. Dentro da classe, não são necessárias vírgulas.
o que é uma classe?
So, what exactly is a class
? Não é uma entidade totalmente nova, como se pode pensar.vamos revelar qualquer magia e ver o que é realmente uma classe. Isso ajudará a entender muitos aspectos complexos.
em JavaScript, uma classe é um tipo de função.,
Aqui, dê uma olhada:
class User { constructor(name) { this.name = name; } sayHi() { alert(this.name); }}// proof: User is a functionalert(typeof User); // function
o Que class User {...}
construir realmente é:
- Cria uma função chamada
User
, que se torna o resultado da declaração da classe. O código da função é retirado do métodoconstructor
(assumido vazio se não escrevermos esse método). - armazena métodos de classe, tais como
sayHi
, emUser.prototype
.,
Afternew User
object is created, when we call its method, it’s taken from the prototype, just as described in the chapter F. prototype. Então o objeto tem acesso a métodos de classe.,de class User
declaração como:
este é o código que a introspecção é:
Não é apenas um açúcar sintático
às Vezes as pessoas dizem que class
é um “açúcar sintático” (sintaxe, que é projetada para tornar as coisas mais fáceis de ler, mas não introduz nada de novo), porque nós realmente poderíamos declarar o mesmo sem class
palavra-chave em tudo:
O resultado desta definição é sobre o mesmo., Então, existem de fato razões pelas quais class
pode ser considerado um açúcar sintático para definir um construtor juntamente com seus métodos protótipos.ainda assim, existem diferenças importantes.
-
primeiramente, uma função criada por
class
é rotulada por uma propriedade interna especial]:"classConstructor"
. Então não é inteiramente o mesmo que criá-lo manualmente.os controlos linguísticos dessa propriedade em vários locais., Por exemplo, ao contrário de uma função normal, ele deve ser chamado com
new
:class User { constructor() {}}alert(typeof User); // functionUser(); // Error: Class constructor User cannot be invoked without 'new'
Também, uma representação de seqüência de caracteres de um construtor de classe na maioria dos mecanismos de JavaScript inicia-se com a “aula”.
class User { constructor() {}}alert(User); // class User { ... }
Existem outras diferenças, nós vamos vê-los em breve.os métodos de classe
-
são não enumeráveis.,A class definition sets
enumerable
flag tofalse
for all methods in the"prototype"
.isso é bom, porque se nós
for..in
sobre um objeto, normalmente não queremos seus métodos de classe. -
Classes sempre
use strict
.Todo o código dentro da construção da classe está automaticamente em modo estrito.
além disso,class
a sintaxe traz muitas outras características que iremos explorar mais tarde.,
expressão de classe
assim como funções, As classes podem ser definidas dentro de outra expressão, passadas, devolvidas, atribuídas, etc.
Aqui está um exemplo de uma classe de expressão:
let User = class { sayHi() { alert("Hello"); }};
Semelhante a Função de Chamada de Expressões, classe expressões podem ter um nome.,
Se uma classe de expressão tem um nome, é visível dentro da sala de aula somente:
podemos até fazer classes dinamicamente “on-demand”, como este:
Getters/setters
assim como literal de objetos, classes podem incluir getters/setters, propriedades calculadas etc.
este é um exemplo de user.name
implementado usando get/set
:
Tecnicamente, tal declaração de classe funciona através da criação de getters e setters, no User.prototype
.,
Calculada nomes
Aqui está um exemplo com um computado o nome do método a utilizar parênteses :
class User { () { alert("Hello"); }}new User().sayHi();
Estas características são fáceis de lembrar, como eles se assemelham que literal objetos.os campos de classe
navegadores antigos podem necessitar de um polifill
os campos de classe são uma adição recente à linguagem.
anteriormente, as nossas classes só tinham métodos.
“campos de classe” é uma sintaxe que permite adicionar quaisquer propriedades.,
Por exemplo, vamos adicionar name
propriedade class User
:
class User { name = "John"; sayHi() { alert(`Hello, ${this.name}!`); }}new User().sayHi(); // Hello, John!
Então, vamos apenas escrever ” = ” na declaração, e é isso.,
A diferença importante de campos de classe é que elas são definidas em objetos individuais, e não User.prototype
:
class User { name = "John";}let user = new User();alert(user.name); // Johnalert(User.prototype.name); // undefined
podemos também atribuir valores de uso mais complexo de expressões e chamadas de função:
class User { name = prompt("Name, please?", "John");}let user = new User();alert(user.name); // John
Fazendo métodos de limite com a classe de campos
Como demonstrado no capítulo Função de ligação funções em JavaScript tem uma dinâmica this
., Depende do contexto da chamada.
assim, se um método de objeto é passado e chamado em outro contexto, this
não será mais uma referência ao seu objeto.
Por exemplo, este código irá mostrar undefined
:
o problema é chamado “perder “.
Existem duas abordagens para fixá-lo, como discutido na função de ligação do capítulo:
- passa uma função de invólucro, como
setTimeout(() => button.click(), 1000)
.
- vincula o método ao objeto, por exemplo, no construtor.,
os campos de Classe fornecer outro, muito elegante sintaxe:
O campo classe click = () => {...}
é criado por objeto base, há uma função separada para cada Button
objeto, com this
dentro dela fazendo referência a esse objeto. Podemos passar button.click
em qualquer lugar, e o valor de this
será sempre correto.
isso é especialmente útil no ambiente de navegador, para ouvintes de eventos.,
Resumo
A classe básica de sintaxe se parece com isso:
MyClass
é, tecnicamente, uma função (o que nós fornecemos constructor
), enquanto que os métodos getters e setters são escritas MyClass.prototype
.
nos próximos capítulos vamos aprender mais sobre classes, incluindo herança e outras características.
os campos de classe são uma adição recente à linguagem.
anteriormente, as nossas classes só tinham métodos.
“campos de classe” é uma sintaxe que permite adicionar quaisquer propriedades.,
Por exemplo, vamos adicionar name
propriedade class User
:
class User { name = "John"; sayHi() { alert(`Hello, ${this.name}!`); }}new User().sayHi(); // Hello, John!
Então, vamos apenas escrever ” = ” na declaração, e é isso.,
A diferença importante de campos de classe é que elas são definidas em objetos individuais, e não User.prototype
:
class User { name = "John";}let user = new User();alert(user.name); // Johnalert(User.prototype.name); // undefined
podemos também atribuir valores de uso mais complexo de expressões e chamadas de função:
class User { name = prompt("Name, please?", "John");}let user = new User();alert(user.name); // John
Fazendo métodos de limite com a classe de campos
Como demonstrado no capítulo Função de ligação funções em JavaScript tem uma dinâmica this
., Depende do contexto da chamada.
assim, se um método de objeto é passado e chamado em outro contexto, this
não será mais uma referência ao seu objeto.
Por exemplo, este código irá mostrar undefined
:
o problema é chamado “perder “.
Existem duas abordagens para fixá-lo, como discutido na função de ligação do capítulo:
- passa uma função de invólucro, como
setTimeout(() => button.click(), 1000)
. - vincula o método ao objeto, por exemplo, no construtor.,
os campos de Classe fornecer outro, muito elegante sintaxe:
O campo classe click = () => {...}
é criado por objeto base, há uma função separada para cada Button
objeto, com this
dentro dela fazendo referência a esse objeto. Podemos passar button.click
em qualquer lugar, e o valor de this
será sempre correto.
isso é especialmente útil no ambiente de navegador, para ouvintes de eventos.,
Resumo
A classe básica de sintaxe se parece com isso:
MyClass
é, tecnicamente, uma função (o que nós fornecemos constructor
), enquanto que os métodos getters e setters são escritas MyClass.prototype
.
nos próximos capítulos vamos aprender mais sobre classes, incluindo herança e outras características.