¿Qué sucede cuando congela un prototipo en JavaScript?

¿Te has preguntado qué sucede cuando congelas el prototipo de un objeto? Descubrámoslo juntos.

Objetos

En JavaScript, los objetos son colecciones dinámicas de propiedades con una propiedad "oculta". Comenzamos creando tal objeto usando la sintaxis literal de objeto.

const counter = { count: 0, increment(){ this.count += 1; return this.count; }, decrement(){ this.count -= 1; return this.count } } console.log(counter.increment())

counter es un objeto con un campo y dos métodos que operan en él.

Prototipos

Los objetos pueden heredar propiedades de prototipos. De hecho, el counterobjeto ya hereda del Object.prototypeobjeto.

Por ejemplo, podemos llamar al toString()método en el counterobjeto incluso si no lo hemos definido.

counter.toString();

La mejor forma de trabajar con prototipos es extraer los métodos del prototipo y luego compartirlos entre todos los objetos que tengan el mismo comportamiento. Hagamos eso usando Object.create ().

const counterPrototype = { increment(){ this.count += 1; return this.count; }, decrement(){ this.count -= 1; return this.count } } const counter = Object.create(counterPrototype); counter.count = 0; console.log(counter.increment()) //1

El Object.create()crea un nuevo objeto, utilizando un objeto existente como prototipo del nuevo objeto.  countertiene   counterPrototypecomo prototipo.

El sistema prototipo es flexible pero tiene algunas desventajas. Todas las propiedades son públicas y pueden modificarse.

Por ejemplo, podemos redefinir la implementación del increment()objeto en el counterobjeto.

const counter = Object.create(counterPrototype); counter.count = 0; counter.increment = function(){ console.log('increment') } console.log(counter.increment()); //"increment"

Congelación de prototipos

Veamos qué pasa si congelamos el prototipo. Congelar un objeto no nos permite agregar, eliminar o cambiar sus propiedades.

const counterPrototype = Object.freeze({ increment(){ this.count += 1; return this.count; }, decrement(){ this.count -= 1; return this.count } }); counterPrototype.increment = function(){ console.log('increment') } //Cannot assign to read only property 'increment' of object '#'

El Object.freeze()queda como un objeto. Ya no se puede cambiar un objeto congelado. No podemos agregar, editar o eliminar propiedades de él.

Ahora eche un vistazo a lo que sucede cuando se intenta cambiar el método en el counterobjeto del que se hereda counterPrototype.

const counter = Object.create(counterPrototype); counter.count = 0; counter.increment = function(){ console.log('increment') } //Cannot assign to read only property 'increment' of object console.log(counter.increment()); //1

Como puede ver ahora que el prototipo está congelado, no podemos cambiar el increment()método en el counterobjeto.

Resumen

Los objetos tienen una propiedad oculta que hace referencia a su prototipo.

El prototipo se suele utilizar para mantener los métodos que se comparten entre diferentes objetos.

Congelar el prototipo no nos permite cambiar esas propiedades en los objetos que heredan de ese prototipo. Las otras propiedades se pueden cambiar.

Discover Functional JavaScript fue nombrado uno de los¡Los mejores libros de programación funcional de BookAuthority!

Para obtener más información sobre cómo aplicar técnicas de programación funcional a React, eche un vistazo a Functional React.

Aprenda React funcional , de una manera basada en proyectos, con Arquitectura funcional con React y Redux .