Emular métodos privados conclosures

Los lenguajes como Java le permiten declarar métodos como privados, lo que significa que solo pueden ser llamados por otros métodos de la misma clase.

JavaScript, antes declases, no tenía una forma nativa de declararmétodos privados, pero era posible emular métodos privados usandoclosures. Los métodos privados no solo son útiles para restringir el acceso al código. También proporcionan una forma poderosa de gestionar su espacio de nombres global.

El siguiente código ilustra cómo usarclosures para definir funciones públicas que pueden acceder a funciones y variables privadas. Tenga en cuenta que estosclosures siguen elPatrón de diseño de módulo.

const counter = (function () {  let privateCounter = 0;  function changeBy(val) {    privateCounter += val;  }  return {    increment() {      changeBy(1);    },    decrement() {      changeBy(-1);    },    value() {      return privateCounter;    },  };})();console.log(counter.value()); // 0.counter.increment();counter.increment();console.log(counter.value()); // 2.counter.decrement();console.log(counter.value()); // 1.

En ejemplos anteriores, cadaclosure tenía su propio entorno léxico. Aquí, sin embargo, hay un único entorno léxico que es compartido por las tres funciones:counter.increment,counter.decrement ycounter.value.

El entorno léxico compartido se crea en el cuerpo de una función anónima,que se ejecuta tan pronto como se ha definido (también conocida comoIIFE). El entorno léxico contiene dos elementos privados: una variable llamadaprivateCounter y una función llamadachangeBy. No puedes acceder a ninguno de estos miembros privados desde fuera de la función anónima. En su lugar, puede acceder a ellos utilizando las tres funciones públicas que se devuelven desde el contenedor anónimo.

Esas tres funciones públicas formanclosures que comparten un mismo entorno léxico. Gracias al alcance léxico de JavaScript, cada uno tiene acceso a la variableprivateCounter y a la funciónchangeBy.

const makeCounter = function () {  let privateCounter = 0;  function changeBy(val) {    privateCounter += val;  }  return {    increment() {      changeBy(1);    },    decrement() {      changeBy(-1);    },    value() {      return privateCounter;    },  };};const counter1 = makeCounter();const counter2 = makeCounter();console.log(counter1.value()); // 0.counter1.increment();counter1.increment();console.log(counter1.value()); // 2.counter1.decrement();console.log(counter1.value()); // 1.console.log(counter2.value()); // 0.

Observa cómo los dos contadores mantienen su independencia el uno del otro. Cadaclosure hace referencia a una versión diferente de la variableprivateCounter a través de su propioclosure. Cada vez que se llama a uno de los contadores, su entorno léxico cambia cambiando el valor de esta variable. Los cambios en el valor de la variable en unclosure no afectan el valor en el otroclosure.

Cadena de alcance de closure

Cadaclosure tiene tres alcances:

• Alcance local (Ámbito propio)
• Alcance envolvente (puede ser alcance de bloque, función o módulo)
• Alcance global

Un error común es no darse cuenta de que en el caso de que la función externa sea en sí misma una función anidada, el acceso al alcance de la función externa incluye el alcance circundante de la función externa, creando efectivamente una cadena de alcances de función. Para demostrarlo, considere el siguiente código de ejemplo.

// ámbito globalconst e = 10;function sum(a) {  return function (b) {    return function (c) {      // ámbito de funciones exteriores      return function (d) {        // ámbito local        return a + b + c + d + e;      };    };  };}console.log(sum(1)(2)(3)(4)); // 20

También puede escribir sin funciones anónimas:

// ámbito globalconst e = 10;function sum(a) {  return function sum2(b) {    return function sum3(c) {      // ámbito de funciones exteriores      return function sum4(d) {        // ámbito local        return a + b + c + d + e;      };    };  };}const sum2 = sum(1);const sum3 = sum2(2);const sum4 = sum3(3);const result = sum4(4);console.log(result); // 20

En el ejemplo anterior, hay una serie de funciones anidadas, todas las cuales tienen acceso al ámbito de las funciones externas. En este contexto, podemos decir que losclosures tienen acceso atodos los ámbitos de función externos.

Losclosure también pueden capturar variables en ámbitos de bloque y ámbitos de módulo. Por ejemplo, lo siguiente crea unclosure sobre la variable de ámbito de bloquey:

function outer() {  let getY;  {    const y = 6;    getY = () => y;  }  console.log(typeof y); // undefined  console.log(getY()); // 6}outer();

Losclosure sobre los módulos pueden ser más interesantes.

// myModule.jslet x = 5;export const getX = () => x;export const setX = (val) => {  x = val;};

Aquí, el módulo exporta un par de funcionesgetter-setter (para asignar y obtener), que se cierran sobre la variable de alcance del módulox. Incluso cuandox no es directamente accesible desde otros módulos, se puede leer y escribir con las funciones.

import { getX, setX } from "./myModule.js";console.log(getX()); // 5setX(6);console.log(getX()); // 6

Losclosure también pueden cerrar sobre valores importados, que se consideran comoenlazadas en vivo, porque cuando el valor original cambia, el importado cambia en consecuencia.

// myModule.jsexport let x = 1;export const setX = (val) => {  x = val;};

// closureCreator.jsimport { x } from "./myModule.js";export const getX = () => x; // Cerrar sobre un enlace en vivo importado

import { getX } from "./closureCreator.js";import { setX } from "./myModule.js";console.log(getX()); // 1setX(2);console.log(getX()); // 2

Crear closures en bucles: un error común

Antes de la introducción de la palabra clavelet, se producía un problema común con losclosure cuando los creabas dentro de un bucle. Para demostrarlo, considere el siguiente código de ejemplo.

<p>Aquí aparecerán notas útiles</p><p>Correo electrónico: <input type="text" name="email" /></p><p>Nombre: <input type="text" name="name" /></p><p>Edad: <input type="text" name="age" /></p>

function showHelp(help) {  document.getElementById("help").textContent = help;}function setupHelp() {  var helpText = [    { id: "email", help: "Tu dirección de correo electrónico" },    { id: "name", help: "Tu nombre completo" },    { id: "age", help: "Tu edad (debes ser mayor de 16 años)" },  ];  for (var i = 0; i < helpText.length; i++) {    // La razón es el uso de `var` en esta línea    var item = helpText[i];    document.getElementById(item.id).onfocus = function () {      showHelp(item.help);    };  }}setupHelp();

Intenta ejecutar el código enJSFiddle.

La matrizhelpText define tres consejos útiles, cada uno asociado con el ID de un campo de entrada en el documento. El bucle recorre estas definiciones, conectando un eventoonfocus a cada uno que muestra el método de ayuda asociado.

Si pruebas este código, verás que no funciona como esperabas. No importa en qué campo se centre, se mostrará el mensaje sobre su edad.

La razón de esto es que las funciones asignadas aonfocus formanclosures; consisten en la definición de la función y el entorno capturado desde el alcance de la funciónsetupHelp. El bucle ha creado tresclosure, pero cada uno comparte el mismo entorno léxico único, que tiene una variable con valores cambiantes (item). Esto se debe a que la variableitem se declara convar y, por lo tanto, tiene un alcance de función debido a la elevación. El valor deitem.help' se determina cuando se ejecutan las devoluciones de llamadaonfocus. Debido a que el bucle ya ha seguido su curso en ese momento, el objeto variableitem(compartido por los tres _closure_) se ha dejado apuntando a la última entrada en la listahelpText`.

Una solución en este caso es usar másclosure: en particular, usar una fábrica de funciones como se describió anteriormente:

function showHelp(help) {  document.getElementById("help").textContent = help;}function makeHelpCallback(help) {  return function () {    showHelp(help);  };}function setupHelp() {  var helpText = [    { id: "email", help: "Tu dirección de correo electrónico" },    { id: "name", help: "Tu nombre completo" },    { id: "age", help: "Tu edad (debes ser mayor de 16 años)" },  ];  for (var i = 0; i < helpText.length; i++) {    var item = helpText[i];    document.getElementById(item.id).onfocus = makeHelpCallback(item.help);  }}setupHelp();

Ejecuta el código usandoeste enlace de JSFiddle.

Esto funciona como se esperaba. En lugar de que todas las devoluciones de llamada compartan un único entorno léxico, la funciónmakeHelpCallback creaun nuevo entorno léxico para cada devolución de llamada, en el quehelp se refiere a la cadena correspondiente de la matrizhelpText.

Otra forma de escribir lo anterior utilizando cierres anónimos es:

function showHelp(help) {  document.getElementById("help").textContent = help;}function setupHelp() {  var helpText = [    { id: "email", help: "Tu dirección de correo electrónico" },    { id: "name", help: "Tu nombre completo" },    { id: "age", help: "Tu edad (debes ser mayor de 16 años)" },  ];  for (var i = 0; i < helpText.length; i++) {    (function () {      var item = helpText[i];      document.getElementById(item.id).onfocus = function () {        showHelp(item.help);      };    })(); //Adjunto del detector de eventos inmediatos con el valor actual del elemento (conservado hasta la iteración).  }}setupHelp();

Si no desea utilizar másclosure, puede utilizar la palabra clavelet oconst:

function showHelp(help) {  document.getElementById("help").textContent = help;}function setupHelp() {  const helpText = [    { id: "email", help: "Tu dirección de correo electrónico" },    { id: "name", help: "Tu nombre completo" },    { id: "age", help: "Tu edad (debes ser mayor de 16 años)" },  ];  for (let i = 0; i < helpText.length; i++) {    const item = helpText[i];    document.getElementById(item.id).onfocus = () => {      showHelp(item.help);    };  }}setupHelp();

Este ejemplo usaconst en lugar devar, por lo que cadaclosure vincula la variable de alcance de bloque, lo que significa que no se requierenclosure adicionales.

Otra alternativa podría ser usarforEach() para iterar sobre la matrizhelpText y adjuntar un detector a cada<input>, como se muestra:

function showHelp(help) {  document.getElementById("help").textContent = help;}function setupHelp() {  var helpText = [    { id: "email", help: "Tu dirección de correo electrónico" },    { id: "name", help: "Tu nombre completo" },    { id: "age", help: "Tu edad (debes ser mayor de 16 años)" },  ];  helpText.forEach(function (text) {    document.getElementById(text.id).onfocus = function () {      showHelp(text.help);    };  });}setupHelp();

Consideraciones de rendimiento

Como se mencionó anteriormente, cada instancia de función gestiona su propio alcance y cierre. Por lo tanto, no es prudente crear funciones innecesariamente dentro de otras funciones si no se necesitanclosures para una tarea en particular, ya que afectará negativamente el rendimiento del script tanto en términos de velocidad de procesamiento como de consumo de memoria.

Por ejemplo, al crear un nuevo objeto/clase, los métodos normalmente deben asociarse al prototipo del objeto en lugar de definirse en el constructor del objeto. La razón es que cada vez que se llama al constructor, los métodos se reasignan (es decir, para cada creación de objetos).

Observemos el siguiente caso:

function MyObject(name, message) {  this.name = name.toString();  this.message = message.toString();  this.getName = function () {    return this.name;  };  this.getMessage = function () {    return this.message;  };}

Debido a que el código anterior no aprovecha los beneficios de usarclosures en esta instancia en particular, podríamos reescribirlo para evitar usarclosures de la siguiente manera:

function MyObject(name, message) {  this.name = name.toString();  this.message = message.toString();}MyObject.prototype = {  getName() {    return this.name;  },  getMessage() {    return this.message;  },};

Sin embargo, no se recomienda redefinir el prototipo. En su lugar, el siguiente ejemplo se adjunta al prototipo existente:

function MyObject(name, message) {  this.name = name.toString();  this.message = message.toString();}MyObject.prototype.getName = function () {  return this.name;};MyObject.prototype.getMessage = function () {  return this.message;};

En los dos ejemplos anteriores, el prototipo heredado puede ser compartido por todos los objetos y las definiciones del método no necesitan ocurrir en cada creación de objetos. ConsulteLa herencia y la cadena de prototipos para obtener más información.