Private Methoden mit Closures emulieren

Sprachen wie Java erlauben es Ihnen, Methoden als privat zu deklarieren, was bedeutet, dass sie nur von anderen Methoden in derselben Klasse aufgerufen werden können.

JavaScript hatte vor der Einführung vonKlassen keine native Möglichkeit,private Methoden zu deklarieren, aber es war möglich, private Methoden mit Closures zu emulieren. Private Methoden sind nicht nur nützlich, um den Zugriff auf Code zu beschränken. Sie bieten auch eine leistungsstarke Möglichkeit, Ihren globalen Namespace zu verwalten.

Der folgende Code zeigt, wie man Closures verwendet, um öffentliche Funktionen zu definieren, die auf private Funktionen und Variablen zugreifen können. Beachten Sie, dass diese Closures demModule Design Pattern folgen.

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.

In früheren Beispielen hatte jedes Closure seine eigene lexikalische Umgebung. Hier jedoch gibt es eine einzige lexikalische Umgebung, die von den drei Funktionen geteilt wird:counter.increment,counter.decrement undcounter.value.

Die geteilte lexikalische Umgebung wird im Rumpf einer anonymen Funktion erstellt,die ausgeführt wird, sobald sie definiert ist (auch bekannt alsIIFE). Die lexikalische Umgebung enthält zwei private Elemente: eine Variable namensprivateCounter und eine Funktion namenschangeBy. Sie können auf keines dieser privaten Mitglieder von außerhalb der anonymen Funktion zugreifen. Stattdessen greifen Sie indirekt über die drei öffentlichen Funktionen, die aus dem anonymen Wrapper zurückgegeben werden, darauf zu.

Diese drei öffentlichen Funktionen bilden Closures, die die gleiche lexikalische Umgebung teilen. Dank der lexikalischen Scoping von JavaScript haben sie alle Zugriff auf die VariableprivateCounter und die FunktionchangeBy.

function makeCounter() {  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.

Beachten Sie, wie die beiden Counter ihre Unabhängigkeit voneinander bewahren. Jedes Closure bezieht sich auf eine andere Version derprivateCounter-Variable durch sein eigenes Closure. Jedes Mal, wenn einer der Counter aufgerufen wird, ändert sich seine lexikalische Umgebung, indem der Wert dieser Variable geändert wird. Änderungen am Variablenwert in einem Closure beeinflussen nicht den Wert im anderen Closure.

Closure-Scope-Kette

Der Zugriff einer verschachtelten Funktion auf den Scope der äußeren Funktion schließt den umgebenden Scope der äußeren Funktion ein und erstellt effektiv eine Kette von Funktionsscopes. Um dies zu demonstrieren, betrachten Sie den folgenden Beispielcode.

// global scopeconst e = 10;function sum(a) {  return function (b) {    return function (c) {      // outer functions scope      return function (d) {        // local scope        return a + b + c + d + e;      };    };  };}console.log(sum(1)(2)(3)(4)); // 20

Sie können auch ohne anonyme Funktionen schreiben:

// global scopeconst e = 10;function sum(a) {  return function sum2(b) {    return function sum3(c) {      // outer functions scope      return function sum4(d) {        // local scope        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

Im obigen Beispiel gibt es eine Reihe von verschachtelten Funktionen, die alle Zugriff auf den Scope der äußeren Funktionen haben. In diesem Kontext können wir sagen, dass Closures Zugriff aufalle äußeren Scopes haben.

Closures können auch Variablen in Blockscopes und Moduls scopes erfassen. Zum Beispiel wird im Folgenden ein Closure über die block-scoped Variabley erstellt:

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

Closures über Module können interessanter sein.

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

Hier exportiert das Modul ein Paar von Getter-Setter-Funktionen, die über die im Modul gescoped Variablex schließen. Auch wennx nicht direkt von anderen Modulen zugänglich ist, kann es mit den Funktionen gelesen und geschrieben werden.

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

Closures können auch über importierte Werte schließen, die alsdynamischeBindings betrachtet werden, weil sich der importierte Wert entsprechend ändert, wenn sich der Originalwert ändert.

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

// closureCreator.jsimport { x } from "./myModule.js";export const getX = () => x; // Close over an imported live binding

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

Erstellen von Closures in Schleifen: Ein häufiger Fehler

Vor der Einführung deslet Schlüsselworts trat ein häufiges Problem mit Closures auf, wenn Sie sie innerhalb einer Schleife erstellten. Um dies zu demonstrieren, betrachten Sie den folgenden Beispielcode.

<p>Helpful notes will appear here</p><p>Email: <input type="text" name="email" /></p><p>Name: <input type="text" name="name" /></p><p>Age: <input type="text" name="age" /></p>

function showHelp(help) {  document.getElementById("help").textContent = help;}function setupHelp() {  var helpText = [    { id: "email", help: "Your email address" },    { id: "name", help: "Your full name" },    { id: "age", help: "Your age (you must be over 16)" },  ];  for (var i = 0; i < helpText.length; i++) {    // Culprit is the use of `var` on this line    var item = helpText[i];    document.getElementById(item.id).onfocus = function () {      showHelp(item.help);    };  }}setupHelp();

DashelpText-Array definiert drei hilfreiche Hinweise, die jeweils mit der ID eines Eingabefeldes im Dokument verknüpft sind. Die Schleife durchläuft diese Definitionen und verbindet einonfocus-Ereignis mit jedem, das die zugehörige Hilfsmethode anzeigt.

Wenn Sie diesen Code ausprobieren, werden Sie sehen, dass er nicht wie erwartet funktioniert. Unabhängig davon, auf welches Feld Sie sich konzentrieren, wird die Nachricht über Ihr Alter angezeigt.

Der Grund dafür ist, dass die Funktionen, dieonfocus zugewiesen wurden, Closures bilden; sie bestehen aus der Funktionsdefinition und der erfassten Umgebung aus dem Scope dersetupHelp-Funktion. Drei Closures wurden durch die Schleife erstellt, aber jedes teilt die gleiche einzelne lexikalische Umgebung, die eine Variable mit sich ändernden Werten (item) hat. Dies liegt daran, dass die Variableitem mitvar deklariert ist und daher aufgrund des Hoistings Funktions-Scope hat. Der Wert vonitem.help wird bestimmt, wenn dieonfocus-Rückrufe ausgeführt werden. Da die Schleife zu diesem Zeitpunkt bereits durchgelaufen ist, zeigt dasitem-Variablenobjekt (das von allen drei Closures geteilt wird) auf den letzten Eintrag in derhelpText-Liste.

Eine Lösung in diesem Fall besteht darin, mehr Closures zu verwenden: Insbesondere eine Funktionsfabrik, wie zuvor beschrieben:

<p>Helpful notes will appear here</p><p>Email: <input type="text" name="email" /></p><p>Name: <input type="text" name="name" /></p><p>Age: <input type="text" name="age" /></p>

function showHelp(help) {  document.getElementById("help").textContent = help;}function makeHelpCallback(help) {  return function () {    showHelp(help);  };}function setupHelp() {  var helpText = [    { id: "email", help: "Your email address" },    { id: "name", help: "Your full name" },    { id: "age", help: "Your age (you must be over 16)" },  ];  for (var i = 0; i < helpText.length; i++) {    var item = helpText[i];    document.getElementById(item.id).onfocus = makeHelpCallback(item.help);  }}setupHelp();

Dies funktioniert wie erwartet. Anstatt dass alle Rückrufe eine einzelne lexikalische Umgebung teilen, erstellt diemakeHelpCallback-Funktioneine neue lexikalische Umgebung für jeden Rückruf, in derhelp sich auf den entsprechenden String aus demhelpText-Array bezieht.

Eine andere Möglichkeit, das obige mit anonymen Closures zu schreiben, ist:

function showHelp(help) {  document.getElementById("help").textContent = help;}function setupHelp() {  var helpText = [    { id: "email", help: "Your email address" },    { id: "name", help: "Your full name" },    { id: "age", help: "Your age (you must be over 16)" },  ];  for (var i = 0; i < helpText.length; i++) {    (function () {      var item = helpText[i];      document.getElementById(item.id).onfocus = function () {        showHelp(item.help);      };    })(); // Immediate event listener attachment with the current value of item (preserved until iteration).  }}setupHelp();

Wenn Sie nicht mehr Closures verwenden möchten, können Sie daslet- oderconst-Schlüsselwort verwenden:

function showHelp(help) {  document.getElementById("help").textContent = help;}function setupHelp() {  const helpText = [    { id: "email", help: "Your email address" },    { id: "name", help: "Your full name" },    { id: "age", help: "Your age (you must be over 16)" },  ];  for (let i = 0; i < helpText.length; i++) {    const item = helpText[i];    document.getElementById(item.id).onfocus = () => {      showHelp(item.help);    };  }}setupHelp();

In diesem Beispiel wirdconst anstelle vonvar verwendet, sodass jedes Closure die block-gescopte Variable bindet, was bedeutet, dass keine zusätzlichen Closures erforderlich sind.

Wenn Sie ohnehin modernen JavaScript schreiben, können Sie weitere Alternativen zur einfachenfor-Schleife in Betracht ziehen, wie z. B. die Verwendung vonfor...of-Schleifen unditem alslet oderconst zu deklarieren oder dieforEach()-Methode zu verwenden, die beide das Closure-Problem vermeiden.

for (const item of helpText) {  document.getElementById(item.id).onfocus = () => {    document.getElementById("help").textContent = item.help;  };}helpText.forEach((item) => {  document.getElementById(item.id).onfocus = () => {    showHelp(item.help);  };});

Leistungsüberlegungen

Wie zuvor erwähnt, verwaltet jede Funktionsinstanz ihren eigenen Scope und ihr eigenes Closure. Daher ist es unklug, unnötig Funktionen innerhalb anderer Funktionen zu erstellen, wenn Closures für eine bestimmte Aufgabe nicht benötigt werden, da dies negative Auswirkungen auf die Skriptleistung sowohl in Bezug auf Verarbeitungsgeschwindigkeit als auch Speicherverbrauch haben wird.

Wenn Sie beispielsweise ein neues Objekt/eine neue Klasse erstellen, sollten Methoden normalerweise mit dem Prototyp des Objekts verknüpft werden, anstatt in den Objektkonstruktor definiert zu werden. Der Grund dafür ist, dass die Methoden jedes Mal, wenn der Konstruktor aufgerufen wird, neu zugewiesen würden (d.h. für jede Objekterstellung).

Betrachten Sie den folgenden Fall:

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

Da der vorherige Code in diesem speziellen Fall nicht die Vorteile der Verwendung von Closures nutzt, könnten wir ihn stattdessen umschreiben, um die Verwendung von Closures zu vermeiden:

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

Die Neudefinition des Prototyps wird jedoch nicht empfohlen. Im folgenden Beispiel wird dem vorhandenen Prototyp stattdessen etwas hinzugefügt:

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;};

In den beiden vorherigen Beispielen kann der geerbte Prototyp von allen Objekten gemeinsam genutzt werden und die Methodendefinitionen müssen nicht bei jeder Objekterstellung erfolgen. Weitere Informationen finden Sie unterVererbung und die Prototypkette.