Explication détaillée de l'utilisation de ce mot-clé en JavaScript

Cet article présente principalement l'utilisation de ce mot-clé en JavaScript, qui constitue la connaissance de base pour démarrer avec JavaScript. Les amis qui en ont besoin peuvent s'y référer

Comme beaucoup d'autres langages orientés objet, JavaScript également. a ce mot-clé, il est utilisé dans les fonctions pour pointer vers l'objet qui appelle cette méthode. En programmation réelle, pour déterminer vers qui cela pointe, vous pouvez généralement suivre les principes suivants :

• Si la fonction est appelée par Function.call ou Function.apply, alors cela pointe vers le premier élément du paramètre call/apply, si le paramètre est nul ou non défini, cela pointe vers l'objet global (dans le navigateur, l'objet global est l'objet window).

• Si la fonction est appelée par Function.bind, alors cela pointera vers le premier paramètre de bind (lorsque la méthode est créée).

• Si la fonction est appelée comme méthode par un objet, alors cela pointe vers cet objet.

• Si la fonction est simplement appelée en tant que fonction et n'est attachée à aucun objet, alors cela pointe vers la fenêtre de variable globale.

Fonction

Tout d'abord, regardons « fonction » :

function introduce() {
   alert("Hello, I am Laruence\r\n");
}

Pour, cette fonction, ce Who le mot clé pointe-t-il vers ?

Une fonction définie globalement, le propriétaire de la fonction est la page courante, c'est à dire l'objet fenêtre

C'est pourquoi, je mets la fonction entre guillemets. . Parce que la fonction définie globalement est en fait une méthode de l'objet window

Par conséquent, nous pouvons l'appeler directement via le nom de la fonction, ou nous pouvons l'appeler via le nom de la méthode window. dans la méthode Le mot-clé pointe vers son propriétaire : window object.

Si nous regardons l'attribut d'introduction de window, nous obtiendrons :

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

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

Après avoir lu le code ci-dessus, vous pouvez Pensez Puisque la fonction globale est une méthode de l'objet window et que la variable globale est un attribut de l'objet window (déjà mentionné dans la portée Javasript), alors la variable globale est accessible via le mot-clé this dans la fonction globale, à droite ?

La réponse est oui, si vous appelez la fonction d'introduction, vous me connaîtrez sous le nom de Laruence.

Fonction de gestion des événements

Peut-être que vous sont confus à propos de ce mot-clé, la plupart des raisons proviennent de l'utilisation de fonctions (méthodes) dans le traitement des événements

<input id="name" type="text" name="name" value="Laruence" />

Par exemple, nous devons maintenant afficher la valeur de la zone de saisie du nom lorsque nous cliquons sur le. Zone de saisie "nom". Ensuite, vous pouvez écrire le code suivant :

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

Le code ci-dessus s'exécute normalement, mais pourquoi cela ne signifie-t-il pas que le pointeur this de la fonction pointe toujours vers la fonction ? propriétaire ? Cela ne veut-il pas dire que le propriétaire de la variable globale est l'objet window ?

Haha, si vous pensez à cette question, cela signifie que vous lisez mon article sérieusement. Sinon, je suggère. vous le lisez depuis le début, sinon vous serez toujours confus après l'avoir lu ~

Eh bien, oui, pour le code ci-dessus, showValue est défini dans l'objet global, il semble donc que le problème ne peut survenir que lorsque l'événement onclick est lié.

Nous savons que tout dans Js est des objets, les fonctions et les méthodes sont également des attributs d'objets, mais les fonctions ont des attributs internes exécutables. Par conséquent, pour le code ci-dessus, lors de la liaison du processeur à onclick. , il lie en fait l'objet Dom de la boîte de saisie avec l'identifiant du nom. Attribuez une valeur à l'attribut onclick

En d'autres termes, nous donnons la fonction showValue Copier à l'attribut onclick de l'objet de la boîte de saisie du nom If. nous regardons le onclick à ce moment :

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

Ainsi, lorsque l'événement est déclenché, la méthode onclick de la zone de saisie du nom sera appelée. À ce moment, le mot-clé this pointera naturellement vers. la zone de saisie du nom.

Cependant, des choses confuses surviennent, comme ce qui suit. Cette façon d'écrire :

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

ne peut pas fonctionner normalement, pourquoi

Eh bien ? , car à ce moment-là, ce n'est pas un devoir, mais une référence.

Si l'on fait attention à deux manières d'écrire en clic, vous constaterez que pour la méthode précédente, nous avons utilisé :

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

et pour la méthode précédente :

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

Ceci peut également être utilisé latéralement reflète la différence entre les deux : pour la première, c'est une affectation, tandis que pour la seconde, c'est une référence If. on vérifie l'attribut onclick de la zone de saisie à ce moment, on obtient :

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

Voyez-vous la différence Comprenez-vous pourquoi

En parlant de ça, il y a un très ? exemple intéressant. Vous pouvez l'essayer sous IE :

<img  src="/static/imghwm/default1.png"  data-src="xxx"  class="lazy"   onerror="alert(1);} function hi() { alert(2); " / alt="Explication détaillée de l'utilisation de ce mot-clé en JavaScript" >

Changer le pointeur de ceci

Eh bien, maintenant que nous savons déjà pourquoi, comment pouvons-nous faire cela pointer vers l'endroit vers lequel nous voulons pointer ?

Pour la fonction de traitement d'événement ci-dessus, nous pouvons avoir la façon suivante d'écrire :

dom.onclick = showValue();

dom.onclick = function() { alert(this.value) ;}

<input onclick="alert(this.value);" /> //想想刚才我们的引用,是如何把这句嵌入的.

dom.addEventListener(dom, showValue, false); //ff only

Pour les situations où ce n'est pas un événement fonction de traitement, nous pouvons utiliser apply, ou call, pour changer le pointeur de ce mot-clé

Par exemple :

var laruence = {
   name : 'laruence',
   age : 26,
   position : 'Senior PHP Engineer',
   company : 'Baidu.inc'
};
function introduce() {
   alert(this.name);
}
introduce.call(laruence);

Exemple de fonction appelée par Function.call :

.

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'

Exemple de fonction appelée par Function.call :

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'

Exemple de fonction appelée par un objet :

var myName = 'the global object',
  sayHello = function() {
    console.log('Hi! My name is ' + this.myName);
  },
  myObject = {
    myName : 'Rebecca'
  },
  secondObject = {
    myName : 'Colin'
  };
myObject.sayHello = sayHello;
secondObject.sayHello = sayHello;
sayHello();        // logs 'Hi! My name is the global object'
myObject.sayHello();   // logs 'Hi! My name is Rebecca'
secondObject.sayHello(); // logs 'Hi! My name is Colin'

Lors de l'appel d'une fonction dans un espace de noms profond , nous mettons généralement en cache une variable pointant vers la fonction à appeler pour réduire la quantité de code. Mais cela modifiera la valeur de this dans la fonction et effectuera finalement une mauvaise opération. Par exemple :

var myNamespace = {
  myObject : {
    sayHello : function() {
      console.log('Hi! My name is ' + this.myName);
    },

    myName : 'Rebecca'
  }
};

var hello = myNamespace.myObject.sayHello;

hello(); // logs 'Hi! My name is undefined'

Donc, si vous souhaitez mettre en cache des variables pour enregistrer le code, la bonne méthode est de sauvegarder uniquement l'objet qui appelle cette fonction :

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