Dieses Objekt in JavaScript verstehen (Codebeispiel)

Der Inhalt dieses Artikels befasst sich mit dem Verständnis dieses Objekts in JavaScript (Codebeispiele). Ich hoffe, dass es für Freunde hilfreich ist.

Vorwort: Ich habe kürzlich „Javascript Advanced Programming“ gelesen. Für mich sind die Übersetzungen der chinesischen Version des Buches an vielen Stellen unbefriedigend, daher versuche ich, es mit dem zu interpretieren, was ich verstehe. Sollten Fehler oder Auslassungen vorliegen, sind wir Ihnen sehr dankbar, wenn Sie uns darauf hinweisen. Der Großteil des Inhalts dieses Artikels stammt aus „JavaScript Advanced Programming, Third Edition“.

Dieses Objekt ist basierend auf der Funktion zur Laufzeit an die Ausführungsumgebung gebunden:

In der globalen Umgebung entspricht dies dem Fenster und wenn die Funktion als Methode eines Objekts aufgerufen wird , dies zeigt auf dieses Objekt.

Die Ausführungsumgebung anonymer Funktionen ist jedoch global, sodass dieses Objekt normalerweise auf das Fenster verweist.

Die Verwendung dieses Objekts in einem Abschluss kann zu Problemen führen.

Manchmal ist dies aufgrund der Art und Weise, wie Abschlüsse geschrieben werden, nicht so offensichtlich.

// 在全局环境中，this等于window
function thisBoundForWindow(){
    console.log(this);
    console.log(this.name);
}
thisBoundForWindow(); // Window
var o = new Object();
o.name = "Shaw";
//当函数被作为某个对象的方法调用时，this就指向了那个对象。
thisBoundForWindow.apply(o); // {name: "Shaw"}; "Shaw" ;

Der obige Code erstellt zunächst einen globalen Variablennamen und dann ein Objekt, das das Namensattribut enthält.

Dieses Objekt enthält auch eine Methode – getNameFunc(), die eine anonyme Funktion zurückgibt, und die anonyme Funktion gibt this.name zurück. Diese anonyme Funktion ist ein Abschluss.

Sehen wir uns die Definition von „Abschluss“ noch einmal an:

Eine Funktion, die Zugriff auf Variablen in einem anderen Bereich hat, ist ein Abschluss.

Da getNameFunc() eine Funktion zurückgibt, ruft der Aufruf von object.getNameFunc()() die zurückgegebene Funktion auf. Das Ergebnis ist, dass ein Zeichen auf der Konsole ausgegeben wird.

Das in diesem Beispiel zurückgegebene Zeichen ist jedoch „The Window“, was den Wert der globalen Namensvariablen darstellt.

Wie kann man das also auf das Objekt im Beispiel verweisen?

Speichern Sie dieses Objekt im externen Bereich in einer Variablen, auf die der Abschluss zugreifen kann, damit der Abschluss auf das Objekt zugreifen kann. (Beachten Sie, dass diese Methode auch häufig bei der Verwendung von Callback-Funktionen verwendet wird.)

//在闭包中使用this对象可能会导致一些问题。
//有时候由于编写闭包的方式不同，这一点可能不会那么明显。
var name = "The Window";
var object = {
    name: "My Object",
    getNameFunc: function() {
        return function() {
            console.log(this.name);
        }
    }
}
object.getNameFunc()(); // "The Window"
/*
object.getNameFunc return=> function() {
        return function() {
            console.log(this.name);
        }
    }  => ()调用，还是在全局环境下调用的，所以this.name = window.name => "The Window"
*/

Bevor Sie die anonyme Funktion definieren, weisen Sie das Objekt this einer Variablen mit dem Namen that zu.

Nach der Definition des Abschlusses kann der Abschluss auch auf diese Variable zugreifen, da es sich um eine Variable handelt, die wir speziell in der enthaltenden Funktion deklariert haben.

Auch nachdem die Funktion zurückgekehrt ist, bezieht sich diese immer noch auf das Objekt, sodass der Aufruf von Object.getNameFunc() „My Object“ zurückgibt.

Unter bestimmten Umständen kann sich der Wert dieses Betrags unerwartet ändern. Der folgende Code ändert beispielsweise die Ergebnisse des vorherigen Beispiels.

var name = "The Window";
var object = {
    name: "My Object",
    getNameFunc: function(){
        var that = this;
        return function() {
            console.log(that.name);
        }
    }
}
object.getNameFunc()(); // "My Object"
/*
// 伪代码过程
object.getNameFunc  execute
=> this = object = that 
=>function() {console.log(that.name);}  
=> ()
=> that.name = object.name 
=> "My Object" 
*/

Die erste Codezeile ruft wie üblich object.getName() auf und gibt „My Object“ zurück, da this.name object.name ist.

Die zweite Codezeile fügt Klammern hinzu, bevor diese Methode aufgerufen wird. Obwohl sie nach dem Hinzufügen der Klammern auf eine Funktion zu verweisen scheint, bleibt der Wert davon erhalten, da object.getName und (object .getName) die Definition haben das gleiche.

Die dritte Codezeile führt zunächst eine Zuweisungsanweisung aus und ruft dann das Ergebnis der Zuweisung auf. Da der Zuweisungsausdruck die Funktion selbst ist, wird der Wert dieser nicht beibehalten und „The Window“ zurückgegeben.

var name = "The Window";
var object = {
    name: "My Object",
    getName: function() {
        console.log(this.name);
    }
};
object.getName(); // "My Object"
(object.getName)(); // "My Object"
(object.getName = object.getName)(); // "The Window"

Natürlich ist es unwahrscheinlich, dass wir diese Methode wie die zweite und dritte Codezeile aufrufen. Es ist in Ordnung, wenn Sie es vorerst nicht verstehen. Dieses Beispiel zeigt, dass selbst geringfügige Änderungen in der Syntax den Wert davon versehentlich ändern können.

Das obige ist der detaillierte Inhalt vonDieses Objekt in JavaScript verstehen (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!