Prototipos

Curso de Javascript Online. Desde cero.

Por 9.99€ al mes tendrás acceso completo a todos los cursos. Sin matrícula ni permanencia.

Javascript no es un lenguaje de programación orientada a objetos, aunque acepte usar la sintaxis propia de la programación orientada a objetos.

El modelo de programación orientada a objetos más habitual es el basado en clases. Sin embargo, Javascript no se basa en clases, sino en prototipos.

Si ejecutamos el siguiente código:

    const libro = {
        titulo: "Las cositas",
        precio: 5
    }

    console.log(libro);

Obtendremos la siguiente salida por consola:

Prototipos 1

Como puedes ver, en la consola se especifica que el prototipo del objeto es Object. Esto es similar a la herencia de la programación orientada a objetos. Una variable de cierto prototipo tendrá todos los métodos de ese prototipo.

La propiedad prototype de una variable apunta al objeto que se usa como prototipo. El siguiente código:

console.log(Object.prototype)

Dará lugar a esta salida por consola:

Prototipos 2

En Javascript, una función es una entidad de tipo objeto. Para crear un prototipo usaremos una función. Por tanto, usando prototipos se mezclará la sintaxis de funciones y objetos.

function Persona(nombre, edad) {
    const persona = Object.create({});
    persona.nombre = nombre;
    persona.edad = edad;
    return persona;
}

const p = Persona("Juan", 20);

console.log(p);

El método estático Object.create(), crea un nuevo objeto, usando un objeto existente como prototipo.

Por tanto, en el código anterior, el prototipo de Persona es un objeto vacío que a su vez tiene como prototipo padre el prototipo Object.

Prototipos 3

Podemos crear un prototipo a partir de otro prototipo usando el método Object.create():

function Persona(nombre, edad) {
    const persona = Object.create(ObjetoConstructor);
    persona.nombre = nombre;
    persona.edad = edad;
    return persona;
}

const ObjetoConstructor = {
    peso: 90
}
const p = Persona("Juan", 20);

console.log(p);
Prototipos 4

Un resultado similar al código anterior se podía haber obtenido utilizando la palabra clave new:

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

Persona.prototype.peso = 90;

const p = new Persona("Juan", 20);

console.log(p);
Prototipos 5

Por 9.99€ al mes tendrás acceso completo a todos los cursos. Sin matrícula ni permanencia.