¿Cómo funciona JavaScript .prototype?

En JavaScript, cuando se agrega comportamiento a los objetos, si se crean varios objetos con el constructor (llamando a la función del constructor con la palabra clave ‘nuevo’), la nueva palabra clave es la que convierte la llamada a la función en una llamada al constructor y cada vez que aparece una nueva se crea un objeto vacío que crea inconsistencia porque para cada objeto se crea una copia separada de la función. Entonces, si crea 1,000 objetos, entonces se crean 1,000 copias de la función y esto crea un desperdicio de memoria.

Entonces, por esta razón, el prototipo entra en esta imagen. 

Prototipo: es una forma sencilla de compartir comportamiento y datos entre múltiples objetos. Los prototipos son propiedad del constructor de objetos.

Sintaxis:

Object.prototype

Todos los objetos creados en JavaScript son instancias de ‘Objeto’. Por tanto, todos ellos comparten el método ‘Object.prototype’. También podemos anular estas propiedades.

¿Por qué necesitas prototipos? 

A veces es necesario agregar nuevas propiedades (o métodos) a todos los objetos existentes de un tipo determinado. Esto solo es posible agregando el nuevo método a la función prototipo.

vamos a entender ¿Cómo funciona el prototipo?

Entonces, para cada función, se crean dos objetos, uno para eso y otro para su prototipo. Cada función tiene su prototipo de propiedades, estas propiedades llegan al prototipo de la función, por lo que la creación de objetos a partir de esta función llamándola en modo constructor, cualquier objeto creado será el prototipo de la plantilla de prototipo, lo que significa que los objetos siguen la plantilla del prototipo, independientemente de las propiedades. o mención de comportamiento en prototipo, los objetos podrán acceder a esas propiedades. Puede ser más claro usando el siguiente diagrama.

¿Cómo funciona el prototipo?

Function_name.prototype: Da un prototipo de la función. Si desea volver del prototipo a la función, hay propiedades mencionadas en Prototipo, es decir, Constructor en ese caso Function_name.prototype.constructor vuelve a la función.

Ejemplo 1:

// Constructor
function vehicle(numWheels, price) {
    this.numWheels = numWheels;
    this.price = price;
    this.getPrice = () => {
        return this.price;
    }
}
 
var vehicle1 = new vehicle(10, 378979);
var vehicle2 = new vehicle(36, 899768);
 
// function.prototype works
vehicle.prototype
 
// function.prototype.constructor works
vehicle.prototype.constructor

Producción:

Nombre_función.prototipo

Aquí vehículo.prototipo da un prototipo de una función de vehículo.

Función.prototipo.constructor

Aquí vehículo.prototipo.constructor da la misma función qué prototipo es, en este caso, funciones del vehículo, por lo que da esa función como salida.

Los objetos heredan propiedades del prototipo:

Entonces, todos los objetos que se crean tendrán una referencia interna a un prototipo, lo que significa que para cada función hay una copia y todos los objetos comparten esa copia. No es necesario crear una copia separada. Significa agregar comportamiento a la función en lugar de acceder al comportamiento desde el prototipo (ejemplo La función getprice() es el comportamiento), por lo que llamarlo desde el prototipo no se almacena en la función. 

Ejemplo 2:

//constructor
function vehicle(numWheels, price) {
    this.numWheels = numWheels;
    this.price = price;
}
 
// Adding behaviour to constructor vehicle
vehicle.prototype.getPrice = function () {
    return this.price;
}
 
var vehicle1 = new vehicle(5, 100000);
var vehicle2 = new vehicle(10, 390000);
 
// Function or constructor
vehicle
 
// function.prototype works
vehicle.prototype
 
// function call using object
vehicle1.getPrice();

Producción:

función

Aquí el constructor no contiene la función getprice() porque no puede ocupar espacio dentro del vehículo en funcionamiento.

función.prototipo

Pero el prototipo de la función del vehículo contiene la función getprice() como sus propiedades.

objeto

El objeto del vehículo1 también tiene la función getprice() dentro de su prototipo. para que pueda acceder fácilmente a la función getPrice().

objeto.prototipo

Aquí, como getprice(), no está ocupando espacio en la función del vehículo, sino que los objetos pueden acceder a getprice() usando el prototipo. Aunque getprice() está dentro del prototipo de la función. 

.prototype más usos:   También se usa para agregar propiedades en tiempo de ejecución. para que todos los objetos tengan una propiedad común. como si hay 1000 vehículos y todos tienen el mismo número de modelo. Esta búsqueda funciona primero, va a buscarlo en el objeto y luego va al prototipo para buscar esta propiedad.