Análisis en profundidad de la programación orientada a objetos de JavaScript

2. Programación orientada a objetos de JavaScript: herencia de constructores

Esta sección introduce principalmente cómo generar una instancia que "hereda" múltiples objetos.

Por ejemplo, ahora hay un constructor para un objeto "animal".

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

También hay un constructor de objetos "gato",

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

¿Cómo pueden los "gatos" heredar "animales"?

1. Constructor de unión

La forma más fácil es probablemente usar el método de llamada o aplicar para vincular el constructor del objeto principal al objeto infantil, es decir, agregar una línea al constructor del objeto infantil:

 function cat (nombre, color) {animal.apply (this, argumentos); this.name = name; this.color = color; } var cat1 = nuevo gato ("cabello grande", "amarillo"); alerta (Cat1.Specie); // Animal

2. Modo prototipo

Un enfoque más común es usar el atributo prototipo.

Si el objeto prototipo de "gato" apunta a una instancia de animal, entonces todas las instancias de "gato" pueden heredar animal.

 Cat.prototype = new Animal (); Cat.prototype.constructor = cat; var cat1 = nuevo gato ("cabello grande", "amarillo"); alerta (Cat1.Specie); // Animal

En la primera línea del código, señalamos el objeto Prototipo CAT a una instancia de animal.

1.cat.prototype = new Animal ();

Es equivalente a eliminar completamente el valor original del objeto prototipo y luego asignar un nuevo valor. Pero, ¿qué significa la segunda línea?

1.cat.prototype.constructor = cat;

Resulta que cualquier objeto prototipo tiene un atributo de constructor que apunta a su función de constructor. En otras palabras, la propiedad del constructor del objeto CAT.Prototype apunta a CAT.

Hemos eliminado el valor original de este objeto prototipo en el paso anterior, por lo que el nuevo objeto prototipo no tiene el atributo del constructor, por lo que debemos agregarlo manualmente, de lo contrario habrá problemas con la "cadena de herencia" posterior. Esto es lo que significa la segunda línea.

En resumen, este es un punto muy importante, y debes seguirlo cuando se programas. Todo lo siguiente sigue: si se reemplaza el objeto prototipo,

1.o.prototype = {};

Luego, el siguiente paso debe ser agregar el atributo Constructor al nuevo objeto prototipo y referir este atributo a la función de constructor original.

1.o.prototype.constructor = o;

3. Heredar directamente el prototipo

Dado que en los objetos animales, las propiedades sin cambios se pueden escribir directamente a animal.prototype. Por lo tanto, también podemos dejar que Cat () salte a animal () y herede directamente animal.prototype.

Ahora, reescribamos primero el objeto animal:

1.Function Animal () {}

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

Luego, apunte al objeto prototipo del gato y apunte al objeto prototipo del animal, de modo que se complete la herencia.

 Cat.prototype = animal.prototype; Catcat.prototype.constructor = cat; var cat1 = nuevo gato ("cabello grande", "amarillo"); alerta (Cat1.Specie); // animales

En comparación con el método anterior, la ventaja de esto es que es relativamente eficiente (no es necesario ejecutar y crear instancias de animales) y es más ahorrador de memoria. La desventaja es que Cat.Prototype y Animal.Prototype ahora apuntan al mismo objeto, por lo que cualquier modificación para Cat.Prototype se reflejará en animal.prototype.

Entonces, el código anterior es realmente problemático. Consulte la segunda línea

1.cat.prototype.constructor = cat;

Esta oración en realidad cambió el atributo constructor del objeto animal.prototype!

1.alert (animal.prototype.constructor); // Gato

4. Use objetos vacíos como intermediario

Dado que la "herencia directa del prototipo" tiene las desventajas anteriores, un objeto vacío puede usarse como intermediario.

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

F es un objeto vacío, por lo que casi no ocupa la memoria. En este momento, modificar el objeto prototipo CAT no afectará el objeto prototipo animal.

1.alert (animal.prototype.constructor); // Animal

5. Función de encapsulación del modo prototipo

Encapsulamos el método anterior en una función para su uso fácil.

 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 ("cabello grande", "amarillo"); alerta (Cat1.Specie); // Animal

Esta función de extensión es el método de cómo la biblioteca YUI implementa la herencia.

Además, déjame explicarlo. La última línea del cuerpo de funciones

1.child.uber = parent.prototype;

Significa establecer un atributo Uber para el objeto infantil, que apunta directamente al atributo prototipo del objeto principal. Esto es equivalente a abrir un canal en el objeto infantil y llamar directamente al método del objeto principal. Esta línea se coloca aquí solo para lograr la integridad de la herencia y es puramente una propiedad de repuesto.

6. Copiar herencia

Lo anterior es usar objetos prototipo para implementar la herencia. También podemos cambiar nuestro pensamiento y usar el método "Copiar" para lograr la herencia. En pocas palabras, si todas las propiedades y métodos del objeto principal se copian en el objeto infantil, ¿no se puede lograr la herencia?

En primer lugar, coloque todas las propiedades sin cambios del animal en su objeto prototipo.

1.Function Animal () {}

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

Luego, escriba otra función para lograr el propósito de la copia de la propiedad.

 función extend2 (niño, parent) {var p = parent.prototype; var c = child.prototype; para (var i en p) {c [i] = p [i]; } c.uber = p; }

La función de esta función es copiar las propiedades en el objeto prototipo del objeto principal al objeto prototipo del objeto infantil uno por uno.

Al usarlo, escriba esto:

 extender2 (gato, animal); var cat1 = nuevo gato ("cabello grande", "amarillo"); alerta (Cat1.Specie); // Animal

El análisis anterior del artículo en profundidad de la programación orientada a objetos en JavaScript es todo el contenido que comparto con usted. Espero que pueda darle una referencia y espero que pueda apoyar más a Wulin.com.