it-swarm.com.de

Was ist eine praktische Verwendung für einen Abschluss in JavaScript?

Ich bin versuchend am härtesten, meinen Kopf um JavaScript-Verschlüsse zu wickeln.

Ich bekomme das, indem ich eine innere Funktion zurückschicke, sie hat Zugriff auf alle Variablen, die in ihrem unmittelbaren übergeordneten Element definiert sind.

Wo wäre das für mich nützlich? Vielleicht habe ich mich noch nicht ganz damit beschäftigt. Die meisten Beispiele, die ich online gesehen habe enthalten keinen Code aus der realen Welt, nur vage Beispiele.

Kann mir jemand eine reale Verwendung eines Verschlusses zeigen?

Ist das zum Beispiel?

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();
237
alex

Ich habe Verschlüsse verwendet, um Folgendes zu tun:

a = (function () {
    var privatefunction = function () {
        alert('hello');
    }

    return {
        publicfunction : function () {
            privatefunction();
        }
    }
})();

Wie Sie dort sehen können, ist a jetzt ein Objekt mit einer Methode publicfunction (a.publicfunction()), die privatefunction aufruft, die nur innerhalb der Schließung existiert. Sie könnenNICHTprivatefunction direkt (d. H. a.privatefunction()) aufrufen, nur publicfunction().

Es ist ein minimales Beispiel, aber vielleicht können Sie die Verwendung sehen? Wir verwendeten dies, um öffentliche/private Methoden durchzusetzen.

201
Francisco Soto

Angenommen, Sie möchten zählen, wie oft der Benutzer auf eine Schaltfläche geklickt hat auf einer Webseite.
Dazu lösen Sie eine Funktion aufonclickevent der Schaltfläche aus, um die Anzahl der Variablen zu aktualisieren 

<button onclick="updateClickCount()">click me</button>  

Nun könnte es viele Ansätze geben wie:

1) Sie können eine globale Variable und eine Funktion verwenden, um den Zähler zu erhöhen:

var counter = 0;

function updateClickCount() {
    ++counter;
    // do something with counter
}

Aber die Gefahr ist, dass jedes Skript auf der Seite den Zähler ändern kann, ohne updateClickCount()aufzurufen. 


2) Vielleicht möchten Sie die Variable innerhalb der Funktion deklarieren:

function updateClickCount() {
    var counter = 0;
    ++counter;
    // do something with counter
}

Aber hey! Bei jedem Aufruf der updateClickCount()-Funktion wird der Zähler erneut auf 1 gesetzt.


3) Nachdenken über geschachtelte Funktionen

Verschachtelte Funktionen haben Zugriff auf den Bereich "darüber".
In diesem Beispiel hat die innere Funktion updateClickCount() Zugriff auf die Zählervariable in der übergeordneten Funktion countWrapper().

function countWrapper() {
    var counter = 0;
    function updateClickCount() {
    ++counter;
    // do something with counter
    }
    updateClickCount();    
    return counter; 
}

Das Gegen-Dilemma hätte gelöst werden können, wenn Sie die Funktion updateClickCount() von außen erreichen könnten und Sie müssen einen Weg finden, counter = 0 nur einmal und nicht immer auszuführen.


4) Schließung der Rettung! (selbstaufrufende Funktion)

 var updateClickCount=(function(){
    var counter=0;

    return function(){
     ++counter;
     // do something with counter
    }
})();

Die selbstaufrufende Funktion wird nur einmal ausgeführt. Sie setzt die Variable counter auf Null (0) und gibt einen Funktionsausdruck zurück.

Auf diese Weise wird updateClickCount zu einer Funktion. Der "wundervolle" Teil ist, dass er auf den Zähler im übergeordneten Bereich zugreifen kann.

Dies wird als JavaScript-Schließung bezeichnet. Dadurch kann eine Funktion "private" - Variablen haben.

Die Variable counter ist durch den Umfang der anonymen Funktion geschützt und kann nur mit der Add-Funktion geändert werden!

Lebhafteres Beispiel zum Abschluss:  

  <script>
    var updateClickCount=(function(){
    var counter=0;

    return function(){
    ++counter;
     document.getElementById("spnCount").innerHTML=counter;
    }
  })();
</script>

<html>
 <button onclick="updateClickCount()">click me</button>
  <div> you've clicked 
    <span id="spnCount"> 0 </span> times!
 </div>
</html>
115
JerryGoyal

Das Beispiel, das Sie geben, ist ein ausgezeichnetes. Verschlüsse sind ein Abstraktionsmechanismus, mit dem Sie Anliegen sehr sauber trennen können. In Ihrem Beispiel wird die Instrumentierung (Zählen von Aufrufen) von der Semantik (einer Fehlerberichts-API) getrennt. Andere Verwendungen umfassen:

  1. Übergeben von parametrisiertem Verhalten an einen Algorithmus (klassische Programmierung höherer Ordnung):

    function proximity_sort(arr, midpoint) {
        arr.sort(function(a, b) { a -= midpoint; b -= midpoint; return a*a - b*b; });
    }
    
  2. Objektorientierte Programmierung simulieren:

    function counter() {
        var a = 0;
        return {
            inc: function() { ++a; },
            dec: function() { --a; },
            get: function() { return a; },
            reset: function() { a = 0; }
        }
    }
    
  3. Implementierung einer exotischen Flusssteuerung, z. B. der Ereignisbehandlung von jQuery und der APIs AJAX.

62
Marcelo Cantos

Ja, das ist ein gutes Beispiel für eine nützliche Schließung. Der Aufruf von warnUser erstellt die Variable calledCount in ihrem Gültigkeitsbereich und gibt eine anonyme Funktion zurück, die in der Variablen warnForTamper gespeichert ist. Da es immer noch eine Schließung gibt, die die namedCount-Variable verwendet, wird sie beim Beenden der Funktion nicht gelöscht. Daher wird bei jedem Aufruf der warnForTamper() die Bereichsvariable erhöht und der Wert gewarnt.

Das häufigste Problem, das ich bei StackOverflow sehe, ist, dass jemand die Verwendung einer Variablen, die in jeder Schleife erhöht wird, "verzögern" möchte. Da die Variable jedoch einen bestimmten Bereich hat, wäre jede Referenz auf die Variable nach dem Ende der Schleife vorhanden Endzustand der Variablen:

for (var i = 0; i < someVar.length; i++)
    window.setTimeout(function () { 
        alert("Value of i was "+i+" when this timer was set" )
    }, 10000);

Dies würde dazu führen, dass jeder Alert den gleichen Wert von i zeigt. Dieser Wert wurde auf den Wert erhöht, zu dem die Schleife am Ende der Schleife erhöht wurde. Die Lösung besteht darin, einen neuen Abschluss zu erstellen, einen separaten Bereich für die Variable. Dies kann mit einer sofort ausgeführten anonymen Funktion geschehen, die die Variable empfängt und ihren Status als Argument speichert:

for (var i = 0; i < someVar.length; i++)
    (function (i) {
        window.setTimeout(function () { 
            alert("Value of i was "+i+" when this timer was set" )
        }, 10000);
    })(i); 
18
Andy E

Insbesondere in der JavaScript-Sprache (oder einer beliebigen ECMAScript-Sprache) sind Schließungen hilfreich, um die Implementierung von Funktionen zu verbergen und gleichzeitig die Schnittstelle sichtbar zu machen.

Stellen Sie sich zum Beispiel vor, Sie schreiben eine Klasse von Date-Utility-Methoden und möchten, dass Benutzer Wochentagsnamen nach Index suchen können. Sie möchten jedoch nicht, dass sie das Array von Namen ändern können, die Sie unter der Haube verwenden.

var dateUtil = {
  weekdayShort: (function() {
    var days = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
    return function(x) {
      if ((x != parseInt(x)) || (x < 1) || (x > 7)) {
        throw new Error("invalid weekday number");
      }
      return days[x - 1];
    };
  }())
};

Beachten Sie, dass das days-Array einfach als eine Eigenschaft des dateUtil-Objekts gespeichert werden kann. Dann ist es jedoch für Benutzer des Skripts sichtbar und sie können es sogar ändern, wenn Sie möchten, ohne dass Sie dazu den Quellcode benötigen. Da diese Funktion jedoch von der anonymen Funktion eingeschlossen wird, die die Datumssuchfunktion zurückgibt, kann sie nur von der Suchfunktion aufgerufen werden, sodass sie jetzt manipulationssicher ist.

13
maerics

Ich weiß, dass ich bei der Beantwortung dieser Frage sehr spät komme, aber es könnte jedem helfen, der noch nach der Antwort im Jahr 2018 sucht.

Javascript-Verschlüsse können verwendet werden, um die Funktionalität von drosseln und debouncein Ihrer Anwendung zu implementieren.

Throttling :

Durch die Throttling-Funktion wird die Anzahl der Aufrufe einer Funktion im Zeitverlauf begrenzt. Wie in "Ausführen dieser Funktion höchstens alle 100 Millisekunden".

Code: 

const throttle = (func, limit) => {
  let isThrottling
  return function() {
    const args = arguments
    const context = this
    if (!isThrottling) {
      func.apply(context, args)
      isThrottling = true
      setTimeout(() => isThrottling = false, limit)
    }
  }
}

Entprellung :

Durch das Entprellen wird der Funktionsbegrenzung eine Grenze gesetzt, die nicht erneut aufgerufen wird, bis eine bestimmte Zeit vergangen ist, ohne dass diese aufgerufen wird. Wie in "Diese Funktion nur ausführen, wenn 100 Millisekunden vergangen sind, ohne dass sie aufgerufen wurde."

Code:

const debounce = (func, delay) => {
  let debouncing
  return function() {
    const context = this
    const args = arguments
    clearTimeout(debouncing)
    debouncing = setTimeout(() => func.apply(context, args), delay)
  }
}

Wie Sie sehen, halfen Verschlüsse bei der Implementierung zweier schöner Funktionen, die jede Web-App für eine reibungslose Benutzeroberfläche benötigen sollte.

Ich hoffe es hilft jemandem.

8

Es gibt einen Abschnitt über Praktische Closures im Mozilla Developer Network .

6
alex

Eine weitere übliche Verwendung für Schließungen besteht darin, this in einer Methode an ein bestimmtes Objekt zu binden, sodass sie an anderer Stelle aufgerufen werden kann (z. B. als Ereignishandler).

function bind(obj, method) {
    if (typeof method == 'string') {
        method = obj[method];
    }
    return function () {
        method.apply(obj, arguments);
    }
}
...
document.body.addEventListener('mousemove', bind(watcher, 'follow'), true);

Wenn ein Mousemove-Ereignis ausgelöst wird, wird watcher.follow(evt) aufgerufen.

Verschlüsse sind auch ein wesentlicher Bestandteil von Funktionen höherer Ordnung, die das übliche Muster des Umschreibens mehrerer ähnlicher Funktionen als eine einzige Funktion höherer Ordnung durch Parametrieren der unterschiedlichen Teile ermöglichen. Als abstraktes Beispiel

foo_a = function (...) {A a B}
foo_b = function (...) {A b B}
foo_c = function (...) {A c B}

wird

fooer = function (x) {
    return function (...) {A x B}
}

dabei sind A und B keine syntaktischen Einheiten, sondern Quelltextzeichenfolgen (keine Zeichenfolgenliterale).

Ein konkretes Beispiel finden Sie unter " Rationalisieren meines Javascript mit einer Funktion ".

5
outis

Hier habe ich eine Begrüßung, die ich mehrmals sagen möchte. Wenn ich einen Abschluss erstelle, kann ich diese Funktion einfach aufrufen, um die Begrüßung aufzuzeichnen. Wenn ich den Abschluss nicht erstelle, muss ich meinen Namen jedes Mal weitergeben.

Ohne Schließung ( https://jsfiddle.net/lukeschlangen/pw61qrow/3/ ):

function greeting(firstName, lastName) {
  var message = "Hello " + firstName + " " + lastName + "!";
  console.log(message);
}

greeting("Billy", "Bob");
greeting("Billy", "Bob");
greeting("Billy", "Bob");
greeting("Luke", "Schlangen");
greeting("Luke", "Schlangen");
greeting("Luke", "Schlangen");

Mit einer Schließung ( https://jsfiddle.net/lukeschlangen/Lb5cfve9/3/ ):

function greeting(firstName, lastName) {
  var message = "Hello " + firstName + " " + lastName + "!";

  return function() {
    console.log(message);
  }
}

var greetingBilly = greeting("Billy", "Bob");
var greetingLuke = greeting("Luke", "Schlangen");

greetingBilly();
greetingBilly();
greetingBilly();
greetingLuke();
greetingLuke();
greetingLuke();
5
Luke Schlangen

Wenn Sie mit dem Konzept der Instanziierung einer Klasse im objektorientierten Sinne vertraut sind (d. H. Zum Erstellen eines Objekts dieser Klasse), sind Sie dem Verständnis von Schließungen nahe. 

Stellen Sie sich das so vor: Wenn Sie zwei Personenobjekte instanziieren, wissen Sie, dass die Klassenmitgliedervariable "Name" nicht zwischen Instanzen geteilt wird. Jedes Objekt hat eine eigene 'Kopie'. Wenn Sie eine Schließung erstellen, ist die free-Variable (in Ihrem Beispiel oben'ountCount ') gleichermaßen an die' Instanz 'der Funktion gebunden. 

Ich denke, Ihr konzeptioneller Sprung wird ein wenig behindert durch die Tatsache, dass jede Funktion/Schließung, die von der warnUser-Funktion zurückgegeben wird (abgesehen von:/eine Funktion - Funktion höherer Ordnung ), die "calledCount" mit demselben Anfangswert (0) bindet, während Beim Erstellen von Schließungen ist es oft sinnvoller, verschiedene Initialisierer in die Funktion höherer Ordnung zu übergeben, ähnlich wie das Übergeben verschiedener Werte an den Konstruktor einer Klasse.

Nehmen Sie an, wenn "calledCount" einen bestimmten Wert erreicht, möchten Sie die Benutzersitzung beenden. Sie möchten möglicherweise unterschiedliche Werte dafür, je nachdem, ob die Anforderung vom lokalen Netzwerk oder vom großen, schlechten Internet stammt (ja, es handelt sich um ein erfundenes Beispiel). Um dies zu erreichen, können Sie unterschiedliche Anfangswerte für angerufeneCount an warnUser übergeben (d. H. -3 oder 0?).

Ein Teil des Problems in der Literatur ist die Nomenklatur, mit der sie beschrieben werden ("lexikalischer Umfang", "freie Variablen"). Lassen Sie sich nicht täuschen, Verschlüsse sind einfacher als es scheint ... prima facie ;-)

4
EdwardGarson

Ich habe hier ein einfaches Beispiel für ein Abschlusskonzept, das wir in unserer E-Commerce-Site oder in vielen anderen Bereichen verwenden können .. Ich füge meinen Link zu jsfiddle dem Beispiel hinzu Artikel und einen Warenkorb.

Jsfiddle

//Counter clouser implemented function;
var CartCouter = function(){
	var counter = 0;
  function changeCounter(val){
  	counter += val
  }
  return {
  	increment: function(){
    	changeCounter(1);
    },
    decrement: function(){
    changeCounter(-1);
    },
    value: function(){
    return counter;
    }
  }
}

var cartCount = CartCouter();
function updateCart(){
	document.getElementById('cartcount').innerHTML = cartCount.value();
  }

var productlist = document.getElementsByClassName('item');
for(var i = 0; i< productlist.length; i++){
	productlist[i].addEventListener('click',function(){
  	if(this.className.indexOf('selected')<0){
    		this.className += " selected";
        cartCount.increment();
        updateCart();
    } else{
    	this.className = this.className.replace("selected", "");
      cartCount.decrement();
      updateCart();
    }
  })
}
.productslist{
  padding:10px;
}
ul li{
  display: inline-block;
  padding: 5px;
  border: 1px solid #ddd;
  text-align: center;
  width: 25%;
  cursor: pointer;
}
.selected{
  background-color: #7CFEF0;
  color: #333;
}
.cartdiv{
  position: relative;
  float:right;
  padding: 5px;
  box-sizing: border-box;
  border: 1px solid #f1f1f1;
}
<div>
<h3>
Practical Use of JavaScript Closure consept/private variable.
</h3>
<div class="cartdiv">
    <span id="cartcount">0</span>
</div>
<div class="productslist">
    <ul >
    <li class="item">Product 1</li>
     <li class="item">Product 2</li>
     <li class="item">Product 3</li>
    </ul>

</div>
</div>

2
Abhilash

Das JavaScript-Modulmuster verwendet Verschlüsse. Sein schönes Muster erlaubt Ihnen, etwas "öffentliches" und "privates" 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 );

    }
  };

})();
1

Ich habe vor einiger Zeit einen Artikel darüber geschrieben, wie Verschlüsse verwendet werden können, um Code für die Ereignisbehandlung zu vereinfachen. Es vergleicht die ASP.NET-Ereignisbehandlung mit der clientseitigen jQuery.

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

1
stusmith

Ich mag Mozillas Funktionsfabrik Beispiel .

function makeAdder(x) {

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

var addFive = makeAdder(5);

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

Im angegebenen Beispiel ist der Wert der eingeschlossenen Variablen 'counter' geschützt und kann nur mit den angegebenen Funktionen (Inkrement, Dekrement) geändert werden. weil es in einer Schließung ist,

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

0
ShAkKiR

Ein Großteil des Codes, den wir in Front-End-JavaScript schreiben, ist ereignisbasiert. Wir definieren ein Verhalten und hängen es an ein Ereignis an, das vom Benutzer ausgelöst wird (z. B. ein Klick oder ein Tastendruck). Unser Code wird im Allgemeinen als Rückruf angehängt: eine einzelne Funktion, die als Reaktion auf das Ereignis ausgeführt wird. size12, size14 und size16 sind jetzt Funktionen, die die Größe des Haupttextes auf 12, 14 bzw. 16 Pixel ändern. Wir können sie an Buttons (in diesem Fall Links) wie folgt 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

0
Usman

Dieser Thread hat mir sehr geholfen, ein besseres Verständnis der Funktionsweise von Schließungen zu erlangen. Ich habe seitdem selbst ein wenig experimentiert und diesen ziemlich einfachen Code entwickelt, der einigen anderen dabei helfen kann, zu verstehen, wie Verschlüsse auf praktische Weise verwendet werden können und wie der Verschluß auf verschiedenen Ebenen verwendet werden kann, um statische Variablen und Variablen ähnlich zu halten/oder globale Variablen ohne Gefahr, dass sie überschrieben oder mit globalen Variablen verwechselt werden. Was dabei geschieht, ist das Verfolgen der Schaltflächenklicks, sowohl auf lokaler Ebene für jede einzelne Schaltfläche als auch auf globaler Ebene, wobei jedes Klicken gezählt wird, was zu einer einzelnen Zahl beiträgt. Hinweis: Ich habe dazu keine globalen Variablen verwendet. Dies ist eine Art Punkt der Übung - es gibt einen Handler, der auf jede Schaltfläche angewendet werden kann, die auch zu etwas globalem beiträgt.

Bitte Experten, lassen Sie mich wissen, ob ich hier schlechte Praktiken begangen habe! Ich lerne das Zeug immer noch selbst. 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Closures on button presses</title>
<script type="text/javascript">

window.addEventListener("load" , function () {
    /*
    grab the function from the first closure,
    and assign to a temporary variable 
    this will set the totalButtonCount variable
    that is used to count the total of all button clicks

    */
    var buttonHandler = buttonsCount(); 

    /*
    using the result from the first closure (a function is returned) 
    assign and run the sub closure that carries the 
    individual variable for button count and assign to the click handlers 
    */
    document.getElementById("button1").addEventListener("click" , buttonHandler() );
    document.getElementById("button2").addEventListener("click" , buttonHandler() );
    document.getElementById("button3").addEventListener("click" , buttonHandler() );

    // Now that buttonHandler has served its purpose it can be deleted if needs be
    buttonHandler = null;
});



function buttonsCount() {
    /* 
        First closure level 
        - totalButtonCount acts as a sort of global counter to count any button presses
    */
    var totalButtonCount = 0;

    return  function () {
        //second closure level
        var myButtonCount = 0;

        return function (event) {
            //actual function that is called on the button click
            event.preventDefault();
            /*  
               increment the button counts.
               myButtonCount only exists in the scope that is 
               applied to each event handler, therefore acts 
               to count each button individually whereas because 
               of the first closure totalButtonCount exists at 
               the scope just outside, so maintains a sort 
               of static or global variable state 
            */

            totalButtonCount++;
            myButtonCount++;

            /* 
                do something with the values ... fairly pointless 
                but it shows that each button contributes to both 
                it's own variable and the outer variable in the 
                first closure 
            */
            console.log("Total button clicks: "+totalButtonCount);
            console.log("This button count: "+myButtonCount);
        }
    }
}

</script>
</head>

<body>
    <a href="#" id="button1">Button 1</a>
    <a href="#" id="button2">Button 2</a>
    <a href="#" id="button3">Button 3</a>
</body>
</html>
0
Darren Crabb

Referenz: Praktische Verwendung von Verschlüssen

In der Praxis können Schließungen elegante Designs erzeugen, die die Anpassung verschiedener Berechnungen, verzögerter Anrufe, Rückrufe, Erstellen gekapselter Bereiche usw. ermöglichen.

Ein Beispiel für die Sortiermethode von Arrays, die die Sortierbedingungsfunktion als Argument akzeptiert:

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

Mapping von Funktionalen als Kartenmethode von Arrays, die ein neues Array anhand der Bedingung des funktionalen Arguments abbilden:

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

Oft ist es praktisch, Suchfunktionen mit funktionalen Argumenten zu implementieren, die nahezu unbegrenzte Bedingungen für die Suche definieren:

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

Wir können auch beachten, dass das Anwenden von Funktionalen beispielsweise eine forEach-Methode ist, 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]);

Verschobene Anrufe: 

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

Rückruffunktionen:

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 zum Ausblenden von Hilfsobjekten:

var foo = {};
(function (object) {
  var x = 10;
  object.getX = function _getX() {
    return x;
  };
})(foo);
alert(foo.getX());// get closured "x" – 10
0
Damodaran

Closures sind eine nützliche Methode zum Erstellen von Generatoren , wobei die Sequenz bei Bedarf erhöht 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 werden wie folgt zusammengefasst:

 Anonyme Funktionen Definierte Funktionen 

 Kann nicht als Methode verwendet werden. Kann als Methode eines Objekts verwendet werden 

 Existiert nur in dem Bereich, in dem sie definiert ist. Existiert innerhalb des Objekts, in dem sie sich befindet definiert in 

 Kann nur in dem Bereich aufgerufen werden, in dem es definiert ist. Kann an jeder Stelle im Code aufgerufen werden 

 Kann einen neuen Wert zugewiesen oder gelöscht werden. Kann nicht gelöscht oder geändert werden 

Verweise

0
Paul Sweatte

Verwendung von Verschlüssen:

Verschlüsse sind eine der mächtigsten Funktionen von JavaScript. JavaScript ermöglicht das Verschachteln von Funktionen und gewährt der inneren Funktion uneingeschränkten Zugriff auf alle innerhalb der äußeren Funktion definierten Variablen und Funktionen (und auf alle anderen Variablen und Funktionen, auf die die äußere Funktion Zugriff hat). Die äußere Funktion hat jedoch keinen Zugriff auf die in der inneren Funktion definierten Variablen und Funktionen. Dies bietet eine Art Sicherheit für die Variablen der inneren Funktion. Da die innere Funktion Zugriff auf den Umfang der äußeren Funktion hat, leben die in der äußeren Funktion definierten Variablen und Funktionen länger als die äußere Funktion selbst, wenn die innere Funktion über die Lebensdauer der äußeren Funktion hinaus überleben kann. Ein Abschluss wird erstellt, wenn die innere Funktion irgendwie für jeden Bereich außerhalb der äußeren Funktion verfügbar gemacht wird.

Beispiel:

<script>
var createPet = function(name) {
  var sex;

  return {
    setName: function(newName) {
      name = newName;
    },

    getName: function() {
      return name;
    },

    getSex: function() {
      return sex;
    },

    setSex: function(newSex) {
      if(typeof newSex == "string" && (newSex.toLowerCase() == "male" || newSex.toLowerCase() == "female")) {
        sex = newSex;
      }
    }
  }
}

var pet = createPet("Vivie");
console.log(pet.getName());                  // Vivie

console.log(pet.setName("Oliver"));   
console.log(pet.setSex("male"));
console.log(pet.getSex());                   // male
console.log(pet.getName());                  // Oliver
</script>

Im obigen Code ist die Namensvariable der äußeren Funktion für die inneren Funktionen zugänglich, und es gibt keine andere Möglichkeit, auf die inneren Variablen zuzugreifen, außer durch die inneren Funktionen. Die inneren Variablen der inneren Funktion dienen als sichere Speicherung für die inneren Funktionen. Sie halten "persistente" und dennoch sichere Daten für die inneren Funktionen, mit denen sie arbeiten können. Die Funktionen müssen nicht einmal einer Variablen zugewiesen werden oder haben einen Namen . Read here für Details

0
Sunny S.M