Clases y objetos. Su uso

En esta entrada vamos a trabajar con clases y objetos en el modelo de programación orientada a objetos. Veamos cómo a partir de ejemplos de JavaScript.

clases

En informática, una clase es una plantilla para la creación de objetos de datos según un modelo. Las clases se utilizan para representar entidades o conceptos, como los sustantivos en el lenguaje.

Cada clase es un modelo que define un conjunto de variables (el estado) y métodos apropiados para operar con dichos datos (el comportamiento). Los métodos podemos equipararlos a los verbos.

Cada objeto creado a partir de la clase se denomina instancia de la clase.

Términos en clases y objetos

En primer lugar, un poco de terminología para aclarar conceptos.

Clase
Define las características de un objeto.

Objeto
Una instancia de una clase.

Propiedad o atributo
Una característica de un objeto, como el color.

Método
Una capacidad de un objeto, como caminar.

Constructor
Es un método llamado en el momento de la creación de instancias.

Herencia
Una clase puede heredar características de otra clase.

Encapsulamiento
Una clase sólo define las características de un objeto y un método sólo define cómo se ejecuta el método.

Abstracción
La conjunción de herencia compleja, métodos y propiedades que un objeto debe ser capaz de simular en un modelo de la realidad.

Polimorfismo
Diferentes clases podrían definir el mismo método o propiedad.

Index.html

En segundo lugar, el siguiente código es el archivo index.html, que contiene diferentes formas de crear clases y objetos en JavaScript.

<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <title>Objetos</title>
</head>

<body>

    <script type="text/javascript">
        // Es el método constructor de Persona
        function Persona(nombre, apellidos, id, edad) {
            this.nombre = nombre;
            this.apellidos = apellidos;
            this.id = id;
            this.edad = edad;
        }
        // FORMA 1: CREAR MÉTODOS. Amplia el método constructor de Persona con el método darNombreCompleto()
        // Da el nombre completo.
        Persona.prototype.darNombreCompleto = function() {
            return this.nombre + " " + this.apellidos;
        }

        // FORMA 1: CREAR MÉTODOS. Amplia el método constructor de Persona con el método renombrar()
        // Pone un nuevo nombre.
        Persona.prototype.renombrar = function(nombre) {
            return this.nombre = nombre;
        }

        // FORMA 1: CREAR MÉTODOS. Amplia el método constructor de Persona con el método darEdadNueva()
        // Da una edad.
        Persona.prototype.darEdadNueva = function(edad) {
            return this.edad = edad;
        }

        // FORMA 2: CREAR MÉTODOS. Internamente en el método constructor
        function Empleado(id, nombre, apellidos, edad) {
            this.id = id;
            this.nombre = nombre;
            this.apellidos = apellidos;
            this.edad = edad;
            this.darNombreCompleto = function() {
                return this.nombre + " " + this.apellidos;
            };
            this.renombrar = function(nombre) {
                return this.nombre = nombre;
            };
        }

        // FORMA 3: CREAR MÉTODOS. Usando objetos literales
        var persona1 = {
            nombre: "Ana",
            apellidos: "Piquer Puig",
            id: 20007,
            edad: 35,
            darNombrecompleto: function() {
                return this.nombre + " " + this.apellidos;
            },
            renombrar: function(nombre) {
                return this.nombre = nombre;
            }
        };
        
        // FORMA 4: CREAR MÉTODOS. Usando un objeto
        var pasta = new Object(); // Crea un nuevo objeto llamado pasta
        pasta.grano = "trigo"; // Es la propiedad grano del objeto pasta
        pasta.ancho = 0.5; // Es la propiedad ancho del objeto pasta
        pasta.forma = "redondo"; // Es la propiedad forma del objeto pasta

        // Es el método getForma
        pasta.getForma = function() {
            return this.forma;
        }
        
        // Es el método setForma 
        pasta.setForma = function(forma) {
            this.forma = forma;
        }
        
        
        //EJEMPLOS
        // Ejemplo 1: Crea una variable de objeto (Forma 1)
        var persona3 = new Object();
        persona3.nombre = "José"; // Es la propiedad nombre
        persona3.apellidos = "Pérez García"
        persona3.id = 12893; // Es la propiedad id 
        persona3.edad = 50;
        
        // Ejemplo 2: Crear un objeto
        var pasta = new Object(); // Crea un nuevo objeto llamado pasta
        pasta.grano = "trigo"; // Es la propiedad grano del objeto pasta
        pasta.ancho = 0.5; // Es la propiedad ancho del objeto pasta
        pasta.forma = "redondo"; // Es la propiedad forma del objeto pasta

        // Es el método getForma
        pasta.getForma = function() {
            return this.forma;
        }
        
        // Es el método setForma 
        pasta.setForma = function(forma) {
            this.forma = forma;
        }

        // Ejemplo 3: Crear un objeto
        // Es el método constructor
        function Coche(marca, modelo, anyo, color, propietario) {
            this.marca = marca;
            this.modelo = modelo;
            this.anyio = anyo;
            this.color = color;
            this.propietario = propietario;
        }
        
        var coche1 = new Coche("BMW", "X3", 1996, "azul", "Sonia"); // Crea un nuevo objeto llamado coche1
        
        // Es el método getModelo
        coche1.getModelo = function() {
            return this.modelo;
        }

        // Es el método setModelo
        coche1.setModelo = function(modelo) {
            this.modelo = modelo;
        }

        // Es el método getAnyo
        coche1.getAnyo = function() {
            return this.anyio;
        }

        // MÁS EJEMPLOS
        // Crea una variable de objeto (Forma 2)
        var persona2 = new Persona("Juan", "Pérez Pons", 12893, 22);

        // Crea una variable de objeto (Forma 2)
        var persona4 = new Persona("Adela", "Fernandez Ruiz", 23782, 31);
        
        // Crea una variable de objeto (Forma 2)
        var empleado1 = new Empleado(12000, "Antonio", "Belloch Alabau", 28);        
        
        // Son 2 formas iguales de usar una propiedad de un objeto
        var nombre2 = persona1.nombre;
        var nombre2 = persona2["nombre"];        

        persona2.nombre = persona2.renombrar("Manuel");
        persona2.edad = persona2.darEdadNueva(25);
        
        empleado1.nombre = empleado1.renombrar("Francisco");

        document.write("Persona 1: " + persona1.id + " " + persona1.nombre + "<br>"); // Escribe "Persona 1: 20007 Ana"        

        document.write("Persona 2: " + persona2.darNombreCompleto() + " " + persona2.edad + "<br>"); // Escribe "Persona 2: Manuel Pérez Pons 25"
        
        document.write("Persona 4: " + persona4.darNombreCompleto() + "<br>"); // Escribe "Persona 4: Adela Fernandez Ruiz"
        
        document.write("Empleado 1: " + empleado1.darNombreCompleto() + "<br>"); // Escribe "Empleado 1: Francisco Belloch Alabau"
        
        document.write("<br>" + pasta.grano + " - " + pasta.getForma()); // trigo - redondo
        document.write("<br>" + coche1.marca + " - " + coche1.getModelo()); // BMW - X3
        
        forma = prompt("Qué forma de pasta es?");
        pasta.setForma(forma);        

        modelo = prompt("Qué modelo de coche es?");
        coche1.setModelo(modelo);

        document.write("<br>" + pasta.grano + " - " + pasta.getForma()); // trigo - el valor de la variable forma
        document.write("<br>" + coche1.marca + " - " + coche1.getModelo()); // BMW - el valor de la variable modelo

    </script>

</body>

</html>

El método constructor de la clase Persona puede definirse de la siguiente forma (líneas 13 – 18):

 function Persona(nombre, apellidos, id, edad) {
    this.nombre = nombre;
    this.apellidos = apellidos;
    this.id = id;
    this.edad = edad;
 }

Además, podemos no definir el método constructor o varios métodos constructores. Tampoco es necesario, que todas las propiedades o atributos estén presentes en el método constructor.

Para crear más métodos de la clase, podemos utilizar la palabra clave function (líneas 21 – 23):

Persona.prototype.darNombreCompleto = function() {
   return this.nombre + " " + this.apellidos;
}

En este caso, utilizamos la palabra clave prototype, que nos permite añadir más métodos a la clase Persona.

También podemos añadir nuevos métodos en las clases, usando dentro del método constructor de la clase. De esta forma, no usaremos la palabra clave prototype:

 function Empleado(id, nombre, apellidos, edad) {
    this.id = id;
    this.nombre = nombre;
    this.apellidos = apellidos;
    this.edad = edad;
    
    this.darNombreCompleto = function() {
       return this.nombre + " " + this.apellidos;
    };
    this.renombrar = function(nombre) {
       return this.nombre = nombre;
    };
 }

En tercer lugar, vamos a definir una clase, usando objetos literales:

 var persona1 = {
    nombre: "Ana",
    apellidos: "Piquer Puig",
    id: 20007,
    edad: 35,
    
   darNombrecompleto: function() {
      return this.nombre + " " + this.apellidos;
   },

   renombrar: function(nombre) {
      return this.nombre = nombre;
   }
 };

En cuarto lugar, podemos definir un objeto y sus métodos, usando el constructor Object():

var pasta = new Object(); // Crea un nuevo objeto pasta
pasta.grano = "trigo"; // Es la propiedad grano
pasta.ancho = 0.5; // Es la propiedad ancho
pasta.forma = "redondo"; // Es la propiedad forma

// El método getForma
pasta.getForma = function() {
   return this.forma;
}
 
// El método setForma 
pasta.setForma = function(forma) {
   this.forma = forma;
}

Por último,  se puede utilizar la palabra class para definir clases en JavaScript, pero esto todavía es muy reciente. Puede dar problemas de compatibilidad.

Y se acabó. Las demás líneas del script son ejemplos fáciles de entender.

También puede interesarte

Reloj digital en JavaScript

Funciones en JavaScript

Cookies en JavaScript

Selects dependientes en JavaScript

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *