Blog Reacción Estudio

¡Tu zona de aprendizaje!

Crear una clase con el objeto Prototype de Javascript

Una de las formas más sencillas de trabajar con clases en Javascript, es a través del objeto Prototype. Vamos a ir paso a paso explicando cómo crear una clase con Javascript.

 

La estructura de una clase con el objeto Prototype es la siguiente:

var Mi_clase_js = ( function() 
{
    // Constructor
    var cls = function() { };
    
    cls.prototype = {
             
       // Métodos y funciones
        metodo_uno: function()
        {
            alert("Soy el primer método");
        },

        metodo_dos: function()
        {
            alert("Soy el segundo método");
        }

    }
    
    return cls;
    
})();

 
En la primera línea, declaramos el nombre de la clase. En mi caso, la clase se llama Mi_clase_js:

var Mi_clase_js = ( function()

 

En la siguiente línea, definimos el constructor de la clase:

var cls = function() { };

 

En la siguiente línea, dentro de la propiedad «cls.prototype«, definimos todos nuestros métodos y funciones:

        // Métodos y funciones
        metodo_uno: function()
        {
            alert("Soy el primer método");
        },
 
        metodo_dos: function()
        {
            alert("Soy el segundo método");
        }

 

Y por último, devolvemos el objeto «cls» que contiene nuestros métodos y funciones:

return cls;

 

Ahora para instanciar la clase debemos incluir nuestro archivo «.js» y hacer lo siguiente:

var nombre_objeto = new Mi_clase_js();

 
Y para usar un método de la clase:

nombre_objeto.metodo_dos();

Así de sencillo es crear una clase con el objeto Prototype de Javascript.


Una anotación importante: Si queréis llamar a una función o método de la misma clase dentro de un método de la misma clase, deberéis hacerlo así:

cls.prototype.NOMBRE_DEL_METODO();

Un ejemplo sería el siguiente:

        metodo_uno: function()
        {
            alert("Soy el primer método");
            cls.prototype.metodo_dos();
        },
 
        metodo_dos: function()
        {
            alert("Soy el segundo método");
        }