Diagrama de Clases del Patrón Singleton en JavaScript

Clase 4 de 27 • Curso de Patrones de Diseño en JavaScript

Resumen

¿Qué es el diagrama de clases del patrón Singleton?

El patrón Singleton es un diseño en programación orientada a objetos que asegura que una clase solo tenga una instancia y proporciona un punto de acceso global. El diagrama de clases de Singleton nos presenta una representación gráfica que resume la estructura y comportamiento de este patrón. Dos aspectos destacados del diagrama son cruciales para su comprensión:

Constructor privado: El constructor de la clase se establece como privado. Esto se representa con un símbolo de menos (-), indicando que no puede ser accesible fuera de la propia clase. Este paso garantiza que no se pueden crear nuevas instancias de la clase utilizando el operador new.
Método estático getInstance(): Se crea un método estático que internamente llama al constructor privado. Este método es el que guarda la instancia en una variable estática y devuelve la misma instancia cada vez que se solicita.

¿Cómo se implementa el patrón Singleton en código?

La implementación en código del patrón Singleton suele seguir un proceso conocido y eficiente, que permite ahorrar recursos y asegurar la invariabilidad de la instancia. La traducción del diagrama a JavaScript ofrece una visión clara de cómo establecer el patrón, incluso cuando este lenguaje no soporta modificadores de acceso como private. El código es el siguiente:

class Singleton {
    constructor(version) {
        this.version = version;
    }
    
    static getInstance(version) {
        if (!Singleton.instance) {
            Singleton.instance = new Singleton(version);
        }
        return Singleton.instance;
    }
}

// Prueba del patrón Singleton
const singleton1 = Singleton.getInstance("versión1");
const singleton2 = Singleton.getInstance("versión2");

console.log(singleton1 === singleton2); // Output: true

¿Cómo se realiza la verificación de instancia?

El método estático getInstance() verifica si ya existe una instancia de la clase Singleton. Si no existe, crea una nueva instancia, la almacena, y la devuelve. Si ya existe, simplemente retorna la instancia existente:

Verificación: Se comprueba si Singleton.instance está definida. Si no lo está, se crea una nueva instancia.
Asignación: La nueva instancia se asigna a Singleton.instance.
Retorno: Se devuelve siempre Singleton.instance.

Este proceso garantiza que solo haya una única instancia activa a lo largo de toda la aplicación.

¿Cuál es el resultado al probar el patrón Singleton?

Al correr una prueba con varias llamadas a getInstance() y diferentes versiones, como se hace en el ejemplo anterior con singleton1 y singleton2, el resultado es crucial para validar el patrón. El código devuelve true, lo que significa que ambas variables apuntan a la misma instancia, cumpliendo así con el objetivo del patrón Singleton. A continuación se muestra un fragmento que refleja el testeo y su interpretación:

// Verificación adicional
const singleton3 = Singleton.getInstance("versión3");

console.log(singleton1 === singleton3); // Output: true

La prueba establece que no importa con qué versión se invoca el método getInstance(), siempre se retorna la misma instancia única. Esto demuestra la efectividad y fiabilidad del patrón Singleton. Como desarrollador, ahora tienes una herramienta poderosa para controlar y gestionar los estados globales en tus aplicaciones.

Carina Payleman

student•

 class Singleton {
    static instance = undefined; //Atributo estático para almacenar el valor, llamado para la validación de getInstance() 

    constructor(version) {
        this.version = version;
    }

    static getInstance(version) {
        //Si no existe el atributo instance...
        if (!Singleton.instance) {
            Singleton.instance = new Singleton(version); //...lo crea. 
        }
        return Singleton.instance;
    }

}

function appSingleton() {
    //Todas las variables tienen la misma referencia al mismo objeto. 1 sola instancia a lo largo de la aplicación:
    const singleton1 = Singleton.getInstance('version-1')
    const singleton2 = Singleton.getInstance('version-2')
    const singleton3 = Singleton.getInstance('version-3')

    console.log(singleton1 === singleton2); //true
    console.log(singleton1 === singleton3); //true
}
appSingleton();

Daniel Basulto

teacher•

Bien Carina, quedaron claros los conceptos de singleton y elementos estaticos, continua así!

Diego Reyes Cabrera

student•

Técnica para evitar el uso de new Singleton:

class Singleton {
	constructor() {
		throw new Error('No constructor in this house!')
	}
}

Daniel Basulto

teacher•

Afirmativo Diego, cuando sea un lenguaje tipado, arrojar errores es la clave

Miguel Prada

student•

También se podría usar el propio constructor para retornar siempre la misma instancia, y no haría falta tener que armar otro método que haga de constructor

class Singleton {
	static instance = undefined;

	constructor(version) {
		if (Singleton.instance) return Singleton.instance
		
		this.version = version
		Singleton.instance = this
	}	
}

Paul Flores

student•

Les dejo el Singleton en Java

Daniel Basulto

teacher•

Nada como regresar a los inicios con Java

Carina Payleman

student•

Pseudocódigo:

Diagrama:

Diego Portillo

student•

Creo que por cuestiones didacticas seria mas conveniente empezar con los ejemplos y a partir de ahi ir identificando cada concepto, debido a que es mas dificil comprender los conceptos desde la abstraccion.

En el mundo real, para llegar a los patrones de diseno primero se dan los casos de uso y luego se identifican los patrones y crean los conceptos a partir de las ocurrencias repetidas.

Creo que seria valiosa esta metodologia para los cursos de programacion en general.

Daniel Basulto

teacher•

Gracias por el valiosisimo feedback Diego! Tomando nota!

Cristian Clavijo

student•

Para los que les gusta TS como a mi, aqui el code adaptado:

class Singleton {
    static instance : Singleton | undefined;
    version:string

    constructor(version: string){
        this.version = version;
    }

    static getInstance(version:string){
        if(!Singleton.instance){
            Singleton.instance = new Singleton(version);
        }

        return Singleton.instance;
    }
}

function appSingleton() {
    //Todas las variables tienen la misma referencia al mismo objeto. 1 sola instancia a lo largo de la aplicación:
    const singleton1 = Singleton.getInstance('version-1')
    const singleton2 = Singleton.getInstance('version-2')
    const singleton3 = Singleton.getInstance('version-3')

    console.log(singleton1)
    console.log(singleton2)
    console.log(singleton3)

    console.log(singleton1 === singleton2); //true
    console.log(singleton1 === singleton3); //true
}
appSingleton();

Daniel Basulto

teacher•

Interesante Cris, solo una anotación, en este código el constructor continua siendo publico, es decir podria ser llamado en cualquier momento y crear una instancia nueva.

Para mitigar esto se hace el constructor privado y ahora si, se depende unicamente del metodo getInstance para el manejo de la instancia unica, recuerda, en singleton, solo hay un punto de acceso a la instancia.

Harold Zurita Simon

student•

Algo interesante es que al leer el valor de version de las todas las instancias, el valor siempre será el de la primera instancia que se ha creado. En este caso "version-1".

function appSingleton() {
  const singleton1 = Singleton.getInstance("version-1");
  const singleton2 = Singleton.getInstance("version-2");
  const singleton3 = Singleton.getInstance("version-3");

  console.log(singleton1 === singleton2);
  console.log(singleton1 === singleton3);
  console.log(singleton3.version); // version-1
}

Jacobo Burbano

student•

Así fue como lo había aprendido a hacerlo

class Singleton{
    static instance = undefined
    constructor(version){
        if(Singleton.instance){
           return Singleton.instance 
        }
        this.version = version
        Singleton.instance = this
    }
}
```class Singleton{    static instance = undefined    constructor(*version*){        if(Singleton.instance){           return Singleton.instance         }        this.version = *version*        Singleton.instance = this    }}con

Daniel Basulto

teacher•

Bien es posible que la creacion de instancias se maneje dentro del constructor sin embargo, no es recomendable dado que se busca que el constructor sea completamente ajeno a cualquier logica que no este relacionada a la configuracion de los elementos internos de la instancia.

Tambien hay que considerar que en tu implementacion hay que regresar tambien en el caso en el que la instancia no esta inicializada.

Edwin Garcés Saucedo

student•

Este patrón de diseño lo estuve utilizando sin saber que así se llamaba, creé una instancia para usar remote-config en un proyecto y funciona muy bien, no he visto a ninguno de mis colaboradores si quiera intentar usar el new() Me alegra poder conocer la teoría detrás de ello y poder argumentar su uso.

Daniel Basulto

teacher•

Excelente Edwin!

Karen Yarely Rojo Valenzuela

student•

Diagrama del patrón Singleton.

Hacer que el constructor sea privado.
Crear un método estático que llame al constructor privado, internamente, y que guarde la instancia en una variable estática.

Norman Jaimes Mora

student•

Según entiendo es como un closure pero en objetos...

Se almacena los requerimientos, pero solo se usa los métodos. Sí?

Cayo Legal

student•

Consulta, en una instancia creada de una clase, que utiliza como una de sus propiedades en el constructor una propiedad estática de la misma clase, si esa propiedad estática cambia de valor a lo largo del código, en la instancia también cambiará?

Daniel Basulto

teacher•

Cambiaria para todas las instancias, asi es.

Como observacion, la idea de los elementos es justamente la de no cambiar, por eso su uso debe ser debidamente planificado.

Esteban Monguí Torres

student•

En JavaScript, no hay un modificador de acceso "private" como en otros lenguajes. Sin embargo, puedes simular un constructor privado utilizando funciones y closures. Aquí te muestro un ejemplo con el patrón Singleton:

const Singleton = (function() {
    let instance;

    function createInstance() {
        return { /* Propiedades del singleton */ };
    }

    return {
        getInstance: function() {
            if (!instance) {
                instance = createInstance();
            }
            return instance;
        }
    };
})();

// Uso
const instance1 = Singleton.getInstance();
const instance2 = Singleton.getInstance();
console.log(instance1 === instance2); // true

En este código, createInstance es una función que actúa como constructor privado, accesible solo a través de getInstance.

Leyla Carmona

student•

Pequeño glosario:

Singleton → Es un patrón de diseño que garantiza que solo haya una única instancia de una clase en toda la aplicación.
Instancia → Es un objeto creado a partir de una clase. En el patrón Singleton, siempre apunta al mismo objeto, evitando la creación de múltiples instancias.
Constructor → Es un método especial que se ejecuta automáticamente cuando se crea un nuevo objeto. En Singleton, se usa para controlar que solo haya una instancia.
Instancia única → Se refiere a que solo existe una copia del objeto en toda la aplicación, sin importar cuántas veces se intente crear una nueva.
Retorno de instancia → En Singleton, el constructor devuelve la misma instancia existente en lugar de crear una nueva.
Objeto inmutable → Es un objeto que no puede ser modificado después de su creación. En Singleton, a veces se usa Object.freeze() para evitar cambios en la instancia.
Patrón de diseño → Es una solución reutilizable para problemas comunes en el desarrollo de software. Singleton es uno de estos patrones y se usa para controlar el acceso a una única instancia de un objeto.
Object.freeze() → Es un método en JavaScript que hace que un objeto no pueda ser modificado después de su creación. Se usa a veces en Singleton para asegurar que la instancia no cambie.
Comparación (===) → Se usa para verificar si dos variables apuntan a la misma instancia del Singleton.

Rodrigo Angel Zucchini

student•

class ConexionDataBase {
    static instance = undefined;

    constructor(conexionString) {
        this.conexionString = this.conexionString;
    }

    static getInstance(conexionString) {
        if(!ConexionDataBase.instance){
            ConexionDataBase.instance = new ConexionDataBase(conexionString);
        } else {
            console.log("Usando la conexión existente.");
        }
        return ConexionDataBase.instance;
    }
}

function appSingleton() {
    const conexionDataBase1 = ConexionDataBase.getInstance("cadena-de-conexion-1");
    console.log(conexionDataBase1);

    const conexionDataBase2 = ConexionDataBase.getInstance("cadena-de-conexion-2");
    console.log(conexionDataBase2);

    console.log(conexionDataBase1 === conexionDataBase2)
}

appSingleton();
```class ConexionDataBase {    static instance = undefined;
    constructor(conexionString) {        this.conexionString = this.conexionString;    }
    static getInstance(conexionString) {        if(!ConexionDataBase.instance){            ConexionDataBase.instance = new ConexionDataBase(conexionString);        } else {            console.log("Usando la conexión existente.");        }        return ConexionDataBase.instance;    }}
function appSingleton() {    const conexionDataBase1 = ConexionDataBase.getInstance("cadena-de-conexion-1");    console.log(conexionDataBase1);
    const conexionDataBase2 = ConexionDataBase.getInstance("cadena-de-conexion-2");    console.log(conexionDataBase2);
    console.log(conexionDataBase1 === conexionDataBase2)}
appSingleton();

Rodrigo Angel Zucchini

student•

class ConexionDataBase { static instance = undefined; constructor(conexionString) { this.conexionString = this.conexionString; } static getInstance(conexionString) { if(!ConexionDataBase.instance){ ConexionDataBase.instance = new ConexionDataBase(conexionString); } else { console.log("Usando la conexión existente."); } return ConexionDataBase.instance; }} function appSingleton() { const conexionDataBase1 = ConexionDataBase.getInstance("cadena-de-conexion-1"); console.log(conexionDataBase1); const conexionDataBase2 = ConexionDataBase.getInstance("cadena-de-conexion-2"); console.log(conexionDataBase2); console.log(conexionDataBase1 === conexionDataBase2)} appSingleton();class ConexionDataBase { static instance = undefined; constructor(conexionString) { this.conexionString = this.conexionString; } static getInstance(conexionString) { if(!ConexionDataBase.instance){ ConexionDataBase.instance = new ConexionDataBase(conexionString); } else { console.log("Usando la conexión existente."); } return ConexionDataBase.instance; }} function appSingleton() { const conexionDataBase1 = ConexionDataBase.getInstance("cadena-de-conexion-1"); console.log(conexionDataBase1); const conexionDataBase2 = ConexionDataBase.getInstance("cadena-de-conexion-2"); console.log(conexionDataBase2); console.log(conexionDataBase1 === conexionDataBase2)} appSingleton();

Rodrigo Angel Zucchini

student•

Una conexión a una base de datos es un buen ejemplo para este patrón

Miguel Enrique Velásquez Millán

student•

Además de la forma explicada por el Profesor Daniel en la clase acerca de cómo crear un Singleton en Javascript y siempre retornar la instancia "guardada en caché" mediante el método getInstance... Encontré este videíto super interesante en donde se implementa otra forma de hacerlo directamente con el mismo constructor ✨.

https://www.youtube.com/watch?v=rrWRhrdwuLg

En el video, en vez de crear un método "getInstance" que siempre nos retorne la instancia de la clase, directamente se modifica el constructor de la clase para que cada vez que se utilice el operador new para crear una nueva instancia; en vez de que se cree una nueva, retorne en cambio la única instancia que existe "guardada en caché" (y si no existe ninguna guardad previamente, entonces sí la crea).

Es muy interesante ✨.

Si bien este método se "salta las reglas" ya que no hace que el constructor sea privado ni tampoco crea un método estático getInstance... Logra el mismo comportamiento al modificar la forma en la que se usa el constructor. ¡Y eso me parece super genial!

Miguel Enrique Velásquez Millán

student•

Desde ES2022 Javascript soporta de manera nativa el uso de propiedades y métodos privados ✨.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/Private_properties

Se definen con el # delante del nombre de la propiedad o método que se quiere que sea privada.

Miguel Enrique Velásquez Millán

student•

Lo "malo" es que, incluso con esta forma de tener métodos y propiedades privadas, javascript igualmente no permite que el constructor sea privado. Da un error en caso de que hagamos algo como #constructor().

Pero con cualquier otra propiedad y método sí funciona perfectamente.

Gorka Gallardo Castany

student•

Aqui os dejo otro ejemplo para entender mejor el patron de diseño Singleton:

class Configuracion {
    // Variable estática que contendrá la única instancia
    static datos = undefined;
  
    // Constructor privado para inicializar la configuración (tema, idioma)
    constructor() {
      this.tema = "light"; // Tema predeterminado
      this.idioma = "es";  // Idioma predeterminado
    }
  
    // Método estático para obtener la instancia única de Configuracion
    static obtenerInstancia() {
      if (!Configuracion.datos) {
        Configuracion.datos = new Configuracion();
      }
      return Configuracion.datos;
    }
  
    // Método para cambiar el tema
    cambiarTema(nuevoTema) {
      this.tema = nuevoTema;
      console.log(`Tema cambiado a: ${this.tema}`);
    }
  
    // Método para cambiar el idioma
    cambiarIdioma(nuevoIdioma) {
      this.idioma = nuevoIdioma;
      console.log(`Idioma cambiado a: ${this.idioma}`);
    }
  }
  
  function appConfiguracion() {
    console.log("--- Inicializando Configuración Global ---");
  
    // Obtenemos la instancia única de Configuración
    const configuracion1 = Configuracion.obtenerInstancia();
    configuracion1.cambiarTema("Oscuro");
    configuracion1.cambiarIdioma("Esp");
  
    // Obtenemos otra vez la instancia para poder ver que los valores de config no han cambiado y se mantienen iguales
    const configuracion2 = Configuracion.obtenerInstancia();
  
    // Comprobamos si ambas instancias son iguales
    console.log(`¿Configuración1 y Configuración2 son la misma instancia? ${configuracion1 === configuracion2 ? "Sí" : "No"}`);
  
    // Imprimimos los valores para comprobar que ambos acceden a la misma configuración
    console.log(`Configuración1 tema: ${configuracion1.tema}`);
    console.log(`Configuración2 tema: ${configuracion2.tema}`);
    console.log(`Configuración1 idioma: ${configuracion1.idioma}`);
    console.log(`Configuración2 idioma: ${configuracion2.idioma}`);
  }
  
  appConfiguracion();