Vertiefendes Verständnis des Umfangs dieser Javascript_Javascript-Kenntnisse

Jeder ist bei der Verwendung von Javascript oft von diesem Kerl verwirrt. Für die meisten Entwickler mit Erfahrung in der OOP-Entwicklung ist dies ein Bezeichner, der sich auf gewöhnliche Elemente im aktuellen Bereich bezieht. In Javascript erscheint er jedoch seltsam, da er nicht festgelegt ist, sondern sich aufgrund von Änderungen in der Ausführungsumgebung ändert. In Javascript zeigt dies immer auf das Objekt, für das seine Methode aufgerufen wird.

Geben Sie ein einfaches Beispiel:

Code kopieren Der Code lautet wie folgt:

Funktionstest(){
alarm(this);
}
var obj=function(){
var name='testObj';
}
obj.objTest=test;
test();
obj.objTest();

Fügen Sie diesen Code in HTML ein und führen Sie diese Seite aus. Zuerst wird eine Warnung [Objektfenster] und dann eine zweite Warnung angezeigt.

Code kopieren Der Code lautet wie folgt:

var obj=function(){
var name='testObj';
}

Wir haben zuerst eine test()-Methode definiert und die Alert()-Methode innerhalb der Methode aufgerufen, um diese anzuzeigen. Dann haben wir ein obj-Funktionsobjekt definiert, einen privaten Feldnamen hinzugefügt und eine statische Methode objTest() hinzugefügt. wird erstellt und diese Funktion zeigt direkt auf die Funktion test().

Rufen Sie die Methoden test() bzw. obj.objTest() auf. Das erste Warnfeld fordert das Window-Objekt auf, und die zweite Eingabeaufforderung ist der Code der von uns definierten obj-Funktion. Dies zeigt, dass der Wert unterschiedlich ist, wenn die Testfunktion zweimal ausgeführt wird!

Dies zeigt, dass, wenn das Objekt, das die Funktion aufruft, unterschiedlich ist, das Objekt, auf das durch das interne Schlüsselwort this verwiesen wird, unterschiedlich ist. Hierbei ist zu beachten, dass Javascript eine objektbasierte Sprache ist. Wenn unsere Variablen oder Funktionen im Stammverzeichnis des <script></script>-Tags definiert sind, entspricht dies tatsächlich dem Hinzufügen entsprechender Attribute oder Methoden zum Fenster Wenn wir also den Funktionscode test(){} verwenden, um eine Funktion zu definieren, entspricht dies tatsächlich dem Hinzufügen einer neuen Funktion zum Fensterobjekt, nämlich der Funktion window.test().

Wir können ein Experiment machen:

Code kopieren Der Code lautet wie folgt:

Funktionstest(){
alarm(this);
}
alarm(test===window.test);

Die Eingabeaufforderung im Warnfeld ist wahr, was bedeutet, dass der Aufruf der Funktion test() dem Aufruf von window.test() entspricht. Wenn wir also die Funktion test () aufrufen, ist das Objekt, das diese Funktion aufruft, tatsächlich das Fensterobjekt, und dies bezieht sich auf das Fensterobjekt. Der Inhalt des Warnfensters, das angezeigt wird, wenn wir (dies) alarmieren, ist also [Objekt Fenster ]. Wir setzen obj.objTest=test, was dem Verweisen von obj.objTest() auf test() entspricht. Wenn wir also die Funktion obj.objTest() aufrufen, entspricht dies dem Aufruf der Funktion test() in obj, also jetzt das Bezieht sich auf das Objekt obj. Die Aufforderung ist die Funktion von obj, dem Code, den wir sehen.

Vielleicht ist das obige Beispiel zu abstrakt und ich kann mir nicht vorstellen, unter welchen Umständen es verwendet werden kann. Gehen wir also von einer Anforderung aus und erstellen ein praktischeres Beispiel.

Angenommen, die Farbe aller Hyperlinks auf unserer aktuellen Seite soll nach dem Klicken in Rot geändert werden, und dies wird mithilfe von Javascript implementiert. Die allgemeine Idee sollte sein, alle -Tags auf der Seite abzurufen, dann alle -Tags zu durchlaufen und für jedes ein Klickereignis zu registrieren. Nachdem das Ereignis ausgelöst wurde, setzen wir seinen Farbwert auf Rot .

Der Beispielcode lautet wie folgt:

Code kopieren Der Code lautet wie folgt:

//Farbe ändern
Funktion changeColor(){
this.style.color='#f00';
}
//Ereignisse für alle a-Tags initialisieren und registrieren
Funktion init(){
var customLinks=document.getElementsByTagName('a');
for(i in customLinks){
//Sie können auch Ereignis-Listener verwenden, um Ereignisse zu registrieren
//Aufgrund der Kompatibilität mit IE, FF und anderen Browsern ist möglicherweise mehr Code erforderlich. Sie können ihn selbst schreiben
customLinks[i].onclick=changeColor;
}
}
window.onload=init;

Fügen Sie diesen Code zum HTML-Dokument hinzu und fügen Sie einige Hyperlinks zum Dokument hinzu. Wenn auf den Hyperlink geklickt wird, wird die Farbe rot. Das Schlüsselwort this in der hier definierten Funktion „changeColor()“ wird ausgelöst. Funktion verweist sie auf den aktuellen Hyperlink. Und wenn Sie die Funktion „changeColor()“ direkt aufrufen, meldet der Browser einen Fehler und löst einen Fehler wie „Fehler: ‚this.style‘ ist null oder kein Objekt oder undefiniert“ aus.

Ich frage mich, ob dies Ihnen, die den Artikel lesen, ein gewisses Verständnis für das Schlüsselwort „this“ in Javascript vermitteln kann? Oder bist du ungeduldig? (:P)

Wenn Sie dieses Problem wirklich besser verstehen möchten, müssen Sie den Umfang und die Umfangskette von Javascript genau kennen.

Der Bereich bezieht sich, wie der Name schon sagt, auf den Coderaum, auf den ein bestimmtes Attribut oder eine bestimmte Methode Zugriffsberechtigungen hat. Einfach ausgedrückt handelt es sich um den Anwendungsbereich dieser Variablen oder Methode im Code. In den meisten OOP gibt es drei Hauptbereiche: öffentlich, privat und geschützt. Ich werde die drei Bereiche hier nicht im Detail erläutern. Wenn Sie über OOP-Erfahrung verfügen, sollten Sie sie gründlich verstehen. Was ich hier sagen möchte, ist, dass diese drei Bereichstypen für Javascript nahezu bedeutungslos sind, da es in Javascript nur einen öffentlichen Bereich gibt und Bereiche in Javascript innerhalb von Funktionen verwaltet werden. Zum Beispiel:

Code kopieren Der Code lautet wie folgt:

var test1='globle variable';
Funktionsbeispiel(){
var test2='Beispielvariable';
alarm(test1);
alarm(test2);
}
example();
alarm(test1);
alarm(test2);

Nach dem, was wir zuvor erklärt haben, entspricht die Variable test1 hier einem Attribut von window, sodass sie im gesamten Fensterbereich funktioniert, während test2 innerhalb der Funktion example() deklariert wird, sodass ihr Bereich innerhalb von beibehalten wird Beispiel()-Methode: Wenn der test2-Browser außerhalb der Funktion aufgerufen wird, wird ein Fehler angezeigt. Es ist kein Problem, test1 in example() aufzurufen.

Lassen Sie uns auf dieser Grundlage ein weiteres Beispiel geben:

Code kopieren Der Code lautet wie folgt:

var test='globle variable';
Funktionsbeispiel(){
var test='Beispielvariable';
}
example();
alarm(test);

Was wird das Ergebnis sein, wenn dieses Beispiel ausgeführt wird? Ja, im Warnfeld wird „globle variable“ angezeigt, da der Gültigkeitsbereich der Testvariablen innerhalb der Funktion example() nur intern bleibt und sich nicht auf die externe Testvariable auswirkt. Was wäre, wenn wir das Schlüsselwort var aus der Testvariablen in example() entfernen? Sie können es selbst versuchen.

Apropos, es handelt sich um ein anderes Konzept, nämlich das Konzept der Scope-Kette. Eine Bereichskette ist ein Pfad, über den der Wert einer Variablen bestimmt werden kann. Wie aus dem obigen Beispiel ersichtlich ist, wird das Schlüsselwort var zur Verwaltung der Bereichskette verwendet. Wenn eine Variable mit dem Schlüsselwort var deklariert wird, kann sie als Endpunkt der Bereichskette betrachtet werden. Eine ähnliche Rolle wird auch die Definition der formalen Parameter derselben Funktion spielen.

Apropos: Haben Sie eine klarere Vorstellung von diesem seltsamen Kerl? Nach seiner einfachen Interpretation zeigt dies immer auf das Objekt, das die Funktion aufruft, in der es sich befindet. Anhand des Umfangs und der Umfangskette werden wir das wahre Gesicht davon klar bestimmen. Zum Schluss noch eine einfache Variation des Beispiels am Anfang:

Code kopieren Der Code lautet wie folgt:

Funktionstest(){
alarm(this);
}
var obj=function(){
var name='testObj';
}
obj.objTest=test;
obj.objTest2=function(){
test();
}
test();
obj.objTest();
obj.objTest2();

Was glaubst du, wird es dazu führen? Sie können versuchen, es auszuführen (:P);

Können wir das aufrufende Objekt zwangsweise ändern, da sich dies auf der Grundlage der Änderung des Objekts ändert, das seine Funktion aufruft? Die Antwort lautet „Ja“. Zukünftige Artikel werden diesen Teil sowie die Implementierung verschiedener Arten von Datenelementen in Javascript, Schließungen und anderen Konzepten vorstellen.

Das Aufschreiben einiger meiner Erfahrungen und Erkenntnisse im Lernprozess dient nicht nur dazu, sie mit allen zu teilen, sondern auch, um meine eigenen Mängel zu untersuchen. Bitte kritisieren Sie mich und geben Sie mir Ratschläge viel!