Wie viele andere objektorientierte Sprachen verfügt auch JavaScript über das Schlüsselwort this, das in Funktionen verwendet wird, um auf das Objekt zu verweisen, das diese Methode aufruft. Um in der tatsächlichen Programmierung festzustellen, auf wen dies verweist, können Sie im Allgemeinen die folgenden Prinzipien befolgen:
Wenn die Funktion von Function.call oder Function.apply aufgerufen wird, dann zeigt dies auf die erstes Element des Aufruf-/Anwenderparameters. Wenn der Parameter null oder undefiniert ist, zeigt dies auf das globale Objekt (im Browser ist das globale Objekt das Fensterobjekt).
Wenn die Funktion von Function.bind aufgerufen wird, zeigt dies auf den ersten Parameter von bind (wenn die Methode erstellt wird).
Wird die Funktion als Methode von einem Objekt aufgerufen, dann zeigt dies auf dieses Objekt.
Wenn die Funktion nur als Funktion aufgerufen wird und an kein Objekt angehängt ist, dann zeigt dies auf das globale Variablenfenster.
Funktion
Schauen wir uns zunächst „Funktion“ an:
function introduce() {
alert("Hello, I am Laruence
");
}Für diese Funktion, dieses Who Zeigt das Schlüsselwort auf?
Eine global definierte Funktion. Der Eigentümer der Funktion ist die aktuelle Seite, also das Fensterobjekt.
Deshalb setze ich die Funktion in Anführungszeichen Da die global definierte Funktion tatsächlich eine Methode des Fensterobjekts ist, können wir sie zu diesem Zeitpunkt direkt über den Funktionsnamen aufrufen in der Methode Das Schlüsselwort zeigt auf seinen Besitzer: window object denke Da die globale Funktion eine Methode des Fensterobjekts ist und die globale Variable ein Attribut des Fensterobjekts ist (bereits im Javasript-Bereich erwähnt), kann auf die globale Variable über das Schlüsselwort this in der globalen Funktion zugegriffen werden ?
Die Antwort lautet: Ja, wenn Sie die Einführungsfunktion aufrufen, kennen Sie mich als Laruence.
Ereignisverarbeitungsfunktionvar name = "I am Laruence";
function introduce() {
alert(this.name);
}
alert(window.introduce);
/**
* output:
* function introduce() {
* alert(this.name);
* }
*/Zum Beispiel müssen wir jetzt den Wert des Namenseingabefelds anzeigen, wenn wir auf klicken Eingabefeld „Name“. Dann können Sie den folgenden Code schreiben:
Der obige Code wird normal ausgeführt, aber warum bedeutet das nicht, dass der Zeiger dieser Funktion immer auf die Funktion zeigt? Besitzer? Bedeutet das nicht, dass der Besitzer der globalen Variablen das Fensterobjekt ist?Haha, wenn Ihnen diese Frage einfällt, bedeutet das, dass Sie meinen Artikel ernsthaft lesen Sie lesen es von Anfang an, sonst sind Sie nach dem Lesen immer noch verwirrt ~<input id="name" type="text" name="name" value="Laruence" />
Nun ja, für den obigen Code ist showValue im globalen Objekt definiert, sodass das Problem anscheinend nur auftreten kann, wenn Das OnClick-Ereignis ist gebunden.
function showValue() {
alert(this.value);
}
document.getElementById("name").onclick = showValue;Wenn also das Ereignis ausgelöst wird, wird die Onclick-Methode des Namenseingabefelds aufgerufen. Zu diesem Zeitpunkt zeigt das Schlüsselwort this natürlich an Das Namenseingabefeld.
Es kommt jedoch zu verwirrenden Dingen, wie zum Beispiel der folgenden Schreibweise:
kann nicht normal ausgeführt werden, warum ist das so? , denn zu diesem Zeitpunkt handelt es sich nicht um eine Aufgabe, sondern um eine Referenz.Wenn wir auf zwei Schreibweisen achten, werden Sie feststellen, dass wir für die vorherige Methode Folgendes verwendet haben:function showValue() {
alert(this.value);
}
document.getElementById("name").onclick = showValue;
alert(document.getElementById("name").onclick);
/**
* output
* function showValue() {
* alert(this.value);
* }
*/<span class="kwd">function</span><span class="pln"> showValue</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><br/><span class="pln"> alert</span><span class="pun">(</span><span class="kwd">this</span><span class="pun">.</span><span class="pln">value</span><span class="pun">);</span><br/><span class="pun">}</span><br/><span class="pun"><</span><span class="pln">input id</span><span class="pun">=</span><span class="str">"name"</span><span class="pln"> type</span><span class="pun">=</span><span class="str">"text"</span><span class="pln"> name</span><span class="pun">=</span><span class="str">"name"</span><span class="pln"> value</span><span class="pun">=</span><span class="str">"Laruence"</span><span class="pln"> onclick</span><span class="pun">=</span><span class="str">"showValue()"</span><span class="pun">/></span>Sehen Sie den Unterschied?
Apropos, es gibt einen sehr interessantes Beispiel. Sie können es unter IE ausprobieren:
dom.onclick = showvalue; //没有调用符
onclick = "showvalue()" //有调用符
<span class="pln">alert</span><span class="pun">(</span><span class="pln">dom</span><span class="pun">.</span><span class="pln">onclick</span><span class="pun">);</span><br/><span class="com">/**</span><br/><span class="com">* output:</span><br/><span class="com">* function onclick() {</span><br/><span class="com">* showValue();</span><br/><span class="com">* }</span><br/><span class="com">*/</span>Für die obige Ereignisverarbeitungsfunktion können wir Folgendes schreiben:
Für Situationen, in denen es sich nicht um ein Ereignis handelt Bei der Verarbeitung einer Funktion können wir „apply“ oder „call“ verwenden, um den Zeiger dieses Schlüsselworts zu ändern.<img src="xxx" onerror="alert(1);} function hi() { alert(2); " />Zum Beispiel:
Beispiel für den Funktionsaufruf durch Function.call:
Beispiel für den Funktionsaufruf durch Function.call:
dom.onclick = showValue();
dom.onclick = function() { alert(this.value) ;}
<input onclick="alert(this.value);" /> //想想刚才我们的引用,是如何把这句嵌入的.
dom.addEventListener(dom, showValue, false); //ff onlyBeispiel für den Funktionsaufruf durch Objekt:
Beim Aufruf einer Funktion in einem tiefen Namespace Normalerweise speichern wir eine Variable zwischen, die auf die aufzurufende Funktion verweist, um die Codemenge zu reduzieren. Dadurch wird jedoch der Wert dieser Funktion in der Funktion geändert und letztendlich wird die falsche Operation ausgeführt. Zum Beispiel:var laruence = {
name : "laruence",
age : 26,
position : "Senior PHP Engineer",
company : "Baidu.inc"
};
function introduce() {
alert(this.name);
}
introduce.call(laruence);var myObject = {
sayHello : function() {
console.log("Hi! My name is " + this.myName);
},
myName : "Rebecca"
};
var secondObject = {
myName : "Colin"
};
myObject.sayHello(); // logs "Hi! My name is Rebecca"
myObject.sayHello.call(secondObject); // logs "Hi! My name is Colin"var myName = "the global object",
sayHello = function () {
console.log("Hi! My name is " + this.myName);
},
myObject = {
myName : "Rebecca"
};
var myObjectHello = sayHello.bind(myObject);
sayHello(); // logs "Hi! My name is the global object"
myObjectHello(); // logs "Hi! My name is Rebecca"Das obige ist der detaillierte Inhalt vonDetaillierte Erklärung der Verwendung in Javascript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
