Introduction détaillée à l'utilisation de cet objet en js

Cet article présente principalement l'analyse détaillée de l'utilisation de cet objet en js. Les amis qui en ont besoin peuvent l'apprendre et le partager.

Cet objet est lié en fonction de l'environnement d'exécution de la fonction lorsque la fonction est en cours d'exécution.

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 function

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 exécutée dans l'environnement global, c'est-à-dire 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

Nous y sommes. Les exemples donnés 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 différent de l'exemple précédent lors de l'exécution de c.getFunc(), un. La fonction anonyme est d'abord renvoyée. Nous avons attribué cette fonction à cFun, puis avons appelé 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 ici les 2 mots habituels, qui sont requis dans 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 quelques mots). , la syntaxe est la suivante

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

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

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

Ici on peut voir la signification de la fonction d'appel : spécifier un objet o1 pour appeler la méthode d'un autre objet o2, à ce moment cet objet pointe vers o1

D'accord, alors pourquoi avons-nous dit habituellement avant ? Parce que thisArg ici peut être spécifié comme nul et indéfini. Veuillez consulter :

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

Ceci pointe actuellement vers l'objet global Window

Fonction flèche

La fonction flèche dans es6 est désormais également utilisé à des fins de comparaison 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

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

Ceci L'exemple est fondamentalement le même que l'exemple précédent 2. La même chose, il suffit de réécrire la fonction ordinaire dans une fonction fléchée, mais à ce moment-là, cet objet pointe déjà vers la fenêtre extérieure.

Considérant que cela peut être difficile à comprendre, regardons quelques exemples supplémentaires :

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

Dans cet exemple, la méthode d'écriture de g's getThis est la même que dans l'exemple précédent 3 . Puisque la fonction est dans Elle s'exécute dans l'environnement global, donc cela pointe vers Window à ce moment-là ; h's getThis utilise la fonction flèche, donc cela pointe vers ceci du bloc de code externe, donc cela pointe vers h à ce moment.

Résumé

Généralement, cet objet pointe vers l'objet de la fonction appelante Dans l'environnement global, lorsque la fonction est exécutée, cet objet pointe vers la Fenêtre<.>

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 la fonction flèche, cet objet est équivalent à. ceci

du bloc de code externe et puis toujours Cela se termine de la même manière à chaque fois. S'il y a des erreurs dans le contenu, veuillez le signaler. Si cela vous est utile, veuillez l'aimer et l'enregistrer. vous pour votre soutien à Script House.

Ce qui précède est ce que j'ai compilé pour vous. J'espère que cela vous sera utile à l'avenir.

Articles connexes :

Comment express+multer implémente la fonction de téléchargement d'images

Comment implémenter la fixation de l'en-tête de tableau et de la première colonne dans Vue

Comment utiliser le composant d'annotation d'image dans jquery.picsign

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!