Was bedeutet das in Javascript?

In js bedeutet dies „dies; aktuell“ und ist eine Zeigervariable, die dynamisch auf die Ausführungsumgebung der aktuellen Funktion zeigt. Wenn dieselbe Funktion in verschiedenen Szenarien aufgerufen wird, kann sich auch der Zeiger dieser Funktion ändern. Er zeigt jedoch immer auf den tatsächlichen Aufrufer der Funktion, in der er sich befindet. Wenn kein Aufrufer vorhanden ist, zeigt er auf das globale Objektfenster.

Die Betriebsumgebung dieses Tutorials: Windows 7-System, JavaScript-Version 1.8.5, Dell G3-Computer.

Nachdem eine JavaScript-Funktion aufgerufen wurde, wird sie in einer bestimmten Laufumgebung ausgeführt. Diese Laufumgebung ist der Aufrufer der Funktion oder das Objekt, das die Funktion aufruft. Wenn die Funktion keinen Aufrufer hat (nicht über das Objekt, sondern direkt), dann ist die Ausführungsumgebung das globale Objektfenster.

Um während der Funktionsausführung auf die laufende Umgebung verweisen (zugreifen) zu können, hat JavaScript speziell das Schlüsselwort this hinzugefügt. Dies ist eine Zeigervariable, die auf die Ausführungsumgebung der aktuellen Funktion zeigt.

Wenn dieselbe Funktion in verschiedenen Szenarien aufgerufen wird, kann sich auch der Sinn ändern, aber sie zeigt immer auf den tatsächlichen Aufrufer der Funktion, in der sie sich befindet (wer auch immer sie aufruft, zeigt auf wen); Kein Aufrufer, dies zeigt auf das globale Objektfenster.

Im Abschnitt „JS dies und das Aufrufen von Objekten“ haben wir über die vorläufige Verwendung dieses Zeigers gesprochen. Wenn Sie ihn nicht verstehen, klicken Sie bitte auf den Link. Dieser Abschnitt konzentriert sich auf eine ausführliche Analyse dieses Zeigers.

Verwenden Sie dies

Dies wird automatisch von der JavaScript-Engine generiert, wenn eine Funktion ausgeführt wird. Es handelt sich um einen dynamischen Zeiger, der innerhalb der Funktion vorhanden ist und auf das aktuell aufrufende Objekt verweist. Die spezifische Verwendung ist wie folgt:

this[.属性]

Wenn dies keine Attribute enthält, wird das aktuelle Objekt übergeben.

Dieser ist flexibel einsetzbar und auch die darin enthaltenen Werte sind vielfältig. Im folgenden Beispiel wird beispielsweise die Methode call() verwendet, um das Objekt, auf das sie verweist, innerhalb einer Funktion kontinuierlich zu ändern.

var x = "window";  //定义全局变量x，初始化字符串为“window”
function a () {  //定义构造函数a
    this.x = "a";  //定义私有属性x，初始化字符a
}
function b () {  //定义构造函数b
    this.x = "b";  //定义私有属性x，初始化为字符b
}
function c () {  //定义普通函数，提示变量x的值
    console.log(x);
}
function f () {  //定义普通函数，提示this包含的x的值
    console.log(this.x);
}
f();  //返回字符串“window”，this指向window对象
f.call(window);  //返回字符串“window”，指向window对象
f.call(new a());  //返回字符a，this指向函数a的实例
f.call(new b());  //返回字符b，this指向函数b的实例
f.call(c);  //返回undefined，this指向函数c对象

Das Folgende ist eine kurze Zusammenfassung dieser Leistung in 5 gängigen Szenarien und Bewältigungsstrategien.

1. Gewöhnliche Aufrufe

Das folgende Beispiel zeigt die Auswirkung von Funktionsreferenzen und Funktionsaufrufen darauf.

var obj = {  //父对象
    name : "父对象obj",
    func : function () {
        return this;
    }
}
obj.sub_obj = {  //子对象
    name : "子对象sub_obj",
    func : obj.func
}
var who = obj.sub_obj.func();
console.log(who.name);  //返回“子对象sub_obj”，说明this代表sub_obj

Wenn Sie die Funktion des Unterobjekts sub_obj in einen Funktionsaufruf ändern.

obj.sub_obj = {
    name : "子对象sub_obj",
    func : obj.func()  //调用父对象obj的方法func
}

Dann stellt dies in der Funktion das übergeordnete Objekt obj dar, in dem die Funktion definiert ist.

var who = obj.sub_obj.func;
console.log(who.name);  //返回“父对象obj”，说明this代表父对象obj

2. Instanziierung

Beim Aufruf einer Funktion mit dem neuen Befehl bezieht sich dieser immer auf das Instanzobjekt.

var obj = {};
obj.func = function () {
    if (this == obj) console.log("this = obj");
    else if (this == window) console.log("this = window");
    else if (this.contructor == arguments.callee) console.log("this = 实例对象");
}
new obj.func;  //实例化

3. Dynamischer Aufruf

Verwenden Sie call und apply, um zu erzwingen, dass dies auf das Parameterobjekt zeigt.

function func () {
    //如果this的构造函数等于当前函数，则表示this为实例对象
    if (this.contructor == arguments.callee) console.log("this = 实例对象");
    //如果this等于window，则表示this为window对象
    else if (this == window) console.log("this = window对象");
    //如果this为其他对象，则表示this为其他对象
    else console.log("this == 其他对象 \n this.constructor =" + this.constructor);
}
func();  //this指向window对象
new func();  //this指向实例对象
cunc.call(1);  //this指向数值对象

Wenn im obigen Beispiel func() direkt aufgerufen wird, stellt dies das Fensterobjekt dar. Wenn eine Funktion mit dem neuen Befehl aufgerufen wird, wird ein neues Instanzobjekt erstellt, das auf das neu erstellte Instanzobjekt verweist.

Wenn Sie die Methode call() verwenden, um die Funktion func() auszuführen, erzwingt die JavaScript-Engine, dass die Nummer 1 in ein numerisches Objekt gekapselt wird, da der Parameterwert der Methode call() die Zahl 1 ist zeigt auf dieses numerische Objekt.

4. Ereignisverarbeitung

In der Zusammenfassung der Ereignisverarbeitungsfunktion zeigt dies immer auf das Objekt, das das Ereignis ausgelöst hat.

<input type="button" value="测试按钮" />
<script>
    var button = document.getElementsByTagName("put")[0];
    var obj = {};
    obj.func = function () {
        if (this == obj) console.log("this = obj");
        if (this == window) console.log("this = window");
        if (this == button) console.log("this = button");
    }
    button.onclick = obj.func;
</script>

Im obigen Code zeigt das in func() enthaltene This nicht mehr auf das Objekt obj, sondern auf die Schaltfläche button, da func() aufgerufen und ausgeführt wird, nachdem es an den Event-Handler der Schaltfläche übergeben wurde.

Wenn Sie den DOM2-Level-Standard verwenden, um die Event-Handler-Funktion zu registrieren, ist die Vorgehensweise wie folgt:

if (window.attachEvent) {  //兼容IE模型
    button.attachEvent("onclick", obj.func);
} else {  //兼容DOM标准模型
    button.addEventListener("click", obj.func, true);
}

Im IE-Browser zeigt dies auf das Fensterobjekt und das Schaltflächenobjekt, im DOM-Standardbrowser jedoch nur darauf zeigt auf das Schaltflächenobjekt. Denn im IE-Browser ist attachmentEvent() eine Methode des Fensterobjekts. Wenn diese Methode aufgerufen wird, zeigt sie auf das Fensterobjekt.

Um Browserkompatibilitätsprobleme zu lösen, können Sie die Methode call() oder apply() aufrufen, um die Ausführung der Methode func() für das Objekt obj zu erzwingen, um das Problem zu vermeiden, dass verschiedene Browser dies unterschiedlich analysieren.

if (window.attachEvent) {
    button.attachEvent("onclick", function () {  //用闭包封装call()方法强制执行func()
        obj.func.call(obj);
    });
} else {
    button.attachEventListener("onclick", function () {
        obj.func.call(obj);
    }, true);
}

Bei erneuter Ausführung zeigt das in func() enthaltene This immer auf das Objekt obj.

5. Timer

Verwenden Sie einen Timer, um Funktionen aufzurufen.

var obj = {};
obj.func = function () {
    if (this == obj) console.log("this = obj");
    else if (this == window) console.log("this = window对象");
    else if (this.constructor == arguments.callee) console.log("this = 实例对象");
    else console.log("this == 其他对象 \n this.constructor =" + this.constructor);
}
setTimeOut(obj.func, 100);

Im IE verweist dies auf das Fensterobjekt und das Schaltflächenobjekt. Der spezifische Grund ist der gleiche wie bei der oben erläuterten Methode attachmentEvent(). In DOM-kompatiblen Browsern verweist dies auf das Fensterobjekt, nicht auf das Schaltflächenobjekt.

Da die Methode setTimeOut() im globalen Gültigkeitsbereich ausgeführt wird, zeigt diese auf das Fensterobjekt. Um Probleme mit der Browserkompatibilität zu beheben, können Sie die Methoden call oder apply verwenden.

setTimeOut (function () {
    obj.func.call(obj);
}, 100);

【Empfohlenes Lernen: Javascript-Tutorial für Fortgeschrittene】

Das obige ist der detaillierte Inhalt vonWas bedeutet das in Javascript?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!