Une brève introduction à cette variable en JS

En JavaScript, cette variable est un mot-clé insaisissable. C'est très puissant. Cet article vous présentera en détail son utilisation en JavaScript. Les amis intéressés peuvent Pour référence,

. L'utilisation de this en JavaScript

La variable this en JavaScript est un mot-clé insaisissable. Cela peut être considéré comme très puissant. Comprendre pleinement les connaissances pertinentes à ce sujet nous aidera à écrire orienté objet<.> Programmes JavaScript en toute simplicité.
La chose la plus importante à propos de cette variable est de pouvoir clarifier à quel objet elle se réfère. 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,

Le code est le suivant :

var obj = {}; 

obj.x = 100; 

obj.y = function(){ alert( this.x ); }; 

obj.y(); //弹出 100

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

Exemple 2,

Le code est le suivant :

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'

Pourquoi « ceci est une propriété de la fenêtre » apparaît ici peut être un peu déroutant . Il existe une règle dans la portée des variables de JavaScript "Les variables globales sont des attributs 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 (quel objet est appelé), vous pouvez facilement déterminer le point actuel de cette variable.

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 ceci , ce qui est utile pour certaines applications. Il est très couramment utilisé. Exemple 3 : call()


Le code est le suivant :

Notez qu'il y a trois paramètres dans changeStyle.call(), le le premier paramètre est utilisé Spécifie l'objet sur lequel cette fonction sera appelée. 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.

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属性。

Exemple 4 : apply()


Le code est le suivant :

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 only Accepte deux paramètres. Le premier paramètre est identique à call. Le deuxième paramètre doit être un tableau. Les éléments du tableau correspondent aux paramètres formels de la fonction.

Utilisation dénuée de sens (bizarre) de ceci

Exemple 5 :


Le code est le suivant :

Comment atteindre l'objectif effet souhaité

var obj = { 

x : 100, 

y : function(){ 

setTimeout( 

function(){ alert(this.x); } //这里的this指向的是window对象，并不是我们期待的obj,所以会弹出undefined 

, 2000); 

} 

}; 

obj.y();

Le code est le suivant :

Ce

var obj = { 
x : 100, 
y : function(){ 
var that = this; 
setTimeout( 
function(){ alert(that.x); } 
, 2000); 
} 
}; 
obj.y(); //弹出100

code dans la fonction écoute d'événement est le suivant :

Remarque : js Les variables globales dans seront ajoutées dynamiquement à la fenêtre d'instance de Window en tant que propriétés.

var one = document.getElementByIdx( 'one' ); 

one.onclick = function(){ 

alert( this.innerHTML ); //this指向的是one元素，这点十分简单.. 

};

Il s'agit d'un mot-clé en js. La valeur de ceci changera à mesure que la fonction est utilisée dans différentes situations. Mais il y a toujours un principe, c'est-à-dire qu'il fait référence à l'objet qui appelle la fonction.

1. Appel de fonction pur.


Le code est le suivant :

En fait, voici la variable globale. Vous pouvez clairement comprendre en regardant l'exemple suivant. En fait, il s'agit de l'objet global Global.

function test() { 
this.x = 1; 
alert(x); 
} 
test();

Le code est le suivant :

2 En tant qu'appel de méthode, alors this fait référence à l'objet supérieur.

var x = 1; 
function test() { 
alert(this.x); 
} 
test();//1 

var x = 1; 
function test() { 
this.x = 0; 
} 
test(); 
alert(x);//0

Le code est le suivant :

function test() { 
alert(this.x); 
} 

var o = {}; 
o.x = 1; 
o.m = test; 
o.m(); //1

3 Appelé comme

constructeur
. La fonction dite constructeur consiste à générer un nouvel objet. Pour le moment, cela fait référence à cet objet.
Le code est le suivant :

function test() { 
this.x = 1; 
} 
var o = new test(); 
alert(o.x);//1

4. Appel d'application

cela pointe vers le premier paramètre d'application.


Le code est le suivant :

var x = 0; 
function test() { 
alert(this.x); 
} 

var o = {}; 
o.x = 1; 
o.m = test; 
o.m.apply(); //0 
o.m.apply(o);//1

Lorsque apply n'a pas de paramètres, il est représenté comme un objet global. La valeur est donc 0.

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!