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