Was zum Teufel ist ein Abschluss? (EINFACHE JS-DEFINITION)

Ich erinnere mich an mein erstes Vorstellungsgespräch, als der Interviewer mich bat, „Closure“ zu definieren. Es war ein Albtraum, weil ich den Fachbegriff nicht kannte. Aber tief in meinem Inneren hatte ich das Gefühl, dass ich verstand, was es bedeutete, auch wenn ich es nicht erklären konnte.

Nachdem das Interview zu Ende war (Spoiler: Ich wurde nicht ausgewählt), stürzte ich zu Google, um etwas über Schließungen zu lesen. Der erste Begriff, der mir begegnete, war Lexical Scoping = _What?

Keine Sorge, Lexical Scoping ist nur ein schicker Begriff für etwas Einfaches!

Also lasst uns eintauchen und es Schritt für Schritt verstehen.

Lexikalisches Scoping erklärt

Denken Sie an Ihr Haus. Stellen Sie sich vor, Sie sind in Ihrem Schlafzimmer und möchten die Schlafzimmerlampe einschalten. Sie können nur die Lampe einschalten, die sich in dem Raum befindet, in dem Sie sich gerade befinden. Dies ist Lexical Scoping: Sie können nur auf Dinge (wie die Lampe) zugreifen und diese ändern, die sich in Ihrem aktuellen Kontext befinden.

const bedroom = () => {
  let bedroomLamp = 'off'

  const turnOnBedroomLamp = () => {
    bedroomLamp = 'on'
  }

  const turnOffBedroomLamp = () => {
    bedroomLamp = 'off'
  }
}

Die Funktionen turnOnBedroomLamp und turnOffBedroomLamp sind im Schlafzimmerkontext vorhanden, sodass sie auf die Variable „bedroomLamp“ zugreifen und diese ändern können.

Stellen Sie sich nun vor, Sie stehen in der Küche und versuchen, die Schlafzimmerlampe auszuschalten. Dies funktioniert nicht, da Sie sich in einem anderen Kontext befinden und die Küche keinen Zugriff auf die Variable „bedroomLamp“ hat:

const kitchen = () => {
  const turnOnBedroomLamp = () => {
    bedroomLamp = 'on' // You can't do this!!
  }
}

Ganz einfach, oder?

Welche Beziehung besteht zwischen lexikalischem Scoping und Abschluss?

Jetzt gehen wir weiter. Stellen Sie sich vor, Ihr Haus verfügt über eine Fernbedienung, mit der Sie die Schlafzimmerlampe einschalten können, egal in welchem ​​Raum Sie sich befinden. Diese Fernbedienung „merkt“ sich die Schlafzimmerlampe, die sie steuert, auch wenn Sie sich in der Küche befinden.

Diese „Erinnerung“ ist das, was ein Abschluss ist!

Hier ist ein Beispiel im Code:

const bedroom = () => {
  let bedroomLamp = 'off'

  const turnOnBedroomLamp = () => {
    bedroomLamp = 'on'
  }

  return turnOnBedroomLamp // Returning the function
}

const remoteControl = bedroom() // Creating the closure
remoteControl() // Using the closure to turn on the bedroom lamp

In diesem Beispiel:

Die Schlafzimmerfunktion erstellt eine lokale Variable bedroomLamp und eine Funktion turnOnBedroomLamp.

turnOnBedroomLamp merkt sich den Kontext, in dem es erstellt wurde (die Schlafzimmerfunktion).

Wenn wir remoteControl (die zurückgegebene Funktion) aufrufen, hat es immer noch Zugriff auf die Variable „bedroomLamp“, auch wenn wir uns jetzt außerhalb der Funktion „schlafzimmer“ befinden.

Sehen Sie? Es ist eine sehr einfache Idee, es handelt sich einfach um Javascript, das sich Dinge merkt, sodass Sie sie an verschiedenen Orten auf unterschiedliche Weise verwenden können.

Lassen Sie uns nun in einem realen Codekontext sehen, wie wir den Abschluss heutzutage nutzen können. Der folgende Code erstellt eine Funktion zum Hinzufügen von Rabatten zu einem Produktwert.

const createDiscount = (discount) => {
  return (price) => price - price * discount
}

const tenPercentOff = createDiscount(0.1) // 10% off
const twentyPercentOff = createDiscount(0.2) // 20% off

// Using discount functions
console.log(tenPercentOff(100)) // returns 90
console.log(twentyPercentOff(200)) // returns 160

Jetzt sind Sie sich des Abschlusses bewusst und vorbereitet, wenn Sie in einem Vorstellungsgespräch nach der Definition gefragt werden. Weitere Inhalte finden Sie im Abschnitt „Referenzen“.

Referenzen

Schließung – MDN Web Docks

Schließung in JavaScript – GeeksForGeeks

Das obige ist der detaillierte Inhalt vonWas zum Teufel ist ein Abschluss? (EINFACHE JS-DEFINITION). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!