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

Das JavaScript-Modulmuster verwendet Schließungen. Das schöne Muster ermöglicht es Ihnen, so etwas wie "öffentliche" und "private" Variablen zu haben.

var myNamespace = (function () {

  var myPrivateVar, myPrivateMethod;

  // A private counter variable
  myPrivateVar = 0;

  // A private function which logs any arguments
  myPrivateMethod = function(foo) {
      console.log(foo);
  };

  return {

    // A public variable
    myPublicVar: "foo",

    // A public function utilizing privates
    myPublicFunction: function(bar) {

      // Increment our private counter
      myPrivateVar++;

      // Call our private method using bar
      myPrivateMethod(bar);
    }
  };

})();

Answer 2

Ich mag Mozillas Beispiel einer Funktionsfabrik .

function makeAdder(x) {

    return function(y) {
        return x + y;
    };
}

var addFive = makeAdder(5);

console.assert(addFive(2) === 7);
console.assert(addFive(-5) === 0);

Answer 3

Ich habe vor einiger Zeit einen Artikel darüber geschrieben, wie Closures verwendet werden können, um den Code für die Ereignisbehandlung zu vereinfachen. Er vergleicht die ASP.NET-Ereignisbehandlung mit clientseitigem jQuery.

http://www.hackification.com/2009/02/20/closures-simplify-event-handling-code/

Answer 4

Ein Großteil des Codes, den wir in Front-End-JavaScript schreiben, ist ereignisbasiert - wir definieren ein bestimmtes Verhalten und fügen es dann an ein Ereignis an, das vom Benutzer ausgelöst wird (z. B. ein Klick oder ein Tastendruck). Unser Code wird im Allgemeinen als Callback angehängt: eine einzelne Funktion, die als Reaktion auf das Ereignis ausgeführt wird. size12, size14 und size16 sind nun Funktionen, die die Größe des Textes auf 12, 14 bzw. 16 Pixel ändern. Wir können sie wie folgt an Schaltflächen (in diesem Fall Links) anhängen:

function makeSizer(size) {
    return function() {
    document.body.style.fontSize = size + 'px';
    };
}

var size12 = makeSizer(12);
var size14 = makeSizer(14);
var size16 = makeSizer(16);

document.getElementById('size-12').onclick = size12;
document.getElementById('size-14').onclick = size14;
document.getElementById('size-16').onclick = size16;

Fiddle

Answer 5

In dem angegebenen Beispiel ist der Wert der eingeschlossenen Variablen "counter" geschützt und kann nur mit den angegebenen Funktionen (increment, decrement) geändert werden. Denn sie befindet sich in einer Schließung,

var MyCounter = function (){
    var counter = 0;
    return {
        increment:function () {return counter += 1;},
        decrement:function () {return counter -= 1;},
        get:function () {return counter;}
    };
};

var x = MyCounter();
// Or
var y = MyCounter();

alert(x.get()); // 0
alert(x.increment()); // 1
alert(x.increment()); // 2

alert(y.increment()); // 1
alert(x.get()); // x is still 2