Heim > Web-Frontend > js-Tutorial > Kann ich „this' durch den Objektliteralnamen in JavaScript-Objektliteralfunktionen ersetzen?

Kann ich „this' durch den Objektliteralnamen in JavaScript-Objektliteralfunktionen ersetzen?

DDD
Freigeben: 2024-11-29 01:02:16
Original
613 Leute haben es durchsucht

Can I Replace 'this' with the Object Literal Name in JavaScript Object Literal Functions?

Mehrdeutigkeit in Objektliteral-Funktionsreferenzen: Ersetzung von „this“ durch Objektliteral

Bei der Arbeit mit Objektliteralen stellt sich eine wichtige Frage: Kann Eine Funktion innerhalb eines Objekts verweist auf sein übergeordnetes Objekt und verwendet dabei den Namen des Literals anstelle von „this“? Obwohl dies scheinbar funktioniert, kann es zu unbeabsichtigten Konsequenzen führen.

Betrachten Sie das folgende Beispiel:

var obj = {
    key1: "it",
    key2: function() {return this.key1 + " works!"}
};
alert(obj.key2());
Nach dem Login kopieren

Dieser Code löst einen Konsolenfehler aus, da sich „this“ in der Funktion „key2“ auf das Globale bezieht Objekt (Fenster) anstelle des Objekts obj. Dieser Fehler kann vermieden werden, indem das Objektliteral direkt in der Funktion verwendet wird:

var obj = {
    key1: "it",
    key2: function() {return obj.key1 + " works!"}
};
alert(obj.key2());
Nach dem Login kopieren

Allerdings ist auch dieser Ansatz nicht vor Problemen gefeit. Lassen Sie uns zwei zusätzliche Szenarien analysieren:

  1. Externe Funktionsaufrufe:
var obj = {
    key1: "it",
    key2: function() { return this.key1 + " works!" }
};
var func = obj.key2;
alert(func()); // error
Nach dem Login kopieren

Aufruf der Funktion key2 als eigenständige Funktion (nicht als Methode). von obj) unterbricht die „this“-Referenz und kann unerwartete Folgen haben Ergebnisse.

  1. Referenzaustausch:
var obj = {
    key1: "it",
    key2: function() { return obj.key1 + " works!" }
};
var newref = obj;
obj = { key1: "something else"; };
alert(newref.key2()); // "something else works"
Nach dem Login kopieren

Das Ändern der obj-Referenz von einer sekundären Referenz kann die interne Referenz der key2-Funktion auf die richtige ungültig machen Objekt.

Um diese potenziellen Probleme anzugehen, gibt es mehrere Lösungen verfügbar:

  • ES6 mit const: Verhindern Sie Objektmutationen, die „diese“ Referenzen zerstören könnten.
  • ES5-Abschluss: Kapseln Sie das Objekt innerhalb einer Funktion, um externe Referenzkollisionen zu vermeiden.
  • Bindung: Binden Sie die key2-Funktion für das obj-Objekt, um sicherzustellen, dass seine „this“-Referenz immer korrekt ist.

Die Auswahl der am besten geeigneten Lösung hängt vom spezifischen Kontext und der Wahrscheinlichkeit ab, dass die beschriebenen Probleme auftreten. Dennoch ist es wichtig, sich der potenziellen Fallstricke bewusst zu sein und die notwendigen Vorsichtsmaßnahmen zu treffen, wenn man mit Objektliteralfunktionen arbeitet.

Das obige ist der detaillierte Inhalt vonKann ich „this' durch den Objektliteralnamen in JavaScript-Objektliteralfunktionen ersetzen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage