Simular la relación de herencia de clases y clases en JavaScript

La sintaxis de Javascipt no admite "clase" (clase) [ya compatible con ES6], pero hay métodos para simular clases. Hoy hablaré principalmente sobre el método de simular "clases" en Javascipt y el resumen y revisión de la herencia en JS.

Implementar "clases" y herencia en JS es la clave y la dificultad. Muchos estudiantes pueden tener cierta comprensión de las "clases" y la herencia en JS, pero cuando analizan en profundidad, sienten que no pueden hacerlo y son ambiguos.

Primero resumamos varios métodos para definir "clases" de JS:

Método 1: Método del constructor

Este método es un método relativamente clásico y lo veremos a menudo. Al generar una instancia, use la nueva palabra clave. Las propiedades y métodos de la clase también se pueden definir en el objeto prototipo del constructor.

 Función persona (nombre, edad, trabajo) {this.name = name; this.age = edad; this.job = Job;} persona.prototype.sayname = function () {alert (this.name);} var persona1 = nueva persona ("zhang san", "29", "administrador de la página principal"); var persona2 = nueva persona ("li si", "22", "doctor"); persona1.sayname ();); // Pop "Zhang San" Console.log (Person2.name) // Salida "Li Si"

Método 2: Método Object.Create ()

El método objeto.creat () como alternativa al nuevo operador solo se libera después de ES5. Usando este método, una "clase" es un objeto, no una función.

 var myMammal = {nombre: 'Herb the Mammal', get_name: function () {return this.name; }, dice: function () {return this.saying || ''; }} var mycat = object.create (mymammal); mycat.name = 'henrietta'; mycat.saying = 'meow'; mycat.get_name = function () {console.log (this.says + '' + this.name + this.says);} mycat.get_name ();

Producción:

 function () {return this.saying || ''; } Henriettafunction () {return this.saying || ''; }

Actualmente, las últimas versiones de los principales navegadores (incluido IE9) han implementado este método. Si se encuentra con un navegador antiguo, puede usar el siguiente código para implementarlo usted mismo.

 if (! object.create) {object.create = function (o) {function f () {} f.prototype = o; devolver nuevo f (); }; }

Método 3: Ley minimalista

Paquete

Este método no utiliza esto y el prototipo, y el código es muy simple de implementar. En primer lugar, también usa un objeto para simular "clase". En esta clase, defina un constructor creatfn () para generar una instancia.

 var dog = {creatfn: function () {// algún código aquí}};

Luego, en creatfn (), defina un objeto de instancia y use este objeto de instancia como valor de retorno.

 var dog = {creatfn: functer () {var dog = {}; dog.name = "perro"; dog.makesound = function () { alert("Woofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwo ofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoo fwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoof woofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofw OOFWOOFWOOFWOOFWOOFWOOFWOOFWOOFWOOFWOOFWOOFWOOFWOOFWOOFWOOFWOOFWOOFWOOFWOOFWOOFWOOFWOOFWOOFWOOFWOOFWOOFWOOFWO

Al usarlo, llame al método creatfn () para obtener el objeto de instancia.

 var dog1 = dog.creatfn (); dog1.Makesound (); // woof

La ventaja de este enfoque es que es fácil de entender, tiene una estructura clara y elegante, y está en línea con la construcción tradicional de "programación orientada a objetos", por lo que las siguientes características pueden implementarse fácilmente.

heredar

Es muy conveniente implementar una clase en la siguiente clase. Simplemente llame al método creatfn () del último en el método creatfn (). Primero defina una clase de animales.

 var animal = {creatfn: functer () {var animal = {}; animal.eat = function () {alerta ("comer comida"); }; animal de regreso; }};

Luego, en el método de creatfn () de perro, se llama al método creatfn () de animal.

 var dog = {creatfn: function () {var dog = animal.creatfn (); dog.name = "perro"; dog.makesound = function () {alert ("wangwoo"); }; perro de regreso; }};

La instancia de perro obtenida de esta manera heredará la clase de perro y la clase de animales al mismo tiempo.

 var dog1 = dog.creatfn (); dog1.eat (); // comer comida

Propiedades privadas y métodos privados

En el método creatfn (), siempre que los métodos y propiedades que no se definan en el objeto del perro sean privados.

 var dog = {creatfn: functer () {var dog = {}; var sound = "woof woof"; dog.makesound = function () {alerta (sonido); }; perro de regreso; }};

El sonido de la variable interna en el ejemplo anterior no se puede leer externamente, y solo se puede leer a través del método público Makeound () del perro.

 var dog1 = dog.creatfn (); alerta (dog1.Sound); // indefinido

Intercambio de datos

A veces, necesitamos todos los objetos de instancias para poder leer y escribir los mismos datos internos. En este momento, simplemente encapsule estos datos internos dentro del objeto de clase y fuera del método creatfn ().

 var dog = {sonido: "wowangwoo", creatfn: function () {var dog = {}; dog.makesound = function () {alert (dog.Sound); }; dog.changesound = function (x) {dog.Sound = x; }; perro de regreso; }};

Luego, se generan dos objetos de instancia:

 var dog1 = dog.creatfn (); var dog2 = dog.creatfn (); dog1.Makesound (); // woof

En este momento, si hay un objeto de instancia y los datos compartidos se modifican, el otro objeto de instancia también se verá afectado.

 dog2.changesound ("wuwuwu"); dog1.Makesound (); // wuwuwuwu

JS Herencia

Con respecto a la herencia, también hay mucha información disponible para la investigación en Internet, pero muchos amigos no la entienden lo suficiente. Cuando se trata de herencia, si no verifica la información y de repente es posible que no pueda decir la razón. Esto muestra que nuestro conocimiento básico no es lo suficientemente sólido. No completamente entendido. Hoy, estoy en base a mis predecesores, y revisemos esta herencia con usted.

Los dos métodos de herencia más utilizados son los siguientes:

• Herencia de la cadena prototipo (herencia entre objetos)
• Herencia clásica (herencia entre constructores)

Herencia de la cadena prototipo

¿Qué es la herencia de la cadena prototipo? No hablaré de la definición aquí. De hecho, es usar un prototipo para heredar el nivel principal.

Por ejemplo:

 función parent () {this.name = 'mike';} function Child () {this.age = 12;} child.prototype = new Parent (); // El niño hereda el padre y forma una cadena a través de la prototipo var test = new Child (); alert (test.age); alert (alert.name); // se invade atributas atributas // continúa la prototipo de la cadena inheritance inheritance inheritance inheriting () brother () brother (testing upruptrupt. this.weight = 60;} hermano.prototype = new Child (); // Continuar la cadena prototipo hereda var hermano = new Brother (); alerta (Brother.name); // heredar padre e hijo, Mikealert (hermano); // pop 12

En el ejemplo anterior, a través del prototipo, se forma una cadena. El niño hereda el padre. El hermano hereda el niño. Finalmente, Brother tiene los atributos de niño y padre, así como sus propios atributos. Esta es la herencia de la cadena original.

Herencia clásica (constructor de préstamo)

La herencia clásica generalmente usa la llamada o aplica para llamar al constructor Supertype internamente. Por ejemplo:

 Function Parent (Age) {this.name = ['Mike', 'Jack', 'Smith']; this.age = Age;} function Child (edad) {parent.call (this, edad);} var test = new Child (21); alert (test.age); // 21Alert (test.name); // Mike, jack, smithtest.name.push ('bill'); alerta (test.name); // mike, jack, smith, billet

Las dos herencias anteriores son los dos métodos de herencia más básicos.

Además, hay algunos métodos de herencia, ¡echemos un vistazo!

Herencia combinada

La herencia de combinación suele ser el método de herencia utilizado en la combinación de los dos métodos de herencia anteriores.

Como ejemplo:

 Function Parent (Age) {this.name = ['Mike', 'Jack', 'Smith']; this.age = age;} parent.prototype.run = function () {return this.name + 'son' + this.age;}; function child (edad) {parent.call (this, edad); // suplantación de objeto, pasar argumentos a superertype} child.prototype = new chell (); // Prototype de la cadena de la cadena varitance Var test = New Child (21); alerta (test.run ()); // Mike, Jack, Smith son ambos21

Herencia prototipo

Es solo una palabra diferente de la herencia de cadena original mencionada anteriormente, pero no es el mismo contenido. De lo que estamos hablando de la herencia prototipo es de lo que hablamos en la última clase, creando una nueva clase a través del método Object.Create (). Porque este método no es compatible con los viejos navegadores. Por lo tanto, si no usamos Object.Create (), también puede haber un método alternativo, como sigue:

 función obj (o) {function f () {} f.prototype = o; devolver nuevo f (); }

¡Esta función implementa la forma en que creamos clase en Object.Create ()!

Por lo tanto, lo siguiente es:

 función obj (o) {function f () {} f.prototype = o; devolver nuevo f (); } var box = {nombre: 'trigkit4', arr: ['hermano', 'hermana', 'baba']}; var b1 = obj (box); alert (b1.name); // trigkit4b1.name = 'Mike'; alerta (b1.name); // mikealert (b1.arr); // hermano, hermana, babab1.arr.push ('padres'); alerta (b1.arr); // hermano, hermana, baba, padresvar b2 = obj (box); alerta (b2.name); // trigkit4alert (b2.arr); // hermano, hermana, hermana, hermana, baba, padres);

Herencia parásita

Como ejemplo:

 function createAther (original) {var clone = nuevo objeto (original); clone.sayhi = function () {alert ("Hi")}; return clone;} var persona = {nombre: "haorooms", amigos: ["hao123", "zhansan", "lisi"]} var otroperson = createanother (persona); Antherperson.sayhi (); // hola

Combinación parásita

 function hereitprototype (subtipo, supertype) {var prototype = object.creat (supertype.prototype); prototipo.constructor = subtype; subtype.prototype = prototype;}; function supertype (name) {this.name = name; this.colors = ['rojo', 'azul', 'verde'];} supertype.prototype.sayname = function () {console.log (this.name);} function subtype (name, age) {//inheritprototype.call(this.ame); this.age = age;} // hereitprototype (subtype, supertype); subtype.prototype.sayage = function () {console.log (this.age);} var instance = new subtype ();

La herencia de clase es básicamente los métodos anteriores. ¡Hablemos brevemente sobre la clase de clase de ES6!

clase de implementación de ES6

 // Definir el punto de clase de clase {Constructor (x, y) {this.x = x; this.y = y; } toString () {return '('+this.x+','+this.y+')'; }} Var Point = New Point (2, 3); Point.ToString () // (2, 3) Point.hasownProperty ('x') // truePoint.hasownproperty ('y') // truePoint.HasownProperty ('toString') // falsepoint .__ Proto __.

La herencia de la clase

 ClassPoint de clase extiende el punto {constructor (x, y, color) {super (x, y); // llamar al constructor (x, y) de la clase principal this.color = color; } toString () {return this.color + '' + super.toString (); // llame a toString () de la clase principal}}