Herencia simple de JavaScript lo que necesitas saber

Muchos de mis amigos son desarrolladores de C # o C ++. Están acostumbrados a usar la herencia en sus proyectos, y cuando quieren aprender o descubrir JavaScript, una de las primeras preguntas que hacen es: "¿Pero cómo puedo hacer la 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 prototipo idioma. El concepto de prototipado implica que el comportamiento puede ser reutilizado por clonación. existente Objetos que sirven de prototipos. Cada objeto en JavaScript depende de un prototipo que define un conjunto de funciones y miembros que el objeto puede usar. No hay objetos de clase justa. Cada objeto puede ser utilizado como prototipo para otro objeto..

Este concepto es extremadamente flexible, y podemos usarlo para simular algunos conceptos de OOP, como la herencia.

Implementando Herencia

Veamos lo que queremos crear con esta jerarquía mediante JavaScript:

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

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

Esta "clase" puede ser instanciada usando el nuevo palabra clave:

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

Y para usarlo utilizando nuestro objeto:

una impresión();

Bastante simple, a la derecha?

La muestra completa tiene solo ocho líneas de largo:

var ClassA = function () this.name = "class A";  ClassA.prototype.print = function () console.log (this.name);  var a = new ClassA (); una impresión();

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

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

¡Aquí 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 = "Soy el niño";  inheritsFrom (ClassB, ClassA);

Entonces porque Clase B heredó el impresión función desde Clase A, El siguiente código está funcionando:

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

Y produce la siguiente salida:

clase B

Incluso podemos anular el impresión 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 ClassA.prototype para obtener la base impresión función. Entonces gracias a la llamada función que podemos llamar la función base en el objeto actual (esta).

Creando Clase C ahora es obvio:

var ClassC = function () this.name = "class C"; this.surname = "Soy el nieto";  inheritsFrom (ClassC, ClassB); ClassC.prototype.foo = function () // Haga algunas cosas extrañas aquí ... ClassC.prototype.print = function () ClassB.prototype.print.call (this); console.log ("Suena como si esto estuviera funcionando!");  var c = new ClassC (); c.print ();

Y la salida es:

clase C soy el nieto Suena como si esto estuviera funcionando!

Más práctica 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 estamos en la misión de crear mucho más con Microsoft Edge. Echa un vistazo a mi propia:

• Introducción a WebGL 3D con HTML5 y Babylon.JS
• Creación de una aplicación de una sola página con ASP.NET y AngularJS
• Gráficos de vanguardia en HTML

O la serie de aprendizaje de nuestro equipo:

• Consejos prácticos de rendimiento para hacer que su HTML / JavaScript sea más rápido (una serie de siete partes que abarca desde el diseño responsivo hasta los juegos casuales y la optimización del rendimiento)
• The Modern Web Platform Jump Start (los fundamentos de HTML, CSS y JS)
• Desarrollo de la aplicación universal de Windows con HTML y JavaScript Jump Start (use el JS que ya creó para crear una aplicación)

Y algunas herramientas gratuitas: Visual Studio Community, Azure Trial y herramientas de prueba en varios navegadores para Mac, Linux o Windows.

Y algo de filosofía ...

Para concluir, solo quiero indicar claramente que JavaScript no es C # o C ++. Tiene su propio filosofía. Si eres un desarrollador de C ++ o C # y realmente quieres aprovechar todo el poder de JavaScript, el mejor consejo que puedo darte es: No intentes replicar tu lenguaje en JavaScript. No hay mejor o peor lenguaje. Solo diferentes filosofias!

Este artículo es parte de la serie web dev tech de Microsoft. Estamos muy contentos de compartir Microsoft Edge y lo nuevo Motor de renderizado EdgeHTML con usted. Obtenga máquinas virtuales gratuitas o realice pruebas a distancia en su dispositivo Mac, iOS, Android o Windows @ http://dev.modern.ie/.

Aprender JavaScript: la guía completa

Hemos creado una guía completa para ayudarlo a aprender JavaScript, ya sea que esté comenzando a trabajar como desarrollador web o si desea explorar temas más avanzados..