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); // animaisNo 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); // animalHeranç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); //Animal1. 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); //verdadeiroPelo 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); // animaisComparado 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); // animalChild.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.