Comment cette variable est-elle utilisée en javascript ?

Cette variable est un mot-clé insaisissable en JavaScript. Elle est très puissante. Comprendre pleinement les connaissances pertinentes à ce sujet nous aidera à pouvoir écrire facilement des programmes JavaScript orientés objet.

La chose la plus importante à propos de cette variable est de pouvoir clarifier à quel objet elle fait référence. Peut-être que beaucoup d'informations ont leur propre explication, mais certains concepts sont un peu compliqués. Ma compréhension est la suivante : analysez d'abord quel objet la fonction dans laquelle elle se trouve est appelée en tant que méthode, puis l'objet est l'objet référencé par ceci.
Exemple 1.

var obj = {}; 
obj.x = 100; 
obj.y = function(){ alert( this.x ); }; 
obj.y(); //弹出 100

Ce code est très simple à comprendre Lorsque obj.y() est exécuté, la fonction est appelée comme une méthode de l'objet obj, donc ceci dans le corps de la fonction. pointe vers l'objet obj, donc 100 apparaîtra.

Exemple 2.

var checkThis = function(){ 
alert( this.x); 
}; 
var x = 'this is a property of window'; 
var obj = {}; 
obj.x = 100; 
obj.y = function(){ alert( this.x ); }; 
obj.y(); //弹出 100 
checkThis(); //弹出 'this is a property of window'

La raison pour laquelle « ceci est une propriété de la fenêtre » apparaît ici peut être un peu déroutante. Il existe une règle dans la portée des variables JavaScript selon laquelle "les variables globales sont des propriétés de l'objet fenêtre". Lorsque checkThis() est exécuté, cela équivaut à window.checkThis() Par conséquent, à ce stade, le point du mot-clé this dans le corps de la fonction checkThis devient l'objet window, et parce que l'objet window a un autre attribut x ('. ceci est une propriété de la fenêtre' ), donc « ceci est une propriété de la fenêtre » apparaîtra.
Les deux exemples ci-dessus sont relativement faciles à comprendre, car tant que vous déterminez quel objet la fonction actuelle est appelée en tant que méthode (appelée par quel objet), vous pouvez facilement déterminer le point de cette variable actuelle.

this.x et apply(), call()
Grâce à call et apply, vous pouvez redéfinir l'environnement d'exécution de la fonction, c'est-à-dire le but de this, qui est très couramment utilisé dans certains candidatures.
Exemple 3 : call()

function changeStyle( type , value ){ 
this.style[ type ] = value; 
} 
var one = document.getElementByIdx( 'one' ); 
changeStyle.call( one , 'fontSize' , '100px' ); 
changeStyle('fontSize' , '300px'); //出现错误，因为此时changeStyle中this引用的是window对象，而window并无style属性。

Notez qu'il y a trois paramètres dans changeStyle.call(). Le premier paramètre est utilisé pour spécifier quel objet sera la fonction. appelé. . Un est spécifié ici, ce qui signifie que la fonction changeStyle sera appelée par un, donc ce point du corps de la fonction est le seul objet. Les deuxième et troisième paramètres correspondent aux deux paramètres formels type et valeur dans la fonction changeStyle. L'effet le plus courant que nous constatons est que la police de l'élément Dom devient 20px.

Exemple 4 : apply()

function changeStyle( type , value ){ 
this.style[ type ] = value; 
} 
var one = document.getElementByIdx( 'one' ); 
changeStyle.apply( one , ['fontSize' , '100px' ]); 
changeStyle('fontSize' , '300px'); //出现错误，原因同示例三

L'utilisation de apply est à peu près la même que celle de call, avec une seule différence apply n'accepte que deux paramètres. Le paramètre est identique à call , le deuxième paramètre doit être un tableau et les éléments du tableau correspondent aux paramètres formels de la fonction.

Ceci dans la fonction d'écoute d'événements

var one = document.getElementByIdx( 'one' ); 
one.onclick = function(){ 
alert( this.innerHTML ); //this指向的是one元素，这点十分简单.. 
};

Remarque : les variables globales dans js seront ajoutées dynamiquement à l'instance de Window en tant qu'attribut.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!