Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. JavaScript
Code

Herencia simple de JavaScript: Lo que usted necesita saber

by
Difficulty:IntermediateLength:ShortLanguages:
Sponsored Content

This sponsored post features a product relevant to our readers while meeting our editorial guidelines for being objective and educational.

Spanish (Español) translation by Elías Nicolás (you can also view the original English article)

Muchos de mis amigos son desarrolladores 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 a C# o C++ para crear un lenguaje orientado a objetos. Es un lenguaje basado en prototipos. El concepto de prototipado implica que el comportamiento puede ser reutilizado clonando objetos existentes que sirven como prototipos. Cada objeto en JavaScript depende de un prototipo que define un conjunto de funciones y miembros que el objeto puede utilizar. No hay clases—sólo objetos . Cada objeto puede entonces ser utilizado como prototipo para otro objeto.

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

Implementación de herencia

Echemos un vistazo a lo que queremos crear con esta jerarquía usando JavaScript:

Inheritance in JavaScript

En primer lugar, podemos crear ClassA fácilmente. Debido a que no hay clases explícitas, podemos definir un conjunto de comportamiento (una clase así ...) creando una función como ésta:

Esta "clase" se puede instanciar usando la palabra clave new:

Y para usarlo usando nuestro objeto:

Bastante simple, ¿no?

La muestra completa tiene sólo ocho líneas:

Ahora vamos a agregar una herramienta para crear "herencia" entre las clases. Esta herramienta solo tendrá que hacer una cosa: clonar el prototipo.

¡Aquí es exactamente donde ocurre la magia! Al clonar el prototipo, transferimos todos los miembros y funciones a la nueva clase.

Así que si queremos añadir una segunda clase que será hijo de la primera, sólo tenemos que usar este código:

A continuación, porque la ClassB heredó la función de print de ClassA, el código siguiente está funcionando:

Y produce la siguiente salida:

Incluso podemos anular la función print para ClassB:

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

El truco aquí es llamar a ClassA.prototype para obtener la función de base print. Entonces gracias a la función call podemos llamar a la función base del objeto actual (this).

La creación de ClassC es ahora obvia:

Y la salida es:

Más prácticas con JavaScript

Podría sorprenderte un poco, pero Microsoft tiene un montón de aprendizaje libre en muchos temas de código abierto de JavaScript, y estamos en una misión para crear mucho más con Microsoft Edge. Echa un vistazo al mio:

O la serie de aprendizaje de nuestro equipo:

Y algunas herramientas gratuitas: Visual Studio Community, Azure Trial y herramientas de prueba de inter-navegador para Mac, Linux o Windows.

Y Algo de filosofia...

Para concluir, sólo quiero indicar claramente que JavaScript no es C# o C++. Tiene su propia filosofía. Si usted es un desarrollador de C++ o C# y realmente desea abrazar el poder completo de JavaScript, la mejor sugerencia que puedo dar es: No intentes replicar tu lenguaje en JavaScript. No hay mejor o peor lenguaje. ¡Sólo filosofías diferentes!

Este artículo es parte de la serie desarrollador web de tecnología de Microsoft. Estamos encantados de compartir Microsoft Edge y el nuevo motor de renderizado EdgeHTML con usted. Obtenga máquinas virtuales gratuitas o pruebe de forma remota en su dispositivo Mac, iOS, Android o Windows @ http://dev.modern.ie/.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.