Análise aprofundada da programação orientada a objetos JavaScript

2. Programação orientada a objetos JavaScript: herança de construtores

Esta seção apresenta principalmente como gerar uma instância que "herda" vários objetos.

Por exemplo, agora existe um construtor para um objeto "animal".

 function animal () {this.species = "animal"; }

Há também um construtor de objeto "gato",

 function gat (nome, cor) {this.name = name; this.color = cor; }

Como os "gatos" podem herdar "animais"?

1. Videira do construtor

A maneira mais fácil é provavelmente usar a chamada ou aplicar o método para vincular o construtor do objeto pai ao objeto filho, ou seja, adicionar uma linha ao construtor de objeto filho:

 função gato (nome, cor) {animal.apply (this, argumentos); this.name = nome; this.color = cor; } var cat1 = novo gato ("cabelos grandes", "amarelo"); Alerta (Cat1.spécies); // animal

2. Modo de protótipo

Uma abordagem mais comum é usar o atributo do protótipo.

Se o protótipo objeto de "gato" apontar para uma instância de animal, todas as instâncias de "gato" poderão herdar animais.

 Cat.prototype = new animal (); Cat.prototype.constructor = Cat; var cat1 = novo gato ("cabelos grandes", "amarelo"); Alerta (Cat1.spécies); // animal

Na primeira linha do código, apontamos o objeto de protótipo CAT para uma instância de animal.

1.cat.prototype = new animal ();

É equivalente a remover completamente o valor original do objeto de protótipo e depois atribuir um novo valor. Mas o que significa a segunda linha?

1.cat.prototype.Constructor = Cat;

Acontece que qualquer objeto de protótipo possui um atributo de construtor apontando para sua função construtora. Em outras palavras, a propriedade do construtor do objeto Cat.Prototype aponta para o CAT.

Excluímos o valor original desse objeto de protótipo na etapa anterior, para que o novo objeto de protótipo não tenha o atributo do construtor; portanto, devemos adicioná -lo manualmente, caso contrário, haverá problemas com a "cadeia de herança" subsequente. É isso que significa a segunda linha.

Em suma, este é um ponto muito importante e você deve segui -lo ao programar. Todos os seguintes seguintes: se o objeto de protótipo for substituído,

1.o.prototype = {};

Em seguida, a próxima etapa deve ser adicionar o atributo construtor ao novo objeto de protótipo e consultar esse atributo de volta à função do construtor original.

1.o.prototype.Constructor = O;

3. Herdar o protótipo diretamente

Como em objetos animais, propriedades inalteradas podem ser escritas diretamente para o animal.prototipo. Portanto, também podemos permitir que o gato () pule animal () e herde diretamente o animal.prototipo.

Agora, vamos reescrever o objeto animal primeiro:

1.Function animal () {}

2.animal.prototype.species = "Animal";

Em seguida, aponte o objeto de protótipo do gato e aponte para o objeto de protótipo do animal, para que a herança seja concluída.

 Cat.prototype = animal.prototype; Catcat.prototype.constructor = Cat; var cat1 = novo gato ("cabelos grandes", "amarelo"); Alerta (Cat1.spécies); // animais

Comparado com o método anterior, a vantagem disso é que ele é relativamente eficiente (não há necessidade de executar e criar instâncias de animais) e é mais economia de memória. A desvantagem é que o Cat.Prototype e Animal.Prototype agora apontam para o mesmo objeto; portanto, qualquer modificação em Cat.Prototype será refletida no animal.prototipo.

Portanto, o código acima é realmente problemático. Por favor, veja a segunda linha

1.cat.prototype.Constructor = Cat;

Esta frase realmente mudou o atributo construtor do objeto Animal.Prototype!

1.Art (Animal.prototype.Constructor); // Gato

4. Use objetos vazios como intermediário

Como a "herança direta do protótipo" tem as desvantagens acima, um objeto vazio pode ser usado como intermediário.

 var f = function () {}; F.prototype = animal.prototype; Cat.prototype = new f (); Cat.prototype.constructor = Cat;

F é um objeto vazio, por isso quase não ocupa memória. Neste momento, a modificação do objeto de protótipo CAT não afetará o objeto de protótipo animal.

1.Art (Animal.prototype.Constructor); // animal

5. Função de encapsulamento do modo de protótipo

Encapsamos o método acima em uma função para facilitar o uso.

 função estend (filho, pai) {var f = function () {}; F.Prototype = Parent.prototype; Child.prototype = new F (); Child.prototype.Constructor = Child; Child.uber = parent.prototype; }

Ao usá -lo, o método é o seguinte

 estender (gato, animal); var cat1 = novo gato ("cabelos grandes", "amarelo"); Alerta (Cat1.spécies); // animal

Esta função de extensão é o método de como a biblioteca YUI implementa herança.

Além disso, deixe -me explicar. A última linha do corpo da função

1.Child.UBER = Parent.prototype;

Isso significa definir um atributo Uber para o objeto filho, que aponta diretamente para o atributo protótipo do objeto pai. Isso é equivalente a abrir um canal no objeto filho e chamar diretamente o método do objeto pai. Essa linha é colocada aqui apenas para obter a integridade da herança e é puramente uma propriedade sobressalente.

6. Herança de cópia

O exposto acima é usar objetos de protótipo para implementar a herança. Também podemos alterar nosso pensamento e usar o método de "cópia" para obter herança. Simplificando, se todas as propriedades e métodos do objeto pai forem copiados no objeto filho, não pode ser alcançado?

Primeiro de tudo, coloque todas as propriedades inalteradas do animal em seu objeto de protótipo.

1.Function animal () {}

2.animal.prototype.species = "Animal";

Em seguida, escreva outra função para alcançar o objetivo da cópia da propriedade.

 function estend2 (filho, pai) {var p = parent.prototype; var c = child.prototype; for (var i em p) {c [i] = p [i]; } c.UBER = P; }

A função desta função é copiar as propriedades no objeto de protótipo do objeto pai para o objeto de protótipo do objeto filho um por um.

Ao usá -lo, escreva isso:

 estend2 (gato, animal); var cat1 = novo gato ("cabelos grandes", "amarelo"); Alerta (Cat1.spécies); // animal

A análise aprofundada do artigo acima da programação orientada a objetos no JavaScript é todo o conteúdo que compartilho com você. Espero que possa lhe dar uma referência e espero que você possa apoiar mais o wulin.com.