Quase 20 anos atrás, quando o JavaScript nasceu, era apenas uma linguagem simples de script da web. Se você esquecer de preencher seu nome de usuário, ele apresentará um aviso.
Atualmente, tornou -se quase onipotente, com todos os tipos de usos incríveis do front -end até o back -end. Os programadores o usam para completar projetos cada vez mais grandes.
A complexidade do código JavaScript também aumentou acentuadamente. Uma única página da Web contém 10.000 linhas de código JavaScript, que há muito tempo são comuns. Em 2010, um engenheiro revelou que o comprimento do código do Gmail é de 443.000 linhas!
Para escrever e manter um código tão complexo, estratégias modulares devem ser usadas. Atualmente, a abordagem convencional no setor é adotar a "programação orientada a objetos". Portanto, como o JavaScript implementa a programação orientada a objetos se tornou um tópico quente.
O problema é que a sintaxe do JavaScipp não suporta "classe" (classe), o que torna impossível usar diretamente os métodos tradicionais de programação orientados a objetos. Os programadores fizeram muitas explorações para estudar como simular "classes" com JavaScript. Este artigo resume três métodos de definição de JavaScript "classes", discute as características de cada método e enfatiza o melhor método aos meus olhos.
=================================================================
Três maneiras de definir uma classe em JavaScript
Na programação orientada a objetos, uma classe é um modelo para um objeto que define as propriedades e métodos compartilhados pelo mesmo grupo de objetos (também conhecido como "instâncias".
A linguagem JavaScript não suporta "classes", mas algumas soluções alternativas podem ser usadas para simular "classes".
1. Método construtor
Este é um método clássico e um método obrigatório nos livros didáticos. Ele usa um construtor para simular "classe" e usa essa palavra -chave para consultar o objeto de instância dentro dele.
A cópia do código é a seguinte:
function Cat () {
this.name = "cabelos grandes";
}
Ao gerar uma instância, use a nova palavra -chave.
A cópia do código é a seguinte:
var cat1 = novo gato ();
alerta (cat1.name); // cabelos grandes
As propriedades e métodos da classe também podem ser definidos no objeto de protótipo do construtor.
A cópia do código é a seguinte:
Cat.prototype.makesound = function () {
alerta ("miaw meow");
}
Para uma introdução detalhada a esse método, consulte a série de artigos que escrevi: "Programação Javascript Oriented Andenteded", não vou falar sobre isso aqui. Sua principal desvantagem é que ela é relativamente complexa e usa isso e protótipo, o que é muito trabalhoso de escrever e ler.
2. Object.Create () Método
Para resolver as deficiências do "método do construtor" e gerar mais convenientemente objetos, a quinta edição do ECMAScript, o padrão internacional de JavaScript (a terceira edição está disponível no momento), propôs um novo objeto de método.Create ().
Usando esse método, uma "classe" é um objeto, não uma função.
A cópia do código é a seguinte:
var cat = {
Nome: "cabelos grandes",
makeound: function () {alert ("miaow mieow"); }
};
Em seguida, use object.create () diretamente para gerar uma instância sem usar o novo.
A cópia do código é a seguinte:
var cat1 = object.Create (CAT);
alerta (cat1.name); // cabelos grandes
cat1.makesound (); // miau miau miau
Atualmente, as versões mais recentes dos principais navegadores (incluindo o IE9) implantaram esse método. Se você encontrar um navegador antigo, poderá usar o código a seguir para implantá -lo.
A cópia do código é a seguinte:
if (! object.create) {
Object.create = function (o) {
função f () {}
F.Prototype = O;
retornar novo f ();
};
}
Esse método é mais simples que o "método do construtor", mas não pode implementar atributos privados e métodos privados, e os dados não podem ser compartilhados entre objetos de instância; portanto, a simulação de "classes" não é abrangente o suficiente.
3. Lei minimalista
O programador holandês Gabor de Mooij propôs uma nova abordagem melhor que objeto.create (), que ele chamou de "abordagem minimalista". Este também é o método que eu recomendo.
3.1 Embalagem
Esse método não usa isso e protótipo, e o código é muito simples de implantar, e é provavelmente por isso que é chamado de "lei minimalista".
Primeiro de tudo, ele também usa um objeto para simular "classe". Nesta classe, defina um construtor createnew () para gerar uma instância.
A cópia do código é a seguinte:
var cat = {
createnew: function () {
// Algum código aqui
}
};
Em seguida, em createnew (), defina um objeto de instância e use esse objeto de instância como o valor de retorno.
A cópia do código é a seguinte:
var cat = {
createnew: function () {
var cat = {};
cat.name = "cabelos grandes";
cat.makesound = function () {alert ("mieow mieow"); };
gato de retorno;
}
};
Ao usá -lo, ligue para o método createnew () para obter o objeto de instância.
A cópia do código é a seguinte:
var cat1 = cat.createnew ();
cat1.makesound (); // miau miau miau
A vantagem dessa abordagem é que é fácil de entender, tem uma estrutura clara e elegante e está de acordo com a construção tradicional de "programação orientada a objetos", para que os seguintes recursos possam ser facilmente implantados.
3.2 Herança
É muito conveniente implementar uma classe na próxima classe. Basta chamar o método createnew () deste último no método createnew ().
Primeiro defina uma classe de animais.
A cópia do código é a seguinte:
var animal = {
createnew: function () {
var animal = {};
Animal.sleep = function () {alert ("sono em"); };
animal de retorno;
}
};
Então, no método CreateNew () do CAT, o método CreateNew () de Animal é chamado.
A cópia do código é a seguinte:
var cat = {
createnew: function () {
var gat = animal.createnew ();
cat.name = "cabelos grandes";
cat.makesound = function () {alert ("mieow mieow"); };
gato de retorno;
}
};
A instância do gato obtida dessa maneira herdará a classe CAT e a classe de animais.
A cópia do código é a seguinte:
var cat1 = cat.createnew ();
cat1.sleep (); // durma
3.3 Atributos privados e métodos privados
No método createnew (), desde que os métodos e propriedades que não sejam definidos no objeto CAT sejam privados.
A cópia do código é a seguinte:
var cat = {
createnew: function () {
var cat = {};
var Sound = "miau miau miau";
cat.makesound = function () {alert (som); };
gato de retorno;
}
};
O som variável interno no exemplo acima não pode ser lido externamente e só pode ser lido através do método público do CAT.
A cópia do código é a seguinte:
var cat1 = cat.createnew ();
alerta (cat1.sound); // indefinido
3.4 Compartilhamento de dados
Às vezes, precisamos de todos os objetos de instância para poder ler e escrever os mesmos dados internos. No momento, basta encapsular esses dados internos dentro do objeto de classe e fora do método createnew ().
A cópia do código é a seguinte:
var cat = {
Som: "miau miau miau",
createnew: function () {
var cat = {};
cat.makesound = function () {alert (cat.sound); };
cat.changesound = function (x) {cat.sound = x; };
gato de retorno;
}
};
Em seguida, dois objetos de instância são gerados:
A cópia do código é a seguinte:
var cat1 = cat.createnew ();
var cat2 = cat.createnew ();
cat1.makesound (); // miau miau miau
No momento, se houver um objeto de instância e os dados compartilhados forem modificados, o outro objeto de instância também será afetado.
A cópia do código é a seguinte:
CAT2.Changesound ("Lalala");
cat1.makesound (); // lalala
(sobre)