Was ist eine praktische Anwendung für eine Schließung in JavaScript?

Question

Ich bin Versuch Ich tue mich schwer damit, JavaScript-Schließungen zu verstehen.

Ich verstehe, dass durch die Rückgabe einer inneren Funktion, wird es Zugriff auf jede Variable in seiner unmittelbaren Eltern definiert haben.

Wo wäre dies für mich von Nutzen? Vielleicht habe ich es noch nicht ganz begriffen. Die meisten der Beispiele, die ich online gesehen habe bieten keinen realen Code, sondern nur vage Beispiele.

Kann mir jemand zeigen, wie ein Verschluss in der Praxis eingesetzt wird?

Ist dies zum Beispiel eine?

var warnUser = function (msg) {
    var calledCount = 0;
    return function() {
       calledCount++;
       alert(msg + '\nYou have been warned ' + calledCount + ' times.');
    };
};

var warnForTamper = warnUser('You can not tamper with our HTML.');
warnForTamper();
warnForTamper();

Answer 1

Referenz: Praktische Verwendung von Verschlüssen

In der Praxis lassen sich mit Closures elegante Entwürfe erstellen, die die Anpassung verschiedener Berechnungen, zeitversetzte Aufrufe, Rückrufe, die Erstellung gekapselter Bereiche usw. ermöglichen.

Ein Beispiel ist die Sortiermethode von Arrays, die die Sortierbedingungsfunktion als Argument akzeptiert:

[1, 2, 3].sort(function (a, b) {
    ... // Sort conditions
});

Mapping-Funktionale wie die Map-Methode von Arrays, die ein neues Array durch die Bedingung des funktionalen Arguments abbildet:

[1, 2, 3].map(function (element) {
    return element * 2;
}); // [2, 4, 6]

Oft ist es zweckmäßig, Suchfunktionen mit funktionalen Argumenten zu implementieren, die nahezu unbegrenzte Bedingungen für die Suche festlegen:

someCollection.find(function (element) {
    return element.someProperty == 'searchCondition';
});

Außerdem können wir die Anwendung von Funktionalitäten beachten, z. B. eine forEach-Methode, die eine Funktion auf ein Array von Elementen anwendet:

[1, 2, 3].forEach(function (element) {
    if (element % 2 != 0) {
        alert(element);
    }
}); // 1, 3

Eine Funktion wird auf Argumente angewendet (auf eine Liste von Argumenten - in apply, und auf positionierte Argumente - in call):

(function () {
    alert([].join.call(arguments, ';')); // 1;2;3
}).apply(this, [1, 2, 3]);

Aufgeschobene Anrufe:

var a = 10;
setTimeout(function () {
    alert(a); // 10, after one second
}, 1000);

Rückruf-Funktionen:

var x = 10;
// Only for example
xmlHttpRequestObject.onreadystatechange = function () {
    // Callback, which will be called deferral ,
    // when data will be ready;
    // variable "x" here is available,
    // regardless that context in which,
    // it was created already finished
    alert(x); // 10
};

Erstellung eines gekapselten Bereichs, um Hilfsobjekte zu verstecken:

var foo = {};
(function (object) {
    var x = 10;
    object.getX = function _getX() {
        return x;
    };
})(foo);

alert(foo.getX()); // Get closured "x" – 10

Answer 2

Verschlüsse sind eine nützliche Methode zur Erstellung von Stromerzeuger eine Folge, die bei Bedarf inkrementiert wird:

    var foobar = function(i){var count = count || i; return function(){return ++count;}}

    baz = foobar(1);
    console.log("first call: " + baz()); //2
    console.log("second call: " + baz()); //3

Die Unterschiede lassen sich wie folgt zusammenfassen:

Anonymous functions                                    Defined functions

Cannot be used as a method                             Can be used as a method of an object

Exists only in the scope in which it is defined        Exists within the object it is defined in

Can only be called in the scope in which it is defined Can be called at any point in the code

Can be reassigned a new value or deleted               Cannot be deleted or changed

Referenzen

• AS3-Grundlagen: Funktionen

Answer 3

Ich versuche, Closures zu lernen, und ich denke, das von mir erstellte Beispiel ist ein praktischer Anwendungsfall. Sie können ein Snippet ausführen und das Ergebnis in der Konsole sehen.

Wir haben zwei getrennte Benutzer, die über getrennte Daten verfügen. Jeder von ihnen kann den aktuellen Status sehen und ihn aktualisieren.

function createUserWarningData(user) {
  const data = {
    name: user,
    numberOfWarnings: 0,
  };

  function addWarning() {
    data.numberOfWarnings = data.numberOfWarnings + 1;
  }

  function getUserData() {
    console.log(data);
    return data;
  }

  return {
    getUserData: getUserData,
    addWarning: addWarning,
  };
}

const user1 = createUserWarningData("Thomas");
const user2 = createUserWarningData("Alex");

//USER 1
user1.getUserData(); // Returning data user object
user1.addWarning(); // Add one warning to specific user
user1.getUserData(); // Returning data user object

//USER2
user2.getUserData(); // Returning data user object
user2.addWarning(); // Add one warning to specific user
user2.addWarning(); // Add one warning to specific user
user2.getUserData(); // Returning data user object