Post Top Ad

Your Ad Spot

martes, 28 de julio de 2020

Patrón de prototipo de JavaScript

patrón de prototipo de javascript

Hay muchas formas de estructurar el código JavaScript utilizando varios patrones de diseño en un esfuerzo por producir software que sea más fácil de razonar, reutilizable y mantenible. Uno de esos patrones es el patrón prototipo. Como sabemos, el propio JavaScript utiliza la creación de prototipos como un medio para aumentar los objetos integrados. Con el patrón prototipo, puede extender directamente los objetos de JavaScript y organizar su código de la manera que lo haría con un enfoque orientado a objetos más tradicional que podría encontrar en Java o PHP. Echemos un vistazo más de cerca al patrón de prototipo de JavaScript ahora.


¿Cuáles son los beneficios y las desventajas del patrón prototipo?

En resumen, la creación de prototipos permite a un desarrollador extender un objeto o anular los métodos existentes que el objeto pone a disposición del usuario. Dado que esto es nativo de cómo funciona JavaScript, podemos considerarlo un buen beneficio. Al utilizar el patrón de prototipo de JavaScript, puede modularizar mejor su código. Vimos los inicios de esto en nuestro ejemplo de artículo de cierre . Aquí hay algunos beneficios y desventajas.

Beneficios

  • La creación de prototipos es nativa de JavaScript
  • Le permite extender un objeto existente
  • Facilita la modularización del código.
  • Elimina variables y funciones del espacio de nombres global
  • Las funciones se cargan en la memoria solo una vez

Inconvenientes

  • El uso intensivo de la palabra clave 'this' puede causar confusión
  • Requiere un constructor y un prototipo de función

Ese último punto casi puede verse como un beneficio en realidad. La razón es que el constructor contendrá todas las variables. Cada vez que se realiza una nueva instancia, obtendrá un nuevo conjunto de variables para trabajar. Así es como puede tener una instancia de una casa donde su color es rojo, y otra instancia de una casa donde su color es azul. Las funciones residen en la sección del prototipo del patrón, y el gran beneficio aquí es que no importa cuántas instancias del constructor o "clase" particular con el que esté tratando, cada función individual se carga solo una vez en la memoria. Con estos ejemplos rápidos de beneficios y desventajas, echemos un vistazo a la estructura de un patrón prototipo.


Estructura del patrón prototipo

La forma en que funciona el patrón prototipo es que primero defina un objeto y lo asocie con un constructor. Por convención, el nombre del objeto se capitalizará. El código funcionará de la misma manera si no establece la primera letra en mayúscula, pero esta convención es una buena manera de indicar que cuando llame a este código más adelante, utilizará la new palabra clave. Como mencionamos, el patrón prototipo también utiliza la this palabra clave. De hecho, una buena actualización si es necesario es leer nuestro artículo al que se refiere esto junto con cómo funciona la nueva palabra clave en el tutorial de JavaScript . Veamos un ejemplo de este patrón.

Hacer clic Claro

Cuando ejecuta este código de ejemplo, puede ver que genera el resultado en función de los datos que pasamos. Utilizamos la new palabra clave para crear una nueva instancia de una Bicicleta, pasando la marca de ProdecoTech, que es una marca de bicicletas eléctricas realmente genial . Entonces, podemos quitar métodos de ese nuevo objeto que tenemos. Demostramos esto llamando a bike.goForward()pasar un 100 valor porcentual. Si todo funciona correctamente, vemos que ProdecoTech Bicycle avanza a una velocidad del 100 por ciento. salida a la pantalla. Ahora que tiene un Constructor, puede renovar tantas instancias diferentes como necesite. Esto es análogo a la creación de nuevos objetos en lenguajes basados ​​en clases. Probémoslo.

Hacer clic Claro

Cuando configuramos el prototipo de función para nuestra bicicleta, asignamos un objeto literal al prototipo. Un objeto literal consiste en uno o varios pares de valores clave. Hasta ahora solo tenemos una clave y un valor. La clave es 'goForward' y el valor es una función anónima. Lo que esto significa es que todos los objetos que se actualizan desde este constructor de bicicletas tendrán acceso a ese método en particular. Si tiene una bicicleta y todo lo que puede hacer es avanzar, puede tener problemas cuando llegue el momento de detenerse. Sería prudente que todas las bicicletas tengan la capacidad de reducir la velocidad o detenerse. Podemos agregar esto a todas las bicicletas simplemente ampliando su funcionalidad agregando un par de valores clave adicionales a la asignación literal del objeto en el prototipo de la función. Todo lo que tiene que hacer es agregar una coma después del primer par de valores clave y luego agregar otro par de valores clave según sea necesario. Veamos.

Extendiendo El Prototipo

Con nuestro prototipo de función actualizado, deberíamos poder hacer que cualquier instancia de una Bicicleta utilice cualquiera de los métodos.

Hacer clic Claro

Podemos ver que ahora funciona bastante bien para todas las bicicletas.


Más reducción global con espacios de nombres

Con el patrón prototipo, estamos eliminando funciones y variables del espacio de nombres global. Sin embargo, cuando llamamos a un código que hace uso de este patrón, esas nuevas instancias de un constructor residirán en el espacio de nombres global. Para mitigar incluso este nivel de variables globales, podemos crear nuestro propio espacio de nombres único para contener nuestro código. Aquí está nuestro código de ejemplo, ahora haciendo uso de un objeto para agregar este espacio de nombres. Todo lo que tenemos que hacer es crear una variable y asignarla a sí mismo si existe, o asignar un objeto vacío si no existe. Luego simplemente prefijas las otras partes del código para hacer uso del espacio de nombres.


Resumen del patrón de prototipo de JavaScript

En este tutorial, hemos visto cómo se puede usar el patrón prototipo de JavaScript para estructurar JavaScript de una manera más concisa, lo que lleva a una mejor organización del código. Los principales beneficios de este patrón son la reutilización del código , la simplificación del mantenimiento y la eliminación de variables y funciones del espacio de nombres global.. Eliminar variables y funciones del espacio de nombres global es especialmente importante ya que casi siempre habrá varias colecciones de diferentes bibliotecas de JavaScript en una página, y no necesitamos colisiones de nombres que puedan provocar errores y roturas. El patrón de prototipo hace uso de la funcionalidad de creación de prototipos integrada en el lenguaje. Esto lo convierte en una extensión natural del lenguaje en sí. Las funciones se cargan en la memoria solo una vez con el patrón prototipo, lo que conduce a un buen rendimiento. Finalmente, vimos que cuando se usa el patrón Prototype, siempre tendrá dos secciones: una para el propio constructor y otra para el área de creación de prototipos donde se definen los métodos. Y con eso, tenemos una introducción sólida al patrón de prototipo de JavaScript.

No hay comentarios.:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

outbrain

Páginas