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 incorporados. Con el patrón de prototipo, puede extender directamente los objetos de JavaScript y organizar su código de la forma en que lo haría con un enfoque orientado a objetos más tradicional que puede 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 de 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 como un buen beneficio. Al hacer uso del 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. A continuación, presentamos 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
Saca variables y funciones del espacio de nombres global
Las funciones se cargan en la memoria una sola 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 va a contener todas las variables. Cada vez que se crea una nueva instancia, obtendrá un nuevo conjunto de variables con las que 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 de prototipo del patrón, y el gran beneficio aquí es que no importa cuántas instancias del constructor particular o "clase" esté tratando, cada función individual se carga solo una vez en la memoria. Con estos ejemplos rápidos de beneficios e inconvenientes, echemos un vistazo a la estructura de un patrón prototipo.

Estructura del patrón de prototipo

La forma en que funciona el patrón de prototipo es que primero define un objeto y lo asocia con un constructor. Por convención, el nombre del objeto se escribirá con mayúscula. 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, hará uso de la newpalabra clave. Como mencionamos, el patrón prototipo también hace uso de la thispalabra clave. De hecho, un buen repaso si es necesario es leer nuestro artículo a qué se refiere esto junto con cómo funciona la nueva palabra clave en el tutorial de JavaScript. Veamos un ejemplo de este patrón.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// The Constructor (Part 1)
// Define an object
// Accept parameters
var Bicycle = function(brand) {
    this.brand = brand;
};
 
// Function Prototype (Part 2)
// Add functionality and extend objects
Bicycle.prototype = {
    goForward: function (percent) {
        percent = ' Bicycle Moving forward at ' + percent + ' percent speed!';
        return percent;
    }
};
 
// Calling Prototype based code
// Resembles traditional OOP styles
// 'New Up' instances, then call methods on that instance
var bike = new Bicycle('ProdecoTech');
var speed = bike.goForward(100);

Hacer clic Claro

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

1
2
3
4
5
6
7
8
var bike = new Bicycle('ProdecoTech');
var speed = bike.goForward(100);
 
var anotherbike = new Bicycle('Specialized');
var anotherspeed = anotherbike.goForward(90);
 
var mountainbike = new Bicycle('Cannondale');
var mbikespeed = mountainbike.goForward(75);

Hacer clic Claro

Cuando configuramos el prototipo de función para nuestra bicicleta, asignamos un objeto literal al prototipo. Un objeto literal consta de uno o varios pares clave-valor. 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 sean nuevos de 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 conveniente que todas las bicicletas tengan la capacidad de reducir la velocidad o detenerse. Podemos agregar esto a todas las bicicletas simplemente extendiendo su funcionalidad agregando un par de valor clave adicional a la asignación literal del objeto en el prototipo de función. Todo lo que tiene que hacer es agregar una coma después del primer par clave-valor y luego agregar otro par clave-valor según sea necesario. Veamos.

Ampliando el prototipo

1
2
3
4
5
6
7
8
9
10
11
Bicycle.prototype = {
    goForward: function (percent) {
        percent = ' Bicycle Moving forward at ' + percent + ' percent speed!';
        return percent;
    },
 
    slowDown: function (percent) {
        percent = ' Bicycle Applying ' + percent + ' brake pressure.  Slowing down now.';
        return percent;
    }
};

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

1
2
3
4
5
6
7
8
var bike = new Bicycle('ProdecoTech');
var speed = bike.goForward(70);
 
var anotherbike = new Bicycle('Specialized');
var anotherspeed = anotherbike.slowDown(60);
 
var mountainbike = new Bicycle('Cannondale');
var mbikespeed = mountainbike.slowDown(75);

Hacer clic Claro

Podemos ver que ahora está funcionando bastante bien para todas las bicicletas.

Más reducción global con espacios de nombres

Con el patrón prototipo, estamos sacando funciones y variables del espacio de nombres global. Sin embargo, cuando llamamos a 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 asignársela a sí misma si existe, o asignar un objeto vacío si no existe. Luego, simplemente prefija las otras partes del código para hacer uso del espacio de nombres.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
// Define a namespace //
var myNamespace = myNamespace || {};
 
// Define a constructor //
myNamespace.Bicycle = function (brand) {
    this.brand = brand;
};
 
// Set the prototype //
myNamespace.Bicycle.prototype = {
    goForward: function (percent) {
        percent = ' Bicycle Moving forward at ' + percent + ' percent speed!';
        return percent;
    },
 
    slowDown: function (percent) {
        percent = ' Bicycle Applying ' + percent + ' brake pressure.  Slowing down now.';
        return percent;
    }
};
 
// Calling the code using namespaces //
var bike = new myNamespace.Bicycle('ProdecoTech');
var speed = bike.goForward(70);
 
var anotherbike = new myNamespace.Bicycle('Specialized');
var anotherspeed = anotherbike.slowDown(60);
 
var mountainbike = new myNamespace.Bicycle('Cannondale');
var mbikespeed = mountainbike.slowDown(75);

Resumen de patrones de prototipos de JavaScript

En este tutorial, hemos visto cómo se puede usar el patrón de 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 de 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 ninguna colisión de nombres que pueda provocar errores y roturas. Prototype Pattern hace uso de la funcionalidad de creación de prototipos integrada en el lenguaje. Esto lo convierte en una extensión natural del propio idioma. Las funciones se cargan en la memoria solo una vez con el patrón de prototipo, lo que conduce a un buen rendimiento. Finalmente, vimos que al usar el patrón Prototype, siempre tendrá dos secciones, una para el constructor en sí y otra para el área de prototipos donde se definen los métodos. Y con eso, tenemos una sólida introducción al patrón de prototipo de JavaScript.

Header Ads Widget

Patrón de prototipo de JavaScript

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

Estructura del patrón de prototipo

Ampliando el prototipo

Más reducción global con espacios de nombres

Resumen de patrones de prototipos de JavaScript

Publicar un comentario

0 Comentarios

Random Posts

Información relevante

Colaboraciones

Menu Footer Widget