Este artículo describe el mecanismo de herencia de JavaScript. Compártelo para su referencia. El análisis específico es el siguiente:
En general, es difícil para los principiantes comprender el mecanismo de herencia del lenguaje JavaScript. No tiene el concepto de "subclase" y "clase principal", ni tiene la distinción entre "clase" y "instancia". Se basa completamente en un modelo muy extraño de "cadena prototipo" para lograr la herencia.
Pasé mucho tiempo estudiando esta parte y tomando muchas notas. Pero todos son memoria forzada y no pueden entenderse fundamentalmente.
1. Cómo crear una clase
Supongamos que hay una clase llamada persona de la siguiente manera:
Copie el código de la siguiente manera: var persona = función (nombre, edad) {
this.name = name;
this.age = edad;
}
Persona.prototype.getName = function () {
devolver esto.name;
}
Como se mencionó anteriormente: la persona representa a todas las personas en la tierra, y todos tienen estos dos atributos básicos: nombre y edad; Ahora queremos implementar una clase de estudiante, y luego lo sabemos; Los estudiantes también son una persona, y los estudiantes también tienen atributos como el nombre y la edad; La pregunta ahora es ¿cómo podemos construir esta relación?
Primero veamos cómo lo hacen los idiomas puros orientados a objetos (como ActionSscript3)
Copie el código de la siguiente manera: los estudiantes de clase extienden a la persona {}; // Es muy simple, una línea de código; ser más preciso, una palabra: extender
2. ¿Cómo puedo hacerlo si lo cambio a JS
Antes de explicar la implementación del mecanismo de herencia JS, primero entendamos la cadena prototipo de JS:
La copia del código es la siguiente: var persona = nueva persona ('Poeded-flw', 21);
persona.getName (); // "Poused-Flw"
En cuanto al método GetName () anterior, ¿cómo se ejecuta? Primero, encontrará si hay un método getName () en la función de la persona y encontrar no; Luego ve a la persona. Prototipo para buscar y descubrir que hay! Entonces llámalo, ¿y si no es así? ¡Continúe siguiendo el mismo método y busque a lo largo del prototipo hasta que encuentre el método o alcance la parte superior de la cadena prototipo!
Por ejemplo, ahora hay un constructor llamado perro que representa el prototipo de un objeto de perro.
Copie el código de la siguiente manera: function dog (nombre) {
this.name = name;
}
Usar NUEVO para este constructor generará una instancia del objeto Dog.
La copia del código es la siguiente: var dogA = nuevo perro ('cabello grande');
alerta (dada.name); // cabello grande
Preste atención a esta palabra clave en el constructor, que representa el objeto de instancia recién creado.
3. Desventajas del nuevo operador
Hay una desventaja en el uso de constructores para generar objetos de instancia, es decir, la capacidad de compartir atributos y métodos.
Por ejemplo, en el constructor del objeto de perro, establezca las especies de atributos comunes de un objeto de instancia.
Copie el código de la siguiente manera: function dog (nombre) {
this.name = name;
this.species = 'canidae';
}
Luego, se generan dos objetos de instancia:
La copia del código es la siguiente: var dogA = nuevo perro ('cabello grande');
var dogB = nuevo perro ('eimao');
Los atributos de la especie de estos dos objetos son independientes, modificar uno no afectará al otro.
La copia del código es la siguiente: dada.specie = 'femenino';
alerta (dogb.specie); // Mostrar "familia canina", no afectada por doga
Cada objeto de instancia tiene su propia copia de sus propiedades y métodos. Esto no solo no puede compartir datos, sino también un gran desperdicio de recursos.
Entonces: Idea de herencia: ¡Implemente el mecanismo de herencia a través de la cadena prototipo única de JS!
4. Herencia basada en la cadena prototipo
1. Herencia e implementación directa
Copie el código de la siguiente manera: VAR Students = function (nombre, edad, sid) {
Person.call (esto, nombre, edad);
this.sid = sid;
}
Estudiantes.prototype = new Person (); // Ponga a la persona en la cadena prototipo de estudiantes para implementar el mecanismo de herencia
Estudiantes.prototype.constructor = estudiantes;
Estudiantes.prototype.getResults = function () {
// Obtener las calificaciones de los estudiantes
}
Es necesario no perderse a los estudiantes.prototype. , al definir un constructor, su prototipo predeterminado es una instancia de objeto, y luego el atributo de constructor del prototipo se establece automáticamente en la función misma. ! ! Si el prototipo se establece manualmente en otro objeto, el nuevo objeto, naturalmente, no tendrá el valor del constructor del objeto original, por lo que se debe restablecer su atributo constructor. como:
Copie el código de la siguiente manera: var test = function () {
this.time = "ahora";
}
console.log (test.prototype); // objeto {} un objeto vacío
console.log (test.prototype.constructor); // function () {this.time = "ahora";}, y la función misma
// Si cambia manualmente la propiedad prototipo de la prueba
Test.prototype = {
someFunc: function () {
console.log ('¡Hola mundo!');
}
};
console.log (test.prototype.constructor); // función objeto () {[código nativo]}
// Entonces encontrará que el punto es completamente incorrecto, por lo que cuando cambia manualmente la propiedad prototipo, debe cambiar su apuntado del constructor;
Después de la prueba anterior, sabrá por qué necesita modificar el valor del constructor.
2. Se extiende la función hereditaria encapsulada
Copie el código de la siguiente manera: Function Extend (Subclass, SuperClass) {
var f = function () {};
F.prototype = superclass.prototype;
subclass.prototype = new f ();
subclass.prototype.constructor = subclass;
}
De hecho, la función de esta función es solo una encapsulación del proceso de herencia anterior, y las diferencias son:
Solo hereda el atributo prototipo de superclase, y no hereda los atributos en el constructor de superclase;
¡La ventaja de esto es reducir la sobrecarga del nuevo constructor!
Por supuesto, el problema posterior es que no puede simplemente pasar esta función para permitir que la subclase herede todas las propiedades de la superclase
mejorar:
Copie el código de la siguiente manera: // Continúe agregando una línea de código al constructor de estudiantes:
Person.call (esto, nombre, edad);
5. Resumen
Utilizando el principio de la cadena prototipo de JS, podemos implementar fácilmente el mecanismo de herencia JS. Aunque no es muy estricto, mi objetivo se ha logrado: ¡intente parecer un código repetitivo una vez!
Espero que este artículo sea útil para la programación de JavaScript de todos.