Página Inicial>Tutorial de web design>Normalização WEB

Discussão de objetos JavaScript

Autor：Eve Cole Data da Última Atualização：2009-12-12 13:57:32

Devido à flexibilidade do JavaScript, todos podem escrever código de acordo com seus próprios hábitos. Existem métodos de programação funcional e também existem literais de objetos que são amplamente utilizados hoje. Devido ao surgimento da programação funcional, que é apenas o JavaScript. iniciado também evoluiu gradualmente para a programação de classe. Agora explicarei brevemente vários hábitos de programação familiares:

1. Objeto literal:

A seguir está o conteúdo citado:

var pessoa = {
nome:nulo,
setNome:função(nome){
este.nome = nome;
retorne este.nome;
},
getNome:função(){
alerta(este.nome);
}
}

Um método de programação com características JavaScript. Contém o atributo name, os métodos setName e getName em unidades de classe. É relativamente simples chamar o método person.setname('R'). atributos e métodos de pessoa não são todos privados, podem ser chamados.

2. Modo de chamada do construtor de protótipo

A seguir está o conteúdo citado:

var Pessoa = função(){
este.nome = null;
}
Person.prototype.setName = function(nome){
este.nome = nome;
}
Pessoa.prototype.getName=função(){
alerta(este.nome);
}


Também é um método de programação muito comum criar uma classe Person e, em seguida, usar o protótipo para estender a classe e adicionar métodos. A maior diferença dos literais de objeto é que ao chamar métodos desta classe, você deve primeiro usar new (semelhante ao Java). chamando classes). var p = new Person();p.getName(); Se você criá-lo diretamente sem usar new, ocorrerá um erro e esse erro não será relatado e é difícil de encontrar. vem disso apontando para Person.prototypel, e Person não possui um método setName.

3. Use funções anônimas para programação funcional

A seguir está o conteúdo citado:

(função(){
var nome;

var setNome = função(n){
nome = n;
}
window['pessoa']['setNome'] = setNome;

var getNome = função(){
alerta(nome);
}
window['pessoa']['getNome'] = getNome;
})()

Um dos maiores benefícios do surgimento de classes é que ela reduz a ocorrência de variáveis ​​globais. Mas se você ainda está acostumado com programação funcional, isso não importa, desde que você crie uma função anônima e execute o fechamento, você pode. execute programação funcional nele. Não há necessidade de se preocupar com a aparência de variáveis ​​​​globais. Como você pode ver acima, o nome var não pode ser chamado fora da função anônima. crie variáveis ​​privadas e métodos privados.

4. Programação de aulas (não sei como chamar)

A seguir está o conteúdo citado:

var pessoa = função(){
var nome = nulo;
retornar{
setNome:função(n){
nome = n;
},
getNome:função(){
alerta(nome);
}
}
}

É muito semelhante aos literais de objeto, exceto que isso é deixado de lado e os métodos e propriedades podem se tornar privados. Chamar métodos é basicamente o mesmo que literais de objeto.

5. Cadeia de métodos

A seguir está o conteúdo citado:

var Pessoa = função(){
este.nome = null;
}
Pessoa.protótipo = {
setNome:função(nome){
este.nome = nome;
devolva isso;
},
getNome:função(){
alerta(este.nome);
devolva isso;
}
}

jQuery é a biblioteca de encadeamento de métodos mais clássica. Se você ainda não entende o que é encadeamento de métodos, dê uma olhada neste exemplo:

A seguir está o conteúdo citado:

var p = new Pessoa();
p.setName('Tom').getName().setName('Ray').getName();


Como cada método termina com return this; uma classe encadeada de método é criada.

Esses são os métodos com os quais estou mais familiarizado. Cada um tem suas próprias características, portanto, existem inúmeros métodos. No entanto, gostaria de explorar as seguintes questões:

1. Sobre este ponteiro

Isso é usado ao criar várias categorias, mas qual é o papel disso? Na verdade, isso desempenha um grande papel na reutilização e na herança. Vejamos primeiro um exemplo de herança:
Primeiro crie a classe Pessoa:

A seguir está o conteúdo citado:

var Pessoa = função(){
este.nome = null;
}
Person.prototype.setName = function(nome){
este.nome = nome;
}
Pessoa.prototype.getName=função(){
alerta(este.nome);
}
Pessoa.prototype.getAge=função(){
var idade = esta.idade ||
alerta(idade);
}

Em seguida, crie uma classe Children e integre todos os métodos e propriedades de Person:

A seguir está o conteúdo citado:

var Filhos = função(idade){
este.nome = null;
esta.idade = idade;
}
Children.prototype = new Person(); //Herda as propriedades e métodos de Person
Children.prototype.ageJudge = function(){ //Também adiciona um novo método para Children
if(esta.idade > 18){
alerta('adulto~');
} outro {
alert('Menores de 18 anos~');
}
}
Children.prototype.getName = function(){ //Substitui o método getName
var sobre = this.name + ' ' + this.age;
alerta(sobre);
}
var tom = novos Filhos(12);
var idades = tom.getAge();
var juiz = tom.ageJudge(); //Menores de 18 anos~
var setN = tom.setName('Tom');
var get = tom.getNome();

Isso é herança, e então veremos uma simples reutilização de função:

A seguir está o conteúdo citado:

var SetColor = function(){
this.style.backgroundColor = '#000'; //isto aponta para a janela
}
document.body.onclick = SetColor; //Isso aponta para o corpo neste momento
documnet.getElementById('color').onmouseout = SetColor; //isso aponta para documnet.getElementById('color')

Depois de ver a função disso, devo ter uma nova compreensão disso. Agora tenho uma dúvida, ou seja, se isso deve ser usado ou não.

var setColor = {
inicialização:função(obj){
this.obj = obj; //isto aponta para setColor
this.obj.onclick = this.color;
},
cor:função(){
this.style.backgroundColor = '#000'; //isto aponta para obj
}
}

Em apenas uma aula, isso aponta para dois lugares, o que às vezes deixa as pessoas confusas. Pessoas que estão apenas aprendendo ficarão confusas com isso e mudarão um pouco a forma de escrever o código.

A seguir está o conteúdo citado:

var setColor = {
inicialização:função(obj){
setColor.obj = obj;
setColor.obj.onclick = setColor.color;
},
cor:função(){
this.style.backgroundColor = '#000'; //Isso pode facilitar a reutilização de métodos
}
}

Desta forma, o código pode ser mais claro, portanto, ao escrever o código, você deve considerar seu uso futuro e se ele pode ser reutilizado. Se estiver claro que a herança ou reutilização não deve ser realizada, eu pessoalmente acho que você deveria. evite usar isso tanto quanto possível. Há outro problema mais comum:

A seguir está o conteúdo citado:

var Pessoa = função(){
este.nome = null;
}
Person.prototype.setName = function(nome){
este.nome = nome;
}
Person.setName('tom'); //Caminho errado: isso no método setName apontará para Person.prototypel, Person não possui um método setName

Como mencionado anteriormente, se não for escrito como var p = new Person();p.setName('tom'); isso nesta classe apontará diretamente para Person.prototypel. Este erro não ocorrerá durante a compilação ou tempo de execução. um erro será relatado. Às vezes, isso causará dores de cabeça. Portanto, ao escrever o código, sempre escolho isso com cuidado.

2. Encapsulamento de classe

Em Java, métodos ou propriedades de uma classe podem ser definidos como privados, para evitar chamadas externas, mas JavaScript não possui tal configuração. Dê uma olhada no código a seguir:.

A seguir está o conteúdo citado:

var pessoa = {
nome:nulo,
init:função(nome){
this.setNome(nome);
},
setNome:função(nome){
este.nome = nome;
retorne este.nome;
}
}
pessoa.init('tom'); //tom

Nesta classe, há um total de 2 métodos, nomeadamente init e setName, e queremos apenas executar setName a partir do init, ou vários métodos que serão adicionados a ele no futuro, e não queremos que apareça:

pessoa.setNome('tom');

Chame o método setName diretamente. Para ser mais preciso, você deseja que o método setName seja privado e o atributo name seja privado. Isso evita que outros programadores chamem métodos que você não deseja que sejam chamados ao usar sua classe.
Então, como devemos encapsular bem as classes? Tente outro método de programação e veja como fica a versão revisada:

A seguir está o conteúdo citado:

var pessoa = função(){
var nome = nulo;
var setNome = função(n){
nome =n;
nome de retorno;
}
retornar{
inicialização:função(n){
setNome(n);
}
}
}

Desta forma, os métodos e propriedades que foram originalmente concebidos para serem privatizados podem ser privatizados e não podem ser chamados directamente do exterior. Isto também é conseguido através da utilização de encerramentos. Será muito difícil ver esse tipo de código e também ocupará mais memória do que os códigos comuns.
Ok, por enquanto é isso. Falarei sobre fechamentos e escopo na próxima vez que tiver tempo.

Artigos Relacionados