En JavaScript, la herencia es un mecanismo que permite la creación de nuevas clases basadas en clases existentes; la herencia proporciona flexibilidad para las subclases y puede reutilizar métodos y variables de las clases principales. El proceso de herencia se puede lograr mediante un prototipo. cadenas y constructores.
El entorno operativo de este tutorial: sistema Windows 10, versión JavaScript 1.8.5, computadora Dell G3.
La herencia de JavaScript es un mecanismo que nos permite crear nuevas clases basadas en clases existentes; proporciona flexibilidad para que las subclases reutilicen métodos y variables de las clases principales. El proceso de herencia es el proceso de lo general a lo especial.
Mantiene una relación IS-A.
La palabra clave extends se utiliza en expresiones de clase o declaraciones de clase.
Usando la palabra clave extends, podemos obtener todas las propiedades y comportamientos de los objetos integrados, así como las clases personalizadas.
También podemos implementar la herencia utilizando un enfoque basado en prototipos.
¿Cómo implementa JavaScript la herencia?
1. Cadena de prototipos
Idea básica: utilice prototipos para permitir que un tipo de referencia herede las propiedades y métodos de otro tipo de referencia.
La relación entre constructores, prototipos e instancias: cada constructor tiene un objeto prototipo, el objeto prototipo contiene un puntero al constructor y la instancia contiene un puntero interno al objeto prototipo.
Ejemplo de herencia de implementación de cadena de prototipo:
function SuperType() {this.property = true;}SuperType.prototype.getSuperValue = function() {return this.property;}function subType() {this.property = false;}//SuperTypeSubType.prototype heredado = new SuperType ( );SubType.prototype.getSubValue = function (){return this.property;}var instancia = new SubType();console.log(instance.getSuperValue());//true2. Constructor prestado
Idea básica: llame al constructor de superclase dentro del constructor de subtipo, y el constructor se puede ejecutar en el objeto recién creado utilizando los métodos call() y apply().
ejemplo:
function SuperType() {this.colors = ["rojo","azul","verde"];}function SubType() {SuperType.call(this);//Hereda SuperType}var instancia1 = new SubType() instancia1; .colors.push("negro");console.log(instance1.colors);//"rojo","azul","verde","negro"var instancia2 = new SubType();console.log(instancia2 . colores);//"rojo","azul","verde"3. Herencia combinada
Idea básica: un patrón de herencia que combina la tecnología de encadenamiento de prototipos y el préstamo de constructores para aprovechar lo mejor de ambos mundos.
ejemplo:
function SuperType(nombre) {this.name = nombre;this.colors = ["rojo","azul","verde"];}SuperType.prototype.sayName = function() {console.log(this.name); }función SubType(nombre, edad) {SuperType.call(this,name);//Atributo heredado this.age = edad;}//Método heredado SubType.prototype = new SuperType();Subtype.prototype.constructor = Subtype; Subtype.prototype.sayAge = function() {console.log(this.age);}var instancia1 = new SubType("EvanChen",18);instance1.colors.push("black");consol.log(instance1. colores);//"rojo","azul","verde","negro"instancia1.sayName();//"EvanChen"instancia1.sayAge();//18var instancia2 = nuevo Subtipo("EvanChen666",20 );console.log(instance2.colors);//"rojo","azul","verde"instance2.sayName();//"EvanChen666"instance2.sayAge();//204. Herencia prototípica
La idea básica: los prototipos le permiten crear nuevos objetos basados en los existentes sin tener que crear tipos personalizados.
La idea de herencia prototípica se puede ilustrar con la siguiente función:
objeto de función (o) {función F(){}F.prototype = o;return new F();}ejemplo:
var persona = {nombre:"EvanChen",amigos:["Shelby","Court","Van"];};var otraPersona = objeto(persona);otraPersona.nombre = "Greg";otraPersona.amigos.push( "Rob");var todavíaAnotherPerson = objeto(persona);yetAnotherPerson.name = "Linda";yetAnotherPerson.friends.push("Barbie");console.log(persona.amigos);//"Shelby","Court" ,"Furgoneta","Rob","Barbie"ECMAScript 5 estandariza la herencia de prototipos a través del nuevo método Object.create(), que acepta dos parámetros: un objeto usado como prototipo del nuevo objeto y un objeto usado como nuevo objeto para definir propiedades adicionales.
var persona = {nombre:"EvanChen",amigos:["Shelby","Court","Van"];};var otra Persona = Object.create(persona); otra Persona.nombre = "Greg"; otra Persona.amigos. push("Rob");var todavíaAnotherPerson = Object.create(persona);yetAnotherPerson.name = "Linda";yetAnotherPerson.friends.push("Barbie");console.log(persona.amigos);//"Shelby" ,"Corte","Van","Rob","Barbie"5. Herencia parasitaria
La idea básica: crear una función que simplemente encapsule el proceso de herencia, mejore el objeto de alguna manera internamente y devuelva el objeto como si realmente hiciera todo el trabajo.
ejemplo:
function createAnother(original) {var clone = object(original);clone.sayHi = function () {alert("hola");};return clone;}var persona = {nombre:"EvanChen",amigos:["Shelby ","Corte","Van"];};var otraPersona = crearOtra(persona);otraPersona.decirHola();///"hola"6. Herencia combinatoria parasitaria
Idea básica: heredar propiedades tomando prestadas funciones y heredar métodos a través de la forma híbrida de la cadena prototipo.
Su modelo básico es el siguiente:
función heredarProperty(subType, superType) {var prototipo = objeto(superType.prototype);//Crear objeto prototipo.constructor = subType;//Mejorar objeto subType.prototype = prototipo;//Especificar objeto}ejemplo:
function SuperType(nombre){this.name = nombre;this.colors = ["rojo","azul","verde"];}SuperType.prototype.sayName = function (){alerta(este.nombre);}; function SubType(nombre,edad){SuperType.call(this,name);this.age = edad;}heredarProperty(SubType,SuperType);SubType.prototype.sayAge = function() {alerta(this.age);}