Tutorial de JavaScript : Conceptos

El lenguaje JavaScript no es un lenguaje orientado a objetos completo, pero permite definir clases con sus atributos y responsabilidades.
Luego nos permite definir objetos de estas clases.

Pero el otro pilar de la programación orientada a objetos, es decir la herencia, recién se incorporó en las últimas versiones (lo veremos más adelante)

Veremos la sintaxis para la declaración de una clase y la posterior definición de objetos de la misma.

Desarrollaremos una clase que represente un cliente de un banco.
La clase Cliente tiene como atributos:

nombre
saldo

y las responsabilidades o métodos de la clase son:

Constructor (inicializamos los atributos del objeto)
depositar
extraer

Luego debemos implementar los siguientes métodos (normalmente el constructor se utiliza el caracter mayúscula):

function Cliente(nombre,saldo)
{
  this.nombre=nombre;
  this.saldo=saldo;
  this.depositar=depositar;
  this.extraer=extraer;
}

function depositar(dinero)
{
  this.saldo=this.saldo+dinero;
}

function extraer(dinero)
{
  this.saldo=this.saldo-dinero;
}

El nombre de la clase coincide con el nombre de la función principal que implementamos (también llamado constructor de la clase):

function Cliente(nombre,saldo)
{
  this.nombre=nombre;
  this.saldo=saldo;
  this.depositar=depositar;
  this.extraer=extraer;
}

A ésta función llegan como parámetro los valores con que queremos inicializar los atributos. Con la palabra clave 'this' diferenciamos los atributos de los parámetros (los atributos deben llevar la palabra clave this)

  this.nombre=nombre;
  this.saldo=saldo;

También en el constructor inicializamos la referencia a todos los métodos que contendrá la clase (esto es muy importante y necesario para entender porque las otras dos funciones pertenecen a esta clase):

  this.depositar=depositar;
  this.extraer=extraer;

Por último, implementamos todos los métodos de la clase:

function depositar(dinero){
  this.saldo=this.saldo+dinero;
}

function extraer(dinero){
  this.saldo=this.saldo-dinero;
}

De nuevo recordemos que diferenciamos los atributos de la clase por la palabra clave this.

Ahora veamos el archivo HTML completo donde además definiremos un objeto de la clase planteada:

<!DOCTYPE html>
<html>

<head>
    <title>Ejemplo de JavaScript</title>
    <meta charset="UTF-8">
</head>

<body>

    <script>
        function Cliente(nombre, saldo) {
            this.nombre = nombre;
            this.saldo = saldo;
            this.depositar = depositar;
            this.extraer = extraer;
        }

        function depositar(dinero) {
            this.saldo = this.saldo + dinero;
        }

        function extraer(dinero) {
            this.saldo = this.saldo - dinero;
        }

        let cliente1;
        cliente1 = new Cliente('diego', 1200);
        document.write('Nombre del cliente:' + cliente1.nombre + '<br>');
        document.write('Saldo actual:' + cliente1.saldo + '<br>');
        cliente1.depositar(120);
        document.write('Saldo luego de depositar $120---->' + cliente1.saldo + '<br>');
        cliente1.extraer(1000);
        document.write('Saldo luego de extraer $1000---->' + cliente1.saldo + '<br>');
    </script>

</body>

</html>

Para definir un objeto de la clase Cliente tenemos:

        let cliente1;
        cliente1 = new Cliente('diego', 1200);

Luego las llamadas a métodos le antecedemos el nombre del objeto llamado cliente1:

        document.write('Nombre del cliente:' + cliente1.nombre + '<br>');
        document.write('Saldo actual:' + cliente1.saldo + '<br>');
        cliente1.depositar(120);
        document.write('Saldo luego de depositar $120---->' + cliente1.saldo + '<br>');
        cliente1.extraer(1000);
        document.write('Saldo luego de extraer $1000---->' + cliente1.saldo + '<br>');

Podemos decir que la ventaja que podemos obtener con el planteo de clases es hacer nuestros programas mucho más organizados, entendibles y fundamentalmente poder reutilizar clases en distintos proyectos.

Podemos directamente dentro del constructor implementar los dos métodos con la siguiente sintaxis:

        function Cliente(nombre, saldo) {
            this.nombre = nombre;
            this.saldo = saldo;
            this.depositar = function(dinero) {
                this.saldo = this.saldo + dinero;
            }
            this.extraer = function(dinero) {
                this.saldo = this.saldo - dinero;
            }
        }

Luego no hay cambios cuando creamos un objeto de la clase Cliente.

Acotaciones

A lo largo de la historia de JavaScript han aparecido varias formas de plantear las clases, más adelante veremos la última sintaxis propuesta utilizando directamente la palabra clave class para declarar una clase.

Programación orientada a objetos en JavaScript.

Acotaciones

Retornar