Prototipo en JavaScript - Explicación con Ejemplos Prácticos

En este artículo, vamos a profundizar en uno de los temas más importantes en el mundo del Javascript, y es sobre el concepto llamado "Prototype". Este término puede resultar confuso para algunos desarrolladores principiantes pero no hay que preocuparse porque explicaremos de manera sencilla lo que es un prototype javascript.

Como bien sabemos, cuando creamos una nueva función en Javascript, podemos utilizar la palabra clave reservada new, por ejemplo: var persona = new Person(). El resultado obtenido será un nuevo objeto llamado "persona", pero también heredará todas las propiedades que tenga el prototipo de la clase "Person" incluido este propio prototipo.

Por lo tanto, si bien entendemos sobre qué estamos hablando podemos continuar adelante con más detalles sobre el concepto del javascript prototype.

Conceptos básicos del prototipo en JavaScript

En JavaScript, el concepto del prototipo es fundamental para entender la herencia de propiedades y métodos entre objetos. Cuando se crea un objeto utilizando la sintaxis new Function(), automáticamente se asigna a dicho objeto un prototipo llamado prototype. Esto significa que cualquier función que utilice la palabra reservada new creará un nuevo objeto con un prototipo heredado de la función, incluyendo el propio prototipo.

Cuando declaras una función en JavaScript, se crea automáticamente un objeto propiedad llamado prototype, lo que permite utilizar metodos como prototype. Esto nos ayuda a crear objetos herederos de otras funciones y, por ende, también heredarán las propiedades del prototipo de la función desde la cual fue creada dicha clase.

Por ejemplo, cuando utilizamos el método Object.create() para crear un nuevo objeto con un prototipo personalizado, estamos explícitamente indicando que el nuevo objeto debe heredar todas las propiedades de su prototipo. Este es solo uno de los métodos por medio del cual podemos manipular los prototipos en javascript y utilizarlos al momento de crear objetos en nuestro código.

Esto nos permite crear una estructura de herencia en nuestros objetos, donde un objeto puede heredar propiedades de otro, creando así un árbol de objetos que se relacionan entre sí.

Herencia de objetos y propiedades

Uno de los aspectos más interesantes del prototipo de Javascript es que los nuevos objetos creados heredan todas las propiedades del original objeto creado a través del constructor, incluyendo el propio prototipo.

Por ejemplo, si tienes un protoclase llamado Persona con dos propiedades nombre y edad, al crear un nuevo objeto persona utilizando la palabra clave reservada new, se creará un nuevo objeto llamado persona que heredará las propiedades de Persona (el protoclase) incluyendo el propio prototipo de Persona.

En javascript, los objetos creados con el constructor heredan automáticamente el prototipo del original objeto. Lo mismo sucede cuando se utiliza la palabra clave reservada new en una función que tenga un prototipo personalizado.

Por ejemplo, si tienes una función llamada persona con un prototipo personalizado y dentro de ella tienes dos propiedades nombre y edad, al crear un nuevo objeto utilizando el constructor persona(), se creará un nuevo objeto con el mismo prototipo que persona y heredando las propiedades de Persona incluyendo el propio prototipo.

Es importante entender esto porque afecta directamente el funcionamiento de tus objetos en tiempo de ejecución. Si tienes dos objetos distintos pero heredan del mismo protoclase, todos los cambios realizados sobre el objeto original serán aplicables para cualquier nuevo objeto creado a partir de ese protoclase.

Utilizando el método Object.create() para crear objetos personalizados

La creación de objetos personalizados en JavaScript puede ser tan sencillo como utilizar la función Object.create(), que nos permite establecer un prototipo específico para nuestros objetos nuevos.

Dentro del siguiente ejemplo se muestra una forma de crear objetos basados en el prototipo de otra instancia:

```javascript
const persona = {
nombre: 'Juan'
};

function Usuario(usuario) {
this.usuario = usuario;
}

Usuario.prototype = Object.create(persona);
Usuario.call(this, "pepito");
```

Al hacer esto se establece la propiedad prototype del objeto creado por el constructor como un clone de la propia instancia. Esto significa que cualquier propiedad en nuestra instancia original (que es nuestro prototipo) será visible para nuestros nuevos objetos.

Así entonces con Object.create() podemos crear nuestras propias instancias que heredan las propiedades y métodos de otra clase, incluyendo sus métodos de constructor.

Protoclas como una sintaxis azucarada para la programación orientada a objetos

En JavaScript, los protoclases son una forma de crear objetos con un prototipo personalizado, lo que significa que puedes definir las propiedades y métodos que desees en el objeto creado. Esto es útil cuando trabajas con objetos complejos o necesitas reutilizar código.

Por ejemplo, podrías tener una clase Persona con un protocla de tipo Persona, y luego crear instancias de esa clase con diferentes características como nombre, edad y email. Al utilizar el método Object.create() puedes crear nuevos objetos que hereden las propiedades del protoclase.

Aquí tienes un ejemplo simple:

```javascript
class Persona {
constructor(nombre, edad) {
this.nombre = nombre;
this.edad = edad;
}
}

const persona1 = Object.create(Persona.prototype);
persona1.nombre = 'Juan';
persona1.edad = 30;

console.log(persona1.nombre); // Juan
console.log(persona1.edad); // 30
```

En este ejemplo, se crea una clase Persona con dos propiedades: nombre y edad. Luego, se crea un objeto nuevo llamado persona1 utilizando el método Object.create() con el protoclase de tipo Persona. Se asiganan las propiedades nombre y edad a este objeto.

Ejemplos prácticos con código

Herencia Prototipos y objeto Prototype

Cuando se utiliza la palabra reservada new con una función en JavaScript, se crea un nuevo objeto que hereda las propiedades de dicha función incluyendo su propio prototype. Por ejemplo:

```javascript
function Persona(nombre) {
this.nombre = nombre;
}

let persona1 = new Persona('Juan');
console.log(persona1); // Objeto: {nombre: 'Juan', proto: Persona {...}}
```

En el ejemplo anterior, se crea una función Persona que tiene un prototype por defecto. Cuando se utiliza la palabra reservada new, se crea un objeto persona1 que hereda las propiedades de Persona incluyendo su propio prototype.

Crear objetos con prototype personalizada

Para crear objetos con un prototype personalizado, podemos utilizar el método Object.create(). Por ejemplo:

javascript
let persona2 = Object.create(Persona.prototype);
console.log(persona2); // Objeto: {__proto__: Persona {...}}


En el ejemplo anterior, se crea un objeto persona2 con un prototype personalizado que hereda las propiedades de la función Persona.

Herencia Prototipos en funciones

Así mismo también podemos hacer una llamada a una funcion y pasarle un objeto que herede las propiedades de dicha funcion.

```javascript
function Persona(nombre) {
this.nombre = nombre;
}

let persona3 = new (function () {
this.constructor = Persona;
})('Juan');
console.log(persona3); // Objeto: {nombre: 'Juan', proto: Persona {...}}
```

En el ejemplo anterior, se crea una función Persona que tiene un prototype por defecto. Cuando se utiliza la palabra reservada new, se crea un objeto persona3 que hereda las propiedades de Persona incluyendo su propio prototype.

Creando un objeto que hereda propiedades

Uno de los beneficios principales del prototipo de JavaScript es la posibilidad de crear objetos que hereden propiedades y métodos de otros objetos, sin tener que recopilarlos en una clase o función.

En este ejemplo, vamos a crear dos objetos llamados "Persona" y "Empleado", donde el objeto Empleado hereda las propiedades de Persona.

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

// Objeto Empleado que hereda la función Persona
function Empleado(nombre,edad,direccion){
Persona.call(this,nombre,edad);
this.direccion = direccion;

}
Empleado.prototype.proto=Persona.prototype;

var persona1 = new Persona("Juan",30);
console.log(persona1);

var empleado = new Empleado("Pedro",35,"Madrid");
console.log(empleado);
```

Aquí podemos observar que se puede crear un objeto llamado "Persona" con dos propiedades y luego utilizar el método call() para pasar estas dos propiedades al objeto Persona, siendo llamada como una función. Luego utilizamos la sintaxis de herencia prototipos para hacer que Empleado herede todas las propiedades incluidas en Persona.

Uso del método Object.create()

El método Object.create() nos permite crear objetos con un prototipo personalizado en lugar del default. Esta es una forma alternativa de crear objetos, que tiene algunas ventajas sobre la forma tradicional con la palabra reservada new.

Al utilizar este método, podemos especificar el objeto que será utilizado como prototipo del nuevo objeto, por lo que podemos controlar mucho mejor el comportamiento y las propiedades del objeto creado.

Creando un objeto con Object.create()

``javascript
// Objeto de ejemplo para ser utilizado como prototipo
let personPrototype = {
name: '',
age: 0,
speak() { console.log(Hi, my name is ${this.name} and I am ${this.age}.`) },
};

// Creando un nuevo objeto con el método Object.create()
let juan = Object.create(personPrototype);
juan.name = 'Juan';
juan.age = 30;
```

Uso de Object.create() en contexto de prototipo

En la forma tradicional de JavaScript, los objetos heredaban propiedades del propio prototype utilizando la palabra reservada new. En cambio, el método Object.create() nos permite crear objetos que hereden directamente del objeto que se le pasa como argumento.

Por ejemplo:

``javascript
// Objeto de ejemplo para ser utilizado como prototipo
let personPrototype = {
name: '',
age: 0,
speak() { console.log(Hi, my name is ${this.name} and I am ${this.age}.`) },
};

// Creando un nuevo objeto con el método Object.create()
let juan = Object.create(personPrototype);
juan.name = 'Juan';
juan.age = 30;

console.log(juan.speak()); // Hi, my name is Juan and I am 30.
```

Implementando protoclases

Algunas veces se nos pide implementar objetos que heredan de otros, esto se puede hacer a través del siguiente código.

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

Persona.prototype.imprimirDatos = function() {
return Nombre: ${this.nombre}, Edad: ${this.edad};
}
```

Si no estamos interesados en crear el objeto directamente con new persona y solo nos interesa que nuestra función herede de la clase persona. En ese caso, no hay necesidad de utilizar new, pero si lo hacemos se generará un nuevo prototipo.

```javascript
function Cliente() {
Persona.call(this,"Juan",30);
}

Cliente.prototype = Object.create(Persona.prototype);

// El resultado seria:
// Cliente.prototype.proto === Persona.prototype
```

No podemos dejar que el prototipo del objeto heredado de Persona sea null, si no queremos que nuestra clase tenga una propiedad proto. Por lo tanto se generará un nuevo prototype y establecerá su prototipo para que sea el de persona.

Ventajas y desventajas de utilizar el prototipo en JavaScript

Ventajas

Utilizar el prototipo en Javascript tiene varias ventajas importantes para cualquier desarrollador. Una de las principales ventajas es la flexibilidad que ofrece a los programadores en términos de crear objetos personalizados con sus propias características.

Otro beneficio importante al utilizar el prototipo es la posibilidad de reducir la cantidad de memoria necesaria en las aplicaciones web, ya que esto ayuda a mantener eficiente y fluido el funcionamiento general del sitio web.

Desventajas

A pesar de todos estos beneficios, también hay algunos inconvenientes importantes al usar el prototipo en JavaScript. Una de las desventajas principales es que puede ser un poco complicado para los programadores principiantes entender cómo funciona el sistema y cómo se utiliza correctamente. Esto podría hacer difícil para ellos poder escribir código limpio o realizar correcciones a errores comunes.

Además, la velocidad de ejecución no siempre mejora utilizando este prototipo en comparación con otras formas de crear objetos.

Con estos puntos importantes en mente, es posible sacar las mejores conclusiones sobre el uso del prototipo en Javascript.

Conclusión

La comprensión y manipulación del prototype es una herramienta poderosa para cualquier desarrollador de JavaScript que busque mejorar sus habilidades en este lenguaje. Al dominar conceptos como herencia prototipal, creación de objetos con prototypes personalizados, así como integración de protoclas y objetos, uno puede escribir código más eficiente, escalable y mantenible.

La adopción del paradigma de orientación a objetos en JavaScript ha llevado a la creación de frameworks y librerías más robustas, pero es importante no olvidar las herramientas básicas que hacen que este lenguaje sea tan versátil como lo es. Al entender cómo funciona el javascript prototype, puedes optimizar tus funciones y estructuras de datos para aprovechar al máximo su potencial.

La habilidad de crear objetos con prototypes personalizados puede hacer una gran diferencia en proyectos más complejos, donde la organización del código es crucial para su eficiencia y mantenibilidad. Al utilizar técnicas de herencia prototipal efectiva, puedes encapsular lógica relacionada en un solo lugar, facilitando la lectura y modificación del código.

Al final, el dominio del prototype te brindará una comprensión más profunda y apreciación por los principios que subyacen al diseño de tu propio software. Esto puede llevar a decisiones informadas y un enfoque más matizado en la resolución de problemas complejos, donde cada componente contribuye significativamente al panorama general del sistema.

Si quieres conocer otros artículos parecidos a Prototipo en JavaScript - Explicación con Ejemplos Prácticos puedes visitar la categoría Programacion.