Explication détaillée des exemples d'utilisation de cet objet en js

Cet objet est lié en fonction de l'environnement d'exécution de la fonction lorsque la fonction est en cours d'exécution. Cet article présente principalement une analyse détaillée de l'utilisation de cet objet dans js. Les amis qui en ont besoin peuvent l'apprendre et le partager. J'espère que cela pourra aider tout le monde.

En fait, l'essence de cette phrase est que celui qui appelle la fonction, cela indique à qui

Plus précisément, il y a généralement les situations suivantes :

Global fonction

Dans l'environnement global, cela pointe vers Window

//例子1
 function A() {
 console.log(this)
 }
 A();//Window

L'exemple ci-dessus est très simple, la fonction A est dans l'environnement global Exécuté dans l'environnement, c'est-à-dire que l'objet global Window appelle la fonction. À ce stade, cela pointe vers Window

Méthode objet

Lorsqu'il est appelé en tant que méthode objet, cela pointe vers l'objet qui a appelé la méthode

//例子2
var b = {
 getThis:function(){
  console.log(this)
 }
}
b.getThis()//b

Les exemples que nous avons donnés jusqu'à présent sont relativement simples et faciles à comprendre. Le suivant est intéressant :

//例子3
 var c = {
 getFunc:function(){
  return function(){
  console.log(this)
  }
 }
 }
 var cFun = c.getFunc()
 cFun()//Window

Cet exemple est similaire au précédent : un exemple est différent. Lors de l'exécution de c.getFunc(), une fonction anonyme est d'abord renvoyée à cFun, puis appelons cFun() dans l'environnement global. , donc cela pointe toujours vers Window pour le moment.

Et si nous devons renvoyer un objet c ici ? Nous avons dit au début que l'objet this est déterminé lorsque la fonction est exécutée. Dans l'exemple 3, lorsque c.getFunc() est exécuté, l'objet this pointe toujours vers c, nous n'avons donc qu'à conserver this pour ce qui précède. Le code est légèrement modifié :

//例子4
 var c = {
 getFunc:function(){
  var that = this //在这里保留住this
  return function(){
  console.log(that)
  }
 }
 }
 var cFun = c.getFunc()
 cFun()//c

C'est pourquoi on peut souvent voir var self = this ou var that = this dans certains codes.

appeler et postuler

À ce stade, l'objet this pointe généralement vers la valeur this spécifiée dans la fonction (notez qu'il y a généralement 2 mots ici , qui sera testé lors de l'examen)

Appeler et postuler sont des clichés, mais je vais leur donner une brève introduction au cas où les nouveaux étudiants n'y auraient pas été exposés (en fait juste pour inventer le mot count). Prenons call comme exemple, la syntaxe est la suivante

fun.call(thisArg, arg1, arg2, ...)

Comment utiliser cette méthode, regardez l'exemple suivant :

//例子5
var d = {
 getThis:function(){
  console.log(this)
 }
}
var e = {
 name:'e'//(给e写个`name`属性只是因为觉得孤零零的太难看了~~)
}
d.getThis.call(e)//e

Ici, nous pouvons voir la signification de la fonction d'appel Maintenant : Spécifiez un objet o1 pour appeler la méthode d'un autre objet o2 A ce moment, cet objet pointe vers o1

<.> Ok, alors pourquoi on dit normal avant ? Parce que thisArg ici peut être spécifié comme nul et indéfini. Veuillez consulter :

À ce stade, cela pointe vers l'objet global Window

//例子6
var d = {
 getThis:function(){
  console.log(this)
 }
}
 d.getThis.call(null)//Window
 d.getThis.call(undefined)//Window

Fonction flèche

es6 La fonction flèche dans est désormais utilisée plus fréquemment, mais une chose à noter est :

L'objet this dans le corps de la fonction est l'objet où il est défini, pas l'objet où il est utilisé.

En fait, la raison fondamentale de cette situation est : la fonction flèche n'a pas cet objet, donc le ceci de la fonction flèche est le ceci du code externe

Cet exemple est fondamentalement le même que l'exemple 2 précédent, sauf que la fonction ordinaire est réécrite en fonction flèche, mais à ce moment-là, cet objet pointe déjà vers la fenêtre extérieure.

//例子7
 var f = {
  getThis:()=>{
   console.log(this)
  }
 }
 f.getThis()//Window

Considérant que cela n'est peut-être pas facile à comprendre, regardons quelques exemples supplémentaires :

Dans cet exemple, g's getThis est écrit tout comme l'exemple 3 précédent, puisque la fonction s'exécute dans l'environnement global, cela pointe vers Window à ce moment-là ; getThis de h utilise la fonction flèche, donc cela pointe vers celui du bloc de code externe. Par conséquent, cela pointe vers h. à ce moment.

//例子8
 var g = {
 getThis:function(){
  return function(){console.log(this)}
 }
 }
 var h = {
 getThis:function(){
  return ()=> console.log(this)
 }
 }
 g.getThis()()//Window
 h.getThis()()//h

Résumé

Généralement, cet objet pointe vers l'objet qui appelle la fonction, et dans l'environnement global lorsque la fonction est exécutée, cet objet pointe vers Window

Dans les fonctions d'appel et d'application, cela pointe vers l'objet spécifié Si la paire spécifiée est indéfinie ou nulle, alors cet objet pointe vers Window

Dans les fonctions fléchées. , cet objet est équivalent au bloc de code externe this

Recommandations associées :

Exemples détaillés de la différence entre this et event en js

Analyse des bugs causés par cela dans JS

Analyse complète de cela en JavaScript

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!