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.

var 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:

<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:

function showValue() {
   alert(this.value);
}
document.getElementById('name').onclick = showValue;
alert(document.getElementById('name').onclick);
/**
* output
* function showValue() {
* alert(this.value);
* }
*/

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

Sehen Sie den Unterschied?

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

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

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

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

Für die obige Ereignisverarbeitungsfunktion können wir Folgendes schreiben:

<img src="xxx" onerror="alert(1);} function hi() { alert(2); " />

Zum Beispiel:

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:

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 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视频教程！