Einführung in JavaScript-Bereiche und -Abschlüsse

Kostenlose Lernempfehlung:

Javascript-Video-Tutorial Es gibt viele Probleme. Heute werde ich einen Überblick über Umfang und Abschluss geben.

ScopeScope ist hauptsächlich in globalen Bereich und lokalen Bereich unterteilt, während der lokale Bereich in Funktionsbereich und Blockebene-Bereich unterteilt ist. Globaler Gültigkeitsbereich

Wenn Sie eine Variable außerhalb der geschweiften Klammern ({}) oder eine Funktion definieren, handelt es sich um eine globale Variable und ihr Gültigkeitsbereich ist der globale Gültigkeitsbereich.

let a = 1function fun1 () {
	console.log(a) // 结果：1
	function fun2 () {
		console.log(a) // 结果：1
	}
	fun2()}fun1()console.log(a) // 结果：1

Variable a ist in der äußersten Ebene definiert und kann überall auf der Welt verwendet werden.

Es ist erwähnenswert, dass im gleichen Ebenenbereich bei Verwendung von let oder const zum Deklarieren einer Variablen mit demselben Namen ein Fehler für die zweite Variable gemeldet wird und bei Verwendung von var zum Deklarieren einer Variablen die vorherige Variable angezeigt wird überschrieben;

Lokaler Gültigkeitsbereich

Wenn Sie eine Variable innerhalb einer Funktion oder in geschweiften Klammern ({}) definieren, handelt es sich um eine Variable mit lokalem Gültigkeitsbereich und sie kann in jedem niedrigeren Gültigkeitsbereich dieser Gültigkeitsebene verwendet werden.

function fun1() {
    let a = 100
    console.log(a) // 结果: 100
    function fun2 () {
		console.log(a) // 结果：100
	}
	fun2()}fun1()console.log(a) // 结果: a is not defined

a kann nur innerhalb der fun1-Funktion einschließlich interner Funktionen verwendet werden. Sobald sie den Gültigkeitsbereich von fun1 verlässt, kann die Variable nicht mehr verwendet werden.

Suche nach freien Variablen

Eine Variable, die im aktuellen Bereich nicht definiert ist, aber verwendet wird, ist eine freie Variable. Was sind seine Ausführungsregeln?
Die Suche nach freien Variablen erfolgt im oberen Bereich Schicht für Schicht, bis sie gefunden wird. Wenn kein globaler Bereich gefunden wird, wird der Fehler „xx ist nicht definiert“ gemeldet.

let a = 100function fun1 () {
    let a1 = 2

    function fun2 () {
        let a2 = 3
        let a = 0

        function fun3 () {
            let a3 = 4
            a++
            console.log(a + a1 + a2 + a3) // 结果: 10
        }

        fun3()
    }

    fun2()}fun1()console.log(a) // 结果: 100

Wie im obigen Code gezeigt, sind in der fun3-Funktion a, a1 und a2 nicht definiert, aber sie werden verwendet. Bei der Ausführung wird im oberen Bereich nach ihren Werten gesucht. Es ist erwähnenswert, dass wir a sowohl im globalen Bereich als auch in der Funktion von fun2 definiert haben, aber der in fun2 definierte Wert, der in fun3 verwendet wird, ist der Wert des außerhalb des globalen Bereichs verwendeten Werts, d. h. er geht an Wenn der Vorgesetzte sucht , stoppt die Suche, sobald sie gefunden wurde, und verwendet die nächstgelegene. Die Bereiche stören sich nicht gegenseitig. (In meinem anderen Blog finden Sie eine spezielle Zusammenfassung der darin vorhandenen Variablen- und Funktionsförderung.)

Schließung

Schließung ist ein Sonderfall der Geltungsbereichsanwendung und weist hauptsächlich zwei Erscheinungsformen auf: (1) Funktionen werden als Parameter übergeben. (2) Die Funktion wird als Rückgabewert zurückgegeben.

/**
 * 函数作为返回值
 */function create () {
    const a1 = 100
    return function () {
        console.log(a1)
    }}const fn = create()const a1 = 200fn() // 结果: 100/**
 * 函数作为参数
 */function print (fn) {
    const a2 = 300
    fn()}const a2 = 400function fn1 () {
    console.log(a2)}print(fn1) // 结果: 400

Der obige Code zeigt zwei Ausführungen der Funktion. Es ist erwähnenswert, dass die Suche nach freien Variablen an der Stelle erfolgt, an der die Funktion definiert ist, und dass die Suche im übergeordneten Bereich erfolgt, nicht im Ort der Hinrichtung!

Praktische Anwendungsszenarien von Schließungen

(1) Ausblenden von Daten, z. B. Erstellen eines einfachen Cache-Tools

(2) Anti-Shake- und Throttling-Funktion

Verwandte kostenlose Lernempfehlungen:

Javascript

(Video)

Das obige ist der detaillierte Inhalt vonEinführung in JavaScript-Bereiche und -Abschlüsse. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!