Detaillierte Erläuterung der Verwendung dieses Schlüsselworts in JavaScript

In diesem Artikel wird hauptsächlich die Verwendung dieses Schlüsselworts in JavaScript vorgestellt. Dies stellt das Grundwissen für den Einstieg in JavaScript dar. Freunde, die es benötigen, können darauf zurückgreifen.

Wie viele andere objektorientierte Sprachen auch JavaScript dieses Schlüsselwort hat, wird es in Funktionen verwendet, 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 diese 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\r\n");
}

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.

Ereignisverarbeitungsfunktion

var name = "I am Laruence";
function introduce() {
   alert(this.name);
}
alert(window.introduce);

/**
* output:
* function introduce() {
* alert(this.name);
* }
*/

Vielleicht Sie Wir sind verwirrt über dieses Schlüsselwort. Die meisten Gründe liegen in der Verwendung von Funktionen (Methoden) in der Ereignisverarbeitung.

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;

Wir wissen, dass alles in Js Objekte, Funktionen und Methoden sind, aber Funktionen haben ausführbare interne Attribute, wenn der Prozessor an Onclick gebunden wird , es bindet tatsächlich das Eingabefeld-Dom-Objekt mit der ID des Namens. Weisen Sie dem Onclick-Attribut einen Wert zu. Mit anderen Worten, wir geben die Funktion showValue Copy an das Onclick-Attribut des Namens-Eingabefeldobjekts Wir schauen uns zu diesem Zeitpunkt den Onclick an:

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);
* }
*/

und für die vorherige Methode:

function showValue() {
   alert(this.value);
}
<input id="name" type="text" name="name" value="Laruence" onclick="showValue()"/>

Dies kann auch seitlich verwendet werden und spiegelt den Unterschied zwischen den beiden wider: Bei ersterer handelt es sich um eine Zuweisung, bei letzterer um eine Referenz Wenn wir zu diesem Zeitpunkt das Onclick-Attribut des Eingabefelds überprüfen, erhalten wir:

Sehen Sie den Unterschied?

Apropos, es gibt einen sehr interessantes Beispiel. Sie können es unter IE ausprobieren:

dom.onclick = showvalue; //没有调用符

Ändern Sie den Zeiger davon

onclick = "showvalue()" //有调用符

Nun, da wir bereits wissen, warum, wie können wir das machen? Auf den Ort zeigen, auf den wir zeigen möchten?

alert(dom.onclick);
/**
* output:
* function onclick() {
*  showValue();
* }
*/

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="/static/imghwm/default1.png"  data-src="xxx"  class="lazy"   onerror="alert(1);} function hi() { alert(2); " / alt="Detaillierte Erläuterung der Verwendung dieses Schlüsselworts in JavaScript" >

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 only

Beispiel 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);

Wenn Sie also Variablen zwischenspeichern möchten, um Code zu speichern, ist die richtige Vorgehensweise, nur das Objekt zu speichern, das diese Funktion aufruft:

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 myNamespace = {
  myObject : {
    sayHello : function() {
      console.log('Hi! My name is ' + this.myName);
    },

    myName : 'Rebecca'
  }
};

var obj = myNamespace.myObject;

obj.sayHello(); // logs 'Hi! My name is Rebecca'

总之，有一个大原则：谁调用了那个函数，this 就指向谁。

以上就是本章的全部内容，更多相关教程请访问JavaScript视频教程！