Introducción a JavaScript

En este ejemplo se muestran ejemplos sencillos del manejo de objetos en JavaScript

Definición y acceso a los elementos

Definición de un objeto

Un objeto en JavaScript, definido de una manera sencilla, es un contenedor de valores con un nombre asignado (los arrayes eran contenedores de valores con un índice numérico).

El primer ejemplo es la definición de un objeto con un literal.
No importan los espacios ni saltos de línea, los símbolos ‘{‘, ‘}’ ‘:’ y ‘,’ delimitan cada elemento.
Cada par nombre:valor se denomina propiedad.

<script>

let persona = {nombre: "José", apellido1: "López", apellido2: "Márquez", edad: 23}
document.write("Un objeto:" + persona + " 
");

let table = document.getElementById("intro");
for (let propiedad in persona) {
    let tr = document.createElement("tr");
    let th = document.createElement("th");
    let td = document.createElement("td");
    th.innerHTML = propiedad;
    td.innerHTML = persona[propiedad];
    tr.appendChild(th);
    tr.appendChild(td);
    table.appendChild(tr);
}

Si se muestra no se ve nada, solo su tipo:

Se debe acceder a sus propiedades (iteramos con for ... in):

Añadir una nueva propiedad a un objeto

<script>

function añadir(p, v) {
    persona[p] = v;
    showObject(persona);
}

function showObject(objeto) {
    let  table = document.getElementById("añadir");
    table.innerHTML="";
    for (let propiedad in objeto) {
        let tr = document.createElement("tr");
        let th = document.createElement("th");
        let td = document.createElement("td");
        th.innerHTML = propiedad;
        td.innerHTML = persona[propiedad];
        tr.appendChild(th);
        tr.appendChild(td);
        table.appendChild(tr);
    }
}

Añadir un método a un objeto

Cambiamos la función showObject() para que sea un método y empleamos la referencia this para acceder a las propiedades

<script>

let  table_método = document.getElementById("añadir_método");

persona.show= function (table) {
    table.innerHTML = "";
    for (let propiedad in this) {
        let tr = document.createElement("tr");
        let th = document.createElement("th");
        let td = document.createElement("td");
        let code = document.createElement("code");

        th.innerHTML = propiedad;
        code.innerHTML = persona[propiedad];
        td.appendChild(code);
        tr.appendChild(th);
        tr.appendChild(td);
        table.appendChild(tr);
    }
}

Palabra clave `this`

<script>

document.write(this);

this.saludo = "¿Cómo está?"
document.write(this.saludo);

function miroThis(p) {
    p.innerHTML = this.saludo;
}

Objeto `this` Global

Añadimos una nueva propiedad a `this` Global

`this` en una función se refiere al objeto Global (en modo estricto sería `undefined`)

`this` en un evento se refiere al propio elemento que lanza el evento

Getters y Setters

Abre la consola de JavaScript

<script>

var contador = {
        segundos: 0,
        minutos: 0,
        horas: 0,
        set tick(s) {//Incrementa la cuenta en s segundos
            this.segundos = this.segundos + s;
            if (this.segundos >= 60) {
                this.minutos = this.minutos + Math.floor(this.segundos / 60);
                this.segundos = this.segundos % 60;
            }

            if (this.minutos >= 60) {
                this.horas = this.horas + Math.floor(this.minutos / 60);
                this.minutos = this.minutos % 60;
            }
            console.log(this.time);
        },

        get time() {
            return this.horas + ":" + this.minutos + ":" + this.segundos;
        }

    };
}

Object.defineProperty(contador, "reset", {get: function () {
        this.segundos = 0;
        this.minutos = 0;
        this.horas = 0;
    }
});

Object.defineProperty(contador, "nombre",{value:"contador",writable:true} );

Añadimos una nueva propiedad con `Object.defineProperty()`

Palabra clave `this`

<script>

document.write(this);

this.saludo = "¿Cómo está?"
document.write(this.saludo);

function miroThis(p) {
    p.innerHTML = this.saludo;
}

Objeto `this` Global

Añadimos una nueva propiedad a `this` Global

`this` en una función se refiere al objeto Global (en modo estricto sería `undefined`)

`this` en un evento se refiere al propio elemento que lanza el evento

Constructores

Para crear "copias" de una misma definición de objeto se debe emplear una función denominada Constructor y la sentencia new

<script>

function Persona(nombre, apellido, edad) {
      this.nombre = nombre;
      this.apellido = apellido;
      this.edad = edad;
    this.nombreCompleto = function () {
        return this.nombre + " "
                + this.apellido;
    };
}
var comercial = new Persona("Juan", "López", 33);
var cliente = new Persona("José", "García", 46);

document.write("Comercial: " + comercial.nombreCompleto() + "
");
document.write("Cliente: " + cliente.nombreCompleto() + "
");

//Añadir una propiedad a un constructor de forma errónea
Persona.nacionalidad = "Española";
document.write("Comercial - Nacionalidad: " + comercial.nacionalidad + "
");
//Añadir una propiedad a un constructor de la manera correcta: a través del prototipo
Persona.prototype.nacionalidad = "Española";//Ahora sí
Persona.prototype.ficha = function () {
      return this.nombre + " "
            + this.apellido + " "
            + this.edad + " "
            + this.nacionalidad;
};

document.write("Comercial - ficha: " + comercial.ficha() + "
");

Ejemplo de constructor.

Añadir una nueva propiedad a un constructor

No se puede añadir una propiedad a un constructor, se debe incluir en la función

Añadir una nueva propiedad a un constructor con la propiedad `prototype`

Inicio

Definición y acceso a los elementos

Definición de un objeto

Añadir una nueva propiedad a un objeto

Añadir un método a un objeto

Palabra clave this

Objeto this Global

Añadimos una nueva propiedad a this Global

this en una función se refiere al objeto Global (en modo estricto sería undefined)

this en un evento se refiere al propio elemento que lanza el evento

Getters y Setters

Añadimos una nueva propiedad con Object.defineProperty()

Palabra clave this

Objeto this Global

Añadimos una nueva propiedad a this Global

this en una función se refiere al objeto Global (en modo estricto sería undefined)

this en un evento se refiere al propio elemento que lanza el evento

Constructores

Ejemplo de constructor.

Añadir una nueva propiedad a un constructor

Añadir una nueva propiedad a un constructor con la propiedad prototype

Palabra clave `this`

Objeto `this` Global

Añadimos una nueva propiedad a `this` Global

`this` en una función se refiere al objeto Global (en modo estricto sería `undefined`)

`this` en un evento se refiere al propio elemento que lanza el evento

Añadimos una nueva propiedad con `Object.defineProperty()`

Palabra clave `this`

Objeto `this` Global

Añadimos una nueva propiedad a `this` Global

`this` en una función se refiere al objeto Global (en modo estricto sería `undefined`)

`this` en un evento se refiere al propio elemento que lanza el evento

Añadir una nueva propiedad a un constructor con la propiedad `prototype`