Recientemente, leí en línea sobre la experiencia de alguien durante una entrevista con Taobao, y luego descubrí que había muchas cosas que no tenía claras, así que escribí algunos artículos para profundizar mi comprensión sobre algunos temas.
Una pregunta mencionada en el artículo es: ¿Cómo implementa JavaScript la herencia?
A continuación explicaré algunos métodos y ejemplos que encontré en línea para profundizar mi impresión.
Sabemos que las funciones en JavaScript son versátiles, además de usarse para definiciones de funciones, también se pueden usar para definiciones de clases.
La herencia en JavaScript es un poco extraña. A diferencia de C++ y algunos lenguajes orientados a objetos, no tiene modificaciones de control de acceso como público y privado, y no hay implementos u otros símbolos específicos para indicar la herencia.
Con respecto a la herencia de clases de JavaScript, puede consultar el siguiente ejemplo.
Copie el código de código de la siguiente manera:
<tipo de script="texto/javascript">
función Persona() {
//propiedades
this.Gender = "femenino";
esta.Edad = 18;
this.Words = "Silencio";
// método
this.gritando = función() {
alert("¡Feliz! Método de la clase padre");
}
}
//Heredar
funciónProgramador() {
this.base = Persona;
}
Programador.prototipo = nueva persona;
//Agregar nuevos métodos a las subclases
Programador.prototipo.typeCode = función() {
alert("¡Soy un codificador! Trabajador migrante de TI, muy descontento. Método de subclase");
}
// Ejemplo de llamada
función decirHola() {
var a = nuevo Programador();
alert(a.Gender); // Llama a las propiedades de la clase padre.
a.shouting(); // Llama al método de la clase padre
a.typeCode(); // Llama al método de la subclase
}
decir hola();
</script>
En el ejemplo anterior, primero se declara una clase de persona, que contiene algunos atributos y métodos, y luego se declara una clase de programador, que tiene un atributo base. Este atributo no es necesario, pero por motivos de especificaciones y para encontrar objetos en. en el futuro Es necesario escribir todas las clases heredadas y luego copiar la clase de persona al objeto prototipo del programador (prototipo) para realizar la herencia de clase.
Simular algunos principios de clases y herencia en JavaScript.
En lenguajes orientados a objetos, usamos clases para crear un objeto personalizado. Sin embargo, todo en JavaScript es un objeto, entonces, ¿cómo crear un objeto personalizado?
Esto requiere la introducción de otro concepto: prototipo. Podemos simplemente considerar el prototipo como una plantilla. Los objetos personalizados recién creados son todas copias de esta plantilla (prototipo) (en realidad no son una copia, sino un enlace. Es solo que este tipo de enlace es). invisible y da la impresión de que es una copia).
Veamos un ejemplo de creación de un objeto personalizado mediante un prototipo:
Copie el código de código de la siguiente manera:
//Constructor
función Persona(nombre, sexo) {
this.nombre = nombre;
this.sexo = sexo;
}
//Definir el prototipo de Persona. Los objetos personalizados pueden hacer referencia a las propiedades del prototipo.
Persona.prototipo = {
obtenerNombre: función() {
devolver este.nombre;
},
obtenerSexo: función() {
devolver este.sexo;
}
}
Aquí llamamos constructor a la función Persona, que es una función que crea un objeto personalizado. Se puede ver que JavaScript simula las funciones de clases a través de constructores y prototipos.
El siguiente es un ejemplo para explicar en detalle el trabajo específico realizado por JavaScript al crear un objeto personalizado:
Copie el código de código de la siguiente manera:
var zhang = nueva Persona("ZhangSan", "hombre");
console.log(zhang.getName()); // "ZhangSan"
var chun = nueva Persona("ChunHua", "mujer");
console.log(chun.getName()); // "ChunHua"
Cuando se ejecuta el código var zhang = new Person("ZhangSan", "man"), en realidad se hacen internamente las siguientes cosas:
Cree un objeto en blanco (nuevo Objeto()).
Copie los atributos (pares clave-valor) en Person.prototype a este objeto vacío (como mencionamos anteriormente, la implementación interna no es una copia sino un enlace oculto).
Pase este objeto al constructor a través de la palabra clave this y ejecute el constructor.
Asigne este objeto a la variable zhang.
Todo el trabajo hecho.
Para demostrar que la plantilla prototipo no se copia en el objeto instanciado, sino que es una forma de vinculación, consulte el siguiente código:
Copie el código de código de la siguiente manera:
función Persona(nombre, sexo) {
this.nombre = nombre;
this.sexo = sexo;
}
Persona.prototipo.edad = 20;
var zhang = nueva Persona("ZhangSan", "hombre");
consola.log(zhang.edad); // 20
// Anula el atributo de edad en el prototipo
zhang.edad = 19;
consola.log(zhang.edad); // 19
eliminar zhang.age;
// Después de eliminar el atributo de instancia age, este valor de atributo se obtiene nuevamente del prototipo
consola.log(zhang.edad); // 20
En el ejemplo anterior, si solo se obtiene copiando, después de eliminar el atributo de edad, el objeto no existirá. Sin embargo, el atributo de edad en el ejemplo aún se puede generar o se sobrescribirá el valor anterior, lo que indica que. Solo eliminó el atributo con el mismo nombre en la subclase, y el atributo de edad en la clase principal todavía existe en el objeto a través de un enlace invisible.
¿Cómo implementar herencia simple en JavaScript?
El siguiente ejemplo crea una clase de empleado Empleado que hereda todas las propiedades del prototipo de Persona.
Copie el código de código de la siguiente manera:
función Empleado(nombre, sexo, ID de empleado) {
this.nombre = nombre;
this.sexo = sexo;
this.employeeID = empleadoID;
}
// Apunta el prototipo de Empleado a una instancia de Persona
// Debido a que las instancias de Persona pueden llamar a métodos en el prototipo de Persona, las instancias de Empleado también pueden llamar a todas las propiedades en el prototipo de Persona.
Empleado.prototipo = nueva Persona();
Empleado.prototipo.getEmployeeID = función() {
devolver this.employeeID;
};
var zhang = nuevo Empleado("ZhangSan", "man", "1234");
console.log(zhang.getName()); // "ZhangSan
Bien, los anteriores son algunos procesos y métodos específicos para implementar la herencia en JavaScript.
Por supuesto, para resumir, el mecanismo de herencia en JavaScript solo se basa en la simulación. En comparación con algunos lenguajes orientados a objetos, es tosco y tiene algunos defectos. Sin embargo, en general, esto todavía no reduce la eficiencia de los desarrolladores front-end. . entusiasmo.