Welche Regeln gelten für den Kontext in JavaScript-Funktionen?

Inhaltsverzeichnis

1. Regel 1: Objekt.Methode()

1.1 Fall 1
1.2 Fall 2
1.3 Fall 3
1.4 Fall 4

2. Regel 2: Funktion()

2.1 Fall 1
2.2 Fall 2

3. Regel 3: Array-Index

3.1 Fall 1
3.2 Fall 2

4. Regel 4: IIFE

4.1 Fall 1

5. Regel 5: Timer und Verzögerungen

5.1 Fall 1
5.2 Fall 2

6. Regel 6: Ereignisbehandlungsfunktion

6.1 Fall 1
6.2 Fall 2

1. Regel 1: Objekt.Methode()

對象.方法()
Wenn ein Objekt mit einem Punkt versehen ist und seine Methodenfunktion aufgerufen wird, ist der Kontext der Funktion das mit einem Punkt versehene Objekt.

1.1 Fall 1

Funktion fn() {
    Konsole.log(dies.a + dies.b);
}
var obj = {
    eine: 66,
    b: 33,
    fn: fn
}
obj.fn();

Ausgabe:

99

1.2 Fall 2

var obj1 = {
    eine: 66,
    b: 33,
    fn: Funktion () {
        Konsole.log(dies.a + dies.b);
    }
}
var obj2 = {
    eine: 66,
    b: 33,
    fn: obj1.fn
}
obj2.fn();

Ausgabe:

7

1.3 Fall 3

Funktion outer() {
    var a = 11;
    var b = 22;
    zurückkehren {
        eine: 33,
        b: 44,
        fn: Funktion () {
            konsole.log(dies.a + dies.b);
        }
    }
}
äußere.fn();

Ausgabe:

77

1.4 Fall 4

Funktion Spaß() {
    konsole.log(dies.a + dies.b);
}
var obj = {
    a: 1, b: 2, c: [{ a: 3, b: 4, c: Spaß }]
};
var a = 5;
obj.c[0].c();

Ausgabe:

7

2. Regel 2: Funktion()

函數()
Klammern rufen die Funktion direkt auf und der Kontext der Funktion ist das Fensterobjekt.

2.1 Fall 1

var obj1 = {
    a: 1, b: 2, fn: Funktion () {
        konsole.log(dies.a + dies.b);
    }
}
var a = 3;
var b = 4;
var fn = obj1.fn;
fn();

Ausgabe:

7

2.2 Fall 2

Funktion Spaß() {
    gib dies.a + dies.b zurück;
}
var a = 1;
var b = 2;
var obj = {
    eine: 3, 
    b: fun(), // Regel 2 anwenden
     Spaß: Spaß
}
var result = obj.fun(); // Regel 1 gilt
console.log(Ergebnis);

Ausgabe:

6

3. Regel 3: Array-Index

數組下標
Ein Array (array-ähnliches Objekt) listet Funktionen zum Aufruf auf, und der Kontext ist dieses Array (array-ähnliches Objekt).

3.1 Fall 1

var arr = ['A', 'B', 'C', Funktion () {
    konsole.log(dies[0]);
}];
arr[3]();

Ausgabe:

A

3.2 Fall 2

Funktion Spaß() {
    Argumente[3]();
}
Spaß('A', 'B', 'C', Funktion () {
    konsole.log(dies[1]);
});

Ausgabe:

B

4. Regel 4: IIFE

(function(){})();
Der Kontext einer Funktion in einer IIFE (Immediately Executable Function) ist das Fensterobjekt.

4.1 Fall 1

var a = 1;
var obj = {
    eine: 2,
    Spaß: (Funktion () {
        var a = this.a; // Regel 1 gilt
        return function () { // Regel 4 gilt
            konsole.log(a + dies.a); // 2+1
        }
    })()
};
obj.spaß();

Ausgabe:

3

5. Regel 5: Timer und Verzögerungen

setInterval(函數,時間);
setTimeout(函數,時間);
Die Timer- und Verzögerungsaufruffunktion verwendet das Fensterobjekt als Kontext.

5.1 Fall 1

var obj = {
    a: 1, b: 2, Spaß: Funktion () {
        konsole.log(dies.a + dies.b);
    }
}
var a = 3;
var b = 4;
setTimeout(obj.fun, 2000); // Regel 5 gilt

Ausgabe:

7

5.2 Fall 2

var obj = {
    a: 1, b: 2, Spaß: Funktion () {
        konsole.log(dies.a + dies.b);
    }
}
var a = 3;
var b = 4;
setzeTimeout(Funktion () {
	obj.fun(); //Regel 1 anwenden
}, 2000);

Ausgabe:

3

6. Regel 6: Ereignisbehandlungsfunktion

DOM元素.onclick = function(){};
Der Kontext eines Ereignishandlers ist das DOM-Element, an das das Ereignis angehängt wurde.

6.1 Fall 1

Bitte erzielen Sie den Effekt: Das angeklickte Kästchen wird rot, und um dies zu erreichen, muss dieselbe Ereignisbehandlungsfunktion verwendet werden.

<!DOCTYPE html>
<html lang="de">

<Kopf>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-kompatibel" content="IE=edge">
    <title>Regel 6: Ereignisbehandlungsfunktion</title>
    <Stil>
        * {
            Rand: 0;
            Polsterung: 0;
        }

        Körper div {
            schweben: links;
            Breite: 100px;
            Höhe: 100px;
            Rand rechts: 10px;
            Rand: 1px durchgezogen #000;
        }
    </Stil>
</Kopf>

<Text>
    <div id="box1">1</div>
    <div id="box2">2</div>
    <div id="box3">3</div>
    <Skript>
        Funktion Farbe ändern() {
            dieser.Stil.Hintergrundfarbe = "rot";
        }
        var box1 = document.getElementById('box1');
        var box2 = document.getElementById('box2');
        var box3 = document.getElementById('box3');
        box1.onclick = Farbe ändern;
        box2.onclick = Farbe ändern;
        box3.onclick = Farbe ändern;
    </Skript>
</body>

</html>

Ergebnis:

Bildbeschreibung hier einfügen

6.2 Fall 2

Um den Effekt zu erzielen, klicken Sie auf ein Kästchen und das Kästchen wird nach 2000 Millisekunden rot. Um dies zu erreichen, ist dieselbe Ereignisbehandlungsfunktion erforderlich.

Unterschied zu Fall 1: Es wird ein Backup-Kontext benötigt.

Funktion Farbe ändern() {
    var self = this; // Sicherungskontext setTimeout(function () {
        self.style.backgroundColor = "rot";
    }, 2000);
}
var box1 = document.getElementById('box1');
var box2 = document.getElementById('box2');
var box3 = document.getElementById('box3');
box1.onclick = Farbe ändern;
box2.onclick = Farbe ändern;
box3.onclick = Farbe ändern;

Dies ist das Ende dieses Artikels über die Kontextregeln in JavaScript-Funktionen. Weitere Informationen zu Kontextregeln für JavaScript-Funktionen finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!

Das könnte Sie auch interessieren:

Erläuterung der JavaScript-Funktionssyntax
Grundlagen der funktionalen Programmierung in JavaScript
JavaScript-Grundlagenreihe: Funktionen und Methoden
Detaillierte Erklärung der Unterschiede zwischen var, let und const in JavaScript es6

<<: Detaillierte Erklärung zur Verwendung von Tomcat Native zur Verbesserung der Tomcat IO-Effizienz

>>: HTML-Tutorial: Horizontales Liniensegment in HTML

Ein genauerer Blick auf SQL-Injection

Artikel

Lösen Sie das Problem des Startfehlers von PHPStudy MySQL unter Windows

Artikel

Detaillierte Erläuterung der Animationsmethode „Animate“ von jQuery und der Lösung für das Problem der Animationswarteschlange

Artikel

Wo wird der von IntelliJ IDEA mit Tomcat bereitgestellte Projektspeicherort verwendet?

Inhaltsverzeichnis

1. Regel 1: Objekt.Methode()

1.1 Fall 1

1.2 Fall 2

1.3 Fall 3

1.4 Fall 4

2. Regel 2: Funktion()

2.1 Fall 1

2.2 Fall 2

3. Regel 3: Array-Index

3.1 Fall 1

3.2 Fall 2

4. Regel 4: IIFE

4.1 Fall 1

5. Regel 5: Timer und Verzögerungen

5.1 Fall 1

5.2 Fall 2

6. Regel 6: Ereignisbehandlungsfunktion

6.1 Fall 1

6.2 Fall 2

Artikel empfehlen