Comprender la herencia de objeto JavaScript

Primero estudiemos la pregunta en profundidad. ¿Qué es la herencia de objeto JavaScript?

Por ejemplo, tenemos un constructor de un objeto "animal".

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

También hay un constructor para el objeto "gato".

 function cat (nombre, color) {this.name = name; this.color = color; }

Sabemos que los gatos también pertenecen a los animales. Si este objeto de gato quiere heredar las propiedades del objeto animal, ¿qué debemos hacer?

Constructor unido

El uso de la unión del constructor es la forma más fácil, simplemente use la llamada o aplique para vincular el objeto principal al propio objeto.

 function cat (nombre, color) {animal.apply (this, argumentos); this.name = name; this.color = color; } var cat1 = new Cat ("jaja", 'rojo'); console.log (Cat1.Type); // animales

Sin embargo, este método es relativamente raro.

Copiar herencia

Si todas las propiedades y métodos del objeto principal se copian en el objeto infantil, también se puede lograr la herencia.

 function extender (niño, parent) {var p = parent.prototype; var c = child.prototype; para (var i en p) {c [i] = p [i]; } c.uber = p; // Función de puente}

Cómo usar:

 extender (gato, animal); var cat1 = nuevo gato ("jaja", "rojo"); alerta (Cat1.Type); // Animal

Herencia prototipo (prototipo)

En comparación con la unión directa anterior, el método de herencia prototipo es más común. Yo mismo he resumido brevemente el prototipo.

Cada función tiene un atributo prototipo, que es una referencia a un objeto. Al crear una nueva instancia utilizando la nueva palabra clave, este objeto de instancia heredará atributos y métodos desde el objeto prototipo.

Es decir, si el atributo prototipo del constructor "CAT" apunta a una instancia de "animal", entonces cuando se crea la instancia del objeto "CAT", se heredan las propiedades y los métodos del objeto "animal".

Ejemplo de herencia

 cat.prototype = new Animal (); cat.prototype.constructor = cat; var cat1 = nuevo gato ("jaja", "rojo"); console.log (Cat1.Constructor == Cat); // True Console.log (Cat1.Type); //Animal

1. En la primera línea del código, señalamos el objeto prototipo de la función CAT a una instancia de un objeto animal (que contiene el atributo de tipo de animal).

2. ¿Qué significa la segunda línea del código?

1) Primero, si no agregamos esta línea de código, ejecutar

cat.prototype = new Animal ();

console.log (cat.prototype.constructor == animal); //verdadero

En otras palabras, de hecho, cada objeto prototipo tiene un atributo de constructor que apunta a su función de constructor.

2) Veamos el siguiente código

 cat.prototype = new Animal (); var cat1 = nuevo gato ("jaja", 'rojo'); console.log (cat1.constructor == animal); //verdadero

De lo anterior vemos que el constructor de instancia cat1 es animal, por lo que obviamente es incorrecto. . . Cat1 es claramente generado por New Cat (), por lo que debemos corregirlo manualmente. El valor del constructor del objeto CAT.Prototype se cambia a CAT.

3) Entonces, este también es un punto al que debemos prestar atención. Si reemplazamos el objeto prototipo, debemos corregir manualmente el atributo del constructor del objeto prototipo.

o.prototype = {};

O.Prototype.Constructor = O;

Heredar directamente el prototipo

Dado que en los objetos animales, las propiedades sin cambios se pueden escribir directamente en animal.prototype. Luego deje que Cat.Prototype apunte a Animal.Prototype, que realiza la herencia.

Ahora reescribamos el objeto animal primero como:

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

Luego implementa la herencia:

 cat.prototype = animal.prototype; cat.prototype.constructor = cat; var cat1 = nuevo gato ("jaja", "rojo"); console.log (Cat1.Type); // animales

En comparación con el método anterior, este método parece ser más eficiente (no se crean instancias de animales), ahorrando espacio. ¿Pero es esto correcto? La respuesta es incorrecta, continuemos leyendo.

cat.prototype = animal.prototype;

Esta línea de código permite que Cat.Prototype y Animal.Prototype apunten al mismo objeto, por lo que si se cambia una determinada propiedad de Cat.Prototype, se reflejará en animal.prototype, que obviamente no es lo que queremos ver.

Por ejemplo, ejecutamos:

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

Resultó ser falso, ¿por qué? cat.prototype.constructor = cat; Esta línea también cambiará la propiedad del constructor de animal.prototype.

Use objetos vacíos como intermediario

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

Combinando los dos métodos anteriores, porque F es un objeto vacío, casi no ocupa la memoria. La modificación del objeto prototipo de CAT en este momento no afectará el objeto prototipo de Animal.

console.log (animal.prototype.constructor == animal); // verdadero

Luego encapsulamos el método anterior:

 function extend (child, parent) {var f = function () {}; F.Prototype = parent.prototype; Child.prototype = new f (); Child.prototype.Constructor = Child; Child.uber = parent.prototype; }

Al usarlo, el método es el siguiente:

 extender (gato, animal); var cat1 = nuevo gato ("jaja", "rojo"); console.log (Cat1.Type); // Animal

Child.uber = parent.prototype; Esta línea de código es una función de puente, que permite que el atributo Uber del objeto infantil apunte directamente al atributo prototipo del objeto principal, que es equivalente a abrir un canal llamado Uber en el objeto propio, de modo que la instancia del objeto infantil pueda usar todas las propiedades y métodos del objeto principal.

Lo anterior es mi comprensión de heredar objetos JavaScript. Espero que pueda ayudarte más o menos. Gracias por tu lectura.