Entenda a herança do objeto JavaScript

Vamos primeiro estudar a pergunta em profundidade. O que é a herança do objeto JavaScript?

Por exemplo, temos um construtor de um objeto "animal".

 function animal () {this.type = 'animal'; }

Há também um construtor para o objeto "gato".

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

Sabemos que os gatos também pertencem a animais. Se esse objeto de gato deseja herdar as propriedades do objeto animal, o que devemos fazer?

Ligação do construtor

Usando a ligação do construtor é a maneira mais fácil, basta usar a chamada ou aplicar para vincular o objeto pai ao próprio objeto.

 função gato (nome, cor) {animal.apply (this, argumentos); this.name = nome; this.color = cor; } var cat1 = novo gato ("haha", 'vermelho'); console.log (cat1.type); // animais

No entanto, esse método é relativamente raro.

Cópia Herança

Se todas as propriedades e métodos do objeto pai forem copiados no objeto filho, também poderá ser alcançada a herança.

 função estend (filho, pai) {var p = parent.prototype; var c = child.prototype; for (var i em p) {c [i] = p [i]; } c.UBER = P; // função da ponte}

Como usar:

 estender (gato, animal); var cat1 = novo gato ("haha", "vermelho"); alerta (cat1.type); // animal

Herança de protótipo (protótipo)

Comparado com a ligação direta acima, o método de herança do protótipo é mais comum. Resumi brevemente o protótipo.

Cada função possui um atributo de protótipo, que é uma referência a um objeto. Ao criar uma nova instância usando a nova palavra -chave, este objeto de instância herdará atributos e métodos do objeto Prototype.

Ou seja, se o atributo protótipo do construtor "CAT" é apontado para uma instância "animal", quando a instância do objeto "Cat" é criada, as propriedades e métodos do objeto "animal" são herdados.

Exemplo de herança

 cat.prototype = new animal (); cat.prototype.constructor = Cat; var cat1 = novo gato ("haha", "vermelho"); console.log (cat1.Constructor == CAT); // True Console.log (cat1.type); //Animal

1. Na primeira linha do código, apontamos o objeto de protótipo da função CAT para uma instância de um objeto animal (que contém o atributo de tipo de animal).

2. O que significa a segunda linha do código?

1) Primeiro, se não adicionarmos esta linha de código, execute

cat.prototype = new animal ();

console.log (Cat.prototype.Constructor == Animal); //verdadeiro

Em outras palavras, de fato, cada objeto de protótipo possui um atributo construtor apontando para sua função construtora.

2) Vejamos o seguinte código

 cat.prototype = new animal (); var cat1 = novo gato ("haha", 'vermelho'); console.log (cat1.constructor == animal); //verdadeiro

Pelo exposto, vemos que o construtor de instância CAT1 é animal, então está obviamente errado. . . O CAT1 é claramente gerado por New Cat (), por isso devemos corrigi -lo manualmente. O valor do construtor do objeto Cat.Prototype é alterado para CAT.

3) Portanto, este também é um ponto em que devemos prestar atenção. Se substituirmos o objeto de protótipo, devemos corrigir manualmente o atributo construtor do objeto de protótipo.

O.Prototype = {};

o.prototype.Constructor = O;

Herdar diretamente o protótipo

Como em objetos animais, propriedades inalteradas podem ser escritas diretamente em animal.prototipo. Em seguida, deixe o Cat.Prototype apontar para Animal.Prototype, que realiza a herança.

Agora vamos reescrever o objeto animal primeiro como:

 function animal () {} animal.prototype.type = 'animal';

Em seguida, implemente a herança:

 cat.prototype = animal.prototype; cat.prototype.constructor = Cat; var cat1 = novo gato ("haha", "vermelho"); console.log (cat1.type); // animais

Comparado ao método anterior, esse método parece ser mais eficiente (nenhuma instância animal é criada), economizando espaço. Mas isso está correto? A resposta está incorreta, vamos continuar lendo.

cat.prototype = animal.prototype;

Essa linha de código permite que o Cat.prototype e o Animal.Prototype apontem para o mesmo objeto; portanto, se uma certa propriedade do Cat.Prototype for alterada, ela será refletida no animal.prototipo, que obviamente não é o que queremos ver.

Por exemplo, nós corremos:

console.log (animal.prototype.constructor == animal) // false

Acabou sendo falso, por quê? cat.prototype.constructor = Cat; Essa linha também alterará a propriedade do construtor do animal.Prototype.

Use objetos vazios como intermediário

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

Combinando os dois métodos acima, porque F é um objeto vazio, quase não ocupa memória. A modificação do objeto de protótipo do gato no momento não afetará o objeto de protótipo do animal.

console.log (animal.prototype.Constructor == Animal); // verdadeiro

Em seguida, encapsulamos o método acima:

 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 ("haha", "vermelho"); console.log (cat1.type); // animal

Child.uber = parent.prototype; Essa linha de código é uma função de ponte, permitindo que o atributo Uber do objeto filho aponte diretamente para o atributo protótipo do objeto pai, o que equivale a abrir um canal chamado Uber no próprio objeto, para que a instância do objeto filho possa usar todas as propriedades e métodos do objeto pai.

O exposto acima é o meu entendimento de herdar objetos JavaScript. Espero que possa ajudá -lo mais ou menos. Obrigado pela sua leitura.