O que acontece quando você congela um protótipo em JavaScript

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

console.log(counter.increment())

counter é um objeto com um campo e dois métodos operando nele.

Protótipos

Objetos podem herdar propriedades de protótipos. De fato, o counter O objeto já herda do Object.prototype objeto.

Por exemplo, podemos chamar o toString() método no counter objeto, mesmo que não o tenhamos definido.

counter.toString();

A melhor maneira de trabalhar com protótipos é extrair os métodos no protótipo e compartilhá-los entre todos os objetos com o mesmo comportamento. Vamos fazer isso 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

o Object.create() cria um novo objeto, usando um objeto existente como protótipo do novo objeto. counter tem counterPrototype como seu protótipo.

O sistema de protótipo é flexível, mas apresenta algumas quedas. Todas as propriedades são públicas e podem ser alteradas.

Por exemplo, podemos redefinir a implementação do increment() objeto no counter objeto.

const counter = Object.create(counterPrototype);
counter.count = 0;

counter.increment = function(){
  console.log('increment')
}

console.log(counter.increment());
//"increment"

Protótipos de congelamento

Vamos ver o que acontece se congelarmos o protótipo. O congelamento de um objeto não nos permite adicionar, remover ou alterar suas propriedades.

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 '#'

o Object.freeze() congela um objeto. Um objeto congelado não pode mais ser alterado. Não podemos adicionar, editar ou remover propriedades dele.

Agora, veja o que acontece ao tentar alterar o método no diretório counter objeto herdado de 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 você pode ver agora que o protótipo está congelado, não podemos alterar o increment() método no counter objeto.

Recapitular

Os objetos têm uma propriedade oculta referente ao seu protótipo.

O protótipo geralmente é usado para manter os métodos compartilhados entre diferentes objetos.

Congelar o protótipo não nos permite alterar essas propriedades nos objetos herdados desse protótipo. As outras propriedades podem ser alteradas.

Descobrir JavaScript funcional foi nomeado um dos melhores livros de programação funcional por BookAuthority!

Para saber mais sobre a aplicação de técnicas de programação funcional ao React, consulte Reação funcional.

Aprender Reagir funcional, de maneira baseada em projeto, com Arquitetura funcional com React e Redux.