Listado completo de tutoriales

Creación de objetos literales

Veremos ahora otra forma muy utilizada en Javascript para crear objetos. Esta forma se la llama Objetos literales

Esta metodología consiste en definir una lista de propiedades y sus valores. Veamos con un ejemplo esta técnica:

<!DOCTYPE html>
<html>

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

<body>

    <script>
        let cliente1 = {
            nombre: 'Juan',
            deposito: 0,
            imprimir: function() {
                document.write(this.nombre + '<br>');
                document.write(this.deposito + '<br>');
            },
            depositar: function(monto) {
                this.deposito = this.deposito + monto;
            },
            extraer: function(monto) {
                this.deposito = this.deposito - monto;
            }
        };

        cliente1.imprimir();
        cliente1.depositar(1000);
        document.write('Estado luego de depositar 1000 pesos</br>');
        cliente1.imprimir();
        cliente1.extraer(200);
        document.write('Estado luego de extraer 200 pesos</br>');
        cliente1.imprimir();
    </script>

</body>

</html>

En este ejemplo hemos creado un objeto literal llamado cliente1, la sintaxis mínima para crear un objeto vacío sería:

  let cliente1 = {};

Es decir creamos una variable llamada cliente1 y le asignamos un bloque encerrado entre llaves vacío. Es importante notar el punto y coma al final de la llave de cerrado (como ocurre cuando asignamos un valor a una variable)

Veamos ahora si decimos que el objeto cliente1 define la propiedad nombre, luego nuestro objeto quedará definido con la sintaxis:

  let cliente1 = {
     nombre: 'Juan'
  };

Decimos que la propiedad nombre almacena el string 'Juan', del lado izquierdo indicamos el nombre de la propiedad y del lado derecho de los dos puntos indicamos el valor de la propiedad del objeto (el valor puede ser de cualquier tipo, en este caso es de tipo string pero podría ser de tipo number, boolean, object, Array etc.)

Ahora si agregamos una segunda propiedad a nuestro objeto cliente1 llamada deposito (que representa la cantidad de dinero que tiene depositado el cliente1) la sintaxis queda:

  let cliente1 = {
     nombre: 'Juan',
     deposito: 0
  };

Como podemos observar separamos por coma cada inicialización de propiedad del objeto (menos para la última propiedad donde aparece la "}".

Las funciones del objeto también definimos una sintaxis similar a la declaración de sus propiedades:

  let cliente1 = {
     nombre: 'Juan',
     deposito: 0,
     imprimir: function ()
     {
       document.write(this.nombre+'<br>');
       document.write(this.deposito+'<br>');
     },
     depositar: function(monto) {
       this.deposito=this.deposito+monto;
     },
     extraer: function(monto) {
       this.deposito=this.deposito-monto;
     }                  
  };

Del lado izquierdo de los dos puntos indicamos el nombre de la función y del lado derecho utilizamos la palabra clave function junto con los parámetros.

En la función podemos acceder a las propiedades del objeto antecediendo la palabra clave this.

Ahora solo nos falta hacer la llamada a las funciones del objeto cliente1:

  cliente1.imprimir();
  cliente1.depositar(1000);
  document.write('Estado luego de depositar 1000 pesos</br>');
  cliente1.imprimir();
  cliente1.extraer(200);
  document.write('Estado luego de extraer 200 pesos</br>');
  cliente1.imprimir();

Retornar