Noções básicas de AJAX: implementação de classes em JavaScript Em JavaScript, você pode usar a palavra-chave function para definir uma "classe" e como adicionar membros à classe. Variáveis ou métodos referenciados por meio deste ponteiro dentro de uma função se tornarão membros da classe. Por exemplo:
A seguir está um trecho de código:
function class1(){.
var s="abc";
isto.p1=s;
este.método1=função(){
alert("este é um método de teste");
}
}
var obj1=nova classe1();
Obtenha o objeto obj1 por meio da nova classe1(), e o objeto obj1 obtém automaticamente o atributo p1 e o método método1.
Em JavaScript, a própria definição de função é o construtor de uma classe Combinando as propriedades dos objetos introduzidas anteriormente e o uso do operador new, o seguinte descreve o processo de criação de objetos usando new.
(1) Quando o intérprete encontra o operador new, ele cria um objeto vazio
(2) Começa a executar a função class1 e aponta o ponteiro this para o objeto recém-criado
; Ao atribuir um valor a um atributo, o intérprete criará o atributo para o objeto. Por exemplo, na classe1, quando a instrução this.p1=s for executada, um atributo p1 será adicionado e o valor da variável s será. atribuído a ele, de modo que a execução da função é o processo de inicialização deste objeto, ou seja, a realização do papel do construtor
(4) Quando a função é executada, o novo operador retorna o objeto inicializado;
Através de todo esse processo, o mecanismo básico orientado a objetos é implementado em JavaScript. Pode-se observar que em JavaScript a definição de função é na verdade implementar o construtor de um objeto, que é completado por meio de funções. As desvantagens deste método são:
· Juntando todas as instruções de inicialização e definições de membros, a lógica do código não é suficientemente clara e é difícil implementar funções complexas.
·Cada vez que uma instância de uma classe é criada, o construtor deve ser executado uma vez. As propriedades e métodos definidos no construtor são sempre criados repetidamente. Por exemplo:
o seguinte é um fragmento de código:
this.method1=function(){.
alert("este é um método de teste");
}
Toda vez que o método1 aqui criar uma instância da classe1, ela será criada uma vez, causando desperdício de memória. A próxima seção apresenta outro mecanismo de definição de classe: o objeto protótipo, que pode resolver as deficiências causadas pela definição de membros de classe no construtor.
Usando objetos protótipo para definir membros de classe
A seção anterior introduziu o mecanismo de implementação de classes e a implementação de construtores. Agora apresentamos outro mecanismo para adicionar membros a classes: objetos protótipo. Ao criar uma função, os membros do objeto serão atribuídos automaticamente ao objeto criado. Por exemplo:
A seguir está um trecho de código:
<linguagem script="JavaScript" type="text/javascript">
<!--
//Define uma classe function class1(){ com apenas um atributo prop
isto.prop=1;
}
//Use o atributo protótipo da função para definir novos membros para a classe class1.prototype.showProp=function(){
alerta(este.prop);
}
//Cria uma instância da classe1 var obj1=new class1();
//Chama o método showProp definido através do objeto protótipo protótipo obj1.showProp();
//-->
</script>
Protótipo é um objeto JavaScript que pode adicionar, modificar e excluir métodos e propriedades do objeto protótipo. Isso adiciona definições de membros a uma classe.
Agora que entendemos o objeto protótipo da função, vamos dar uma olhada no processo de execução de new.
(1) Crie um novo objeto e deixe este ponteiro apontar para ele;
(2) Atribua todos os membros doobjeto
protótipo da função a este novo objeto;
(3) Execute o corpo da função e inicialize o objeto;
criado em (1).
Comparado com o processo de execução de new introduzido na seção anterior, há um processo adicional de uso de protótipo para inicializar o objeto. Isso também é consistente com o significado literal de protótipo, que é o protótipo da instância da classe correspondente. Este processo de inicialização ocorre antes da execução do corpo da função (construtor), portanto, as propriedades e métodos definidos no protótipo podem ser chamados dentro do corpo da função. Por exemplo:
A seguir está um trecho de código:
<linguagem script="JavaScript" type="text/javascript">
<!--
//Define uma classe com apenas um atributo prop
função classe1(){
isto.prop=1;
this.showProp();
}
//Use o atributo protótipo da função para definir novos membros para a classe
class1.prototype.showProp=função(){
alerta(este.prop);
}
//Cria uma instância da classe1
var obj1=nova classe1();
//-->
</script>
Comparado com o código anterior, aqui o método showProp definido no protótipo é chamado dentro da classe1, de forma que uma caixa de diálogo apareça durante o processo de construção do objeto, mostrando que o valor do atributo prop é 1.
Deve-se observar que a definição do objeto protótipo deve ser anterior à instrução que cria a instância da classe, caso contrário não funcionará. Por exemplo:
A seguir está um trecho de código:
<linguagem script="JavaScript" type="text/javascript">
<!--
//Define uma classe com apenas um atributo prop
função classe1(){
isto.prop=1;
this.showProp();
}
//Cria uma instância da classe1
var obj1=nova classe1();
//Use o atributo protótipo da função para definir novos membros para a classe após a instrução que cria a instância. Isso só terá efeito para objetos criados posteriormente.
class1.prototype.showProp=função(){
alerta(este.prop);
}
//-->
</script>
Este código gerará um erro de tempo de execução, indicando que o objeto de exibição não possui um método showProp porque o método é definido após a instrução que instancia uma classe.
Pode-se observar que o objeto protótipo é dedicado aos membros da classe de design. Além disso, o protótipo também possui um atributo importante: construtor, que representa uma referência ao construtor
. a seguir está o trecho de código:
função classe1(){
alerta(1);
}
class1.prototype.constructor(); //Chama o construtor da classe
Após a execução deste código, uma caixa de diálogo aparecerá com o texto "1" exibido. Isso mostra que um protótipo está intimamente relacionado à definição de uma classe. Na verdade: class1.prototype.constructor===class1.
Um padrão de design para classes JavaScript.
Já apresentamos como definir uma classe e como inicializar uma instância de uma classe. A classe pode adicionar membros ao corpo da função definido pela função e também pode usar protótipo para definir membros da classe. . O código de programação parece confuso. Como definir classes de forma clara? Um padrão de implementação para uma classe é fornecido abaixo.
Em JavaScript, devido à natureza flexível dos objetos, membros também podem ser adicionados à classe no construtor, o que não só aumenta a flexibilidade, mas também aumenta a complexidade do código. Para melhorar a legibilidade e a eficiência do desenvolvimento do código, você pode usar esta forma de definir membros e, em vez disso, usar o objeto protótipo. Desta forma, a definição da função é o construtor da classe, que está alinhado com a implementação. da classe tradicional: o nome da classe e o nome do construtor são iguais. Por exemplo:
Aqui está o trecho de código:
função classe1(){
//Construtor
}
//Definição do membro
class1.prototype.someProperty="amostra";
class1.prototype.someMethod=função(){
//Código de implementação do método
}
Embora o código acima tenha tornado a definição da classe muito mais clara, cada vez que uma propriedade ou método é definido, class1.prototype precisa ser usado. Não apenas o tamanho do código aumenta, mas a legibilidade não é suficiente. Para melhorias adicionais, você pode usar o construtor de um objeto não digitado para especificar o objeto protótipo para implementar a definição de membro da classe:
A seguir está um trecho de código:
//Define uma classe class1
função classe1(){
//Construtor
}
//Realize a definição do membro da classe especificando o objeto protótipo
class1.prototype={
someProperty:"amostra", someMethod:function(){
//código do método
},
...//Outras propriedades e métodos.
}
O código acima define class1 de uma forma muito clara. O construtor é implementado diretamente com o nome da classe e os membros são definidos usando objetos não digitados. Todas as propriedades e métodos são implementados em uma lista e podem ser inicializados ao mesmo tempo. definido. O valor do atributo. Isso também é mais parecido com a implementação de classes em linguagens tradicionais orientadas a objetos. Acontece que as definições do construtor e dos membros da classe são divididas em duas partes. Isso pode ser considerado um padrão fixo para definir classes em JavaScript, o que facilitará o entendimento ao usá-lo.
Nota: As referências entre membros de uma classe devem ser feitas através deste ponteiro. Por exemplo, no método someMethod do exemplo acima, se quiser utilizar o atributo someProperty, deve-se passar a forma this.someProperty, pois em JavaScript cada um. propriedade e métodos são independentes, eles estão conectados a um objeto através deste ponteiro.