Casi OOP: herencia simple con JavaScript

Casi OOP: herencia simple con JavaScript

Muchos de mis amigos son desarrolladores de C# o C++. Están acostumbrados a usar herencia en sus proyectos y cuando quieren aprender o descubrir JavaScriptuna de las primeras preguntas que hacen es: “¿Pero cómo puedo hacer herencia con JavaScript?”

En realidad, JavaScript utiliza un enfoque diferente al de C# o C++ para crear un lenguaje orientado a objetos. Es un basado en prototipos idioma. El concepto de creación de prototipos implica que el comportamiento puede reutilizarse mediante la clonación. existente objetos que sirven como prototipos. Cada objeto en JavaScript depende de un prototipo que define un conjunto de funciones y miembros que el objeto puede usar. No hay clase. Solo objetos. Cada objeto se puede utilizar como prototipo para otro objeto. Este concepto es extremadamente flexible y podemos usarlo para simular algunos conceptos de OOP como la herencia.

Implementando la herencia

Imaginemos lo que queremos crear con esta jerarquía usando JavaScript:

imagen

En primer lugar, podemos crear ClassA fácilmente. Debido a que no hay clases explícitas, podemos definir un conjunto de comportamientos (una clase entonces…) simplemente creando una función como esta:

var ClassA = function() {
    this.name = "class A";
}

Esta «clase» se puede instanciar usando el nuevo palabra clave:

var a = new ClassA();
ClassA.prototype.print = function() {
    console.log(this.name);
}

Y para usarlo usando nuestro objeto:

a.print();

Justamente sencillo, ¿derecho? La muestra completa tiene solo 8 líneas:

var ClassA = function() {
    this.name = "class A";
}

ClassA.prototype.print = function() {
    console.log(this.name);
}

var a = new ClassA();

a.print();

Ahora agreguemos una herramienta para crear «herencia» entre clases. Esta herramienta solo tendrá que hacer una sola cosa: Clonando el prototipo:

var inheritsFrom = function (child, parent) { child.prototype = Object.create(parent.prototype); };

Esto es exactamente donde ocurre la magia! Al clonar el prototipo, transferimos todos los miembros y funciones a la nueva clase. Entonces, si queremos agregar una segunda clase que será hija de la primera, solo tenemos que usar este código:

var ClassB = function() {
    this.name = "class B";
    this.surname = "I'm the child";
}

inheritsFrom(ClassB, ClassA);

Entonces porque Clase B heredó el imprimir función de Clase Ael siguiente código está funcionando:

var b = new ClassB();
b.print();

Y produce la siguiente salida:

clase B

Incluso podemos anular el imprimir función para Clase B:

ClassB.prototype.print = function() {
    ClassA.prototype.print.call(this);
    console.log(this.surname);
}

En este caso, la salida producida se verá así:

clase B soy el niño

El truco aquí es llamar ClaseA.prototipo para obtener la base imprimir función. Entonces gracias a llamar función podemos llamar a la función base en el objeto actual (este). Creando Clase C ahora es obvio:

var ClassC = function () {
    this.name = "class C";
    this.surname = "I'm the grandchild";
}

inheritsFrom(ClassC, ClassB);

ClassC.prototype.foo = function() {
    // Do some funky stuff here...
}

ClassC.prototype.print = function () {
    ClassB.prototype.print.call(this);
    console.log("Sounds like this is working!");
}

var c = new ClassC();
c.print();

Y la salida es:

clase C soy el nieto

¡Parece que esto está funcionando!

Más prácticas con JavaScript

Puede que te sorprenda un poco, pero Microsoft tiene un montón de aprendizaje gratuito sobre muchos temas de código abierto de JavaScript y tenemos la misión de crear mucho más con Llega el Proyecto Spartan. Echa un vistazo a la mía:

O la serie de aprendizaje de nuestro equipo:

Y algunas herramientas gratuitas: Comunidad de Visual Studio, Prueba de Azurey herramientas de prueba de navegador cruzado para Mac, Linux o Windows.

Y Algo De Filosofia…

Para concluir, solo quiero dejar claro que JavaScript no es C# ni C++. tiene lo suyo filosofía. Si es un desarrollador de C++ o C# y realmente quiere aprovechar todo el poder de JavaScript, el mejor consejo que puedo darle es: No intente replicar su lenguaje en JavaScript. No hay un idioma mejor o peor. ¡Solo diferentes filosofías!

Este artículo es parte de la web. desarrollador serie de tecnología de Microsoft. Estamos emocionados de compartir proyecto espartano y es nuevo motor de renderizado contigo. Obtenga máquinas virtuales gratuitas o realice pruebas de forma remota en su dispositivo Mac, iOS, Android o Windows @ moderno.ES.

#Casi #OOP #herencia #simple #con #JavaScript

Publicaciones Similares

Deja una respuesta

Tu dirección de correo electrónico no será publicada.