Exemples d'utilisation de cette règle et de cet objet en JavaScript

Si vous souhaitez déterminer quelles sont les règles, il existe plusieurs règles pour déterminer ce que c'est dans la fonction. Déterminer de quoi il s’agit est en fait très simple. La règle générale est de déterminer cela lorsqu'une fonction est appelée en vérifiant où elle a été appelée. Il suit ces règles, décrites ensuite par ordre de priorité.

Règles

1. Si vous utilisez le nouveau mot-clé lors de l'appel d'une fonction, alors celui-ci dans la fonction est un tout nouvel objet.

function ConstructorExample() {
  console.log(this);
  this.value = 10;
  console.log(this);
}
new ConstructorExample();
// -> {}
// -> { value: 10 }

2. Si vous utilisez apply, call ou bind pour appeler une fonction, alors ceci dans la fonction est l'objet transmis en paramètre.

function fn() {
  console.log(this);
}
var obj = {
  value: 5
};
var boundFn = fn.bind(obj);
boundFn();   // -> { value: 5 }
fn.call(obj); // -> { value: 5 }
fn.apply(obj); // -> { value: 5 }

3. Si la fonction est appelée en tant que méthode, c'est-à-dire si la fonction est appelée en utilisant la notation par points, alors c'est l'objet qui a cette fonction comme attribut. En d’autres termes, lorsqu’un point se trouve à gauche d’un appel de fonction, il s’agit de l’objet situé à gauche du point.

var obj = {
  value: 5,
  printThis: function() {
    console.log(this);
  }
};
obj.printThis(); // -> { value: 5, printThis: ƒ }

4. Si la fonction est appelée comme une fonction pure, c'est-à-dire qu'elle est appelée sans aucune des conditions ci-dessus, alors il s'agit de l'objet global. Dans un navigateur, il s'agit de l'objet window.

function fn() {
  console.log(this);
}
// 如果在浏览器里调用：
fn(); // -> Window {stop: ƒ, open: ƒ, alert: ƒ, ...}

Notez que cette règle est en fait la même que la troisième règle. La différence est que les fonctions non déclarées comme méthodes deviendront automatiquement des attributs de la fenêtre d'objet globale. Il s’agit donc en réalité d’un appel de méthode implicite. Lorsque nous appelons fn(), le navigateur l'interprètera comme window.fn(), c'est donc window.

console.log(fn === window.fn); // -> true

5. Si plusieurs des règles ci-dessus s'appliquent, celle avec la priorité la plus élevée définira cette valeur.

6. S'il s'agit d'une fonction fléchée dans ES2015, alors elle ignorera toutes les règles ci-dessus et recevra la portée la contenant comme valeur lors de sa création. Pour déterminer ce que c'est, remontez simplement d'une ligne à partir de l'endroit où vous avez créé la fonction flèche et voyez ce que c'est là. La valeur de this dans une fonction flèche est la même.

const obj = {
  value: 'abc',
  createArrowFn: function() {
    return () => console.log(this);
  }
};
const arrowFn = obj.createArrowFn();
arrowFn(); // -> { value: 'abc', createArrowFn: ƒ }

En repensant à la troisième règle, lorsque nous appelons obj.createArrowFn(), ceci dans createArrowFn est obj, car il s'agit d'un appel de méthode. Par conséquent, obj sera lié à cela dans arrowFn. Si nous créons une fonction de flèche dans la portée globale, alors cette valeur sera window.

Application des règles

Regardons un exemple de code et appliquons ces règles. Essayez-le et voyez si vous pouvez comprendre ce que c'est dans différents appels de fonction.

Déterminer quelle règle est appliquée

var obj = {
  value: 'hi',
  printThis: function() {
    console.log(this);
  }
};
var print = obj.printThis;
obj.printThis(); // -> {value: "hi", printThis: ƒ}
print(); // -> Window {stop: ƒ, open: ƒ, alert: ƒ, ...}

obj.printThis() appartient à la troisième règle, l'appel de méthode. print(), en revanche, relève de la règle 4, un pur appel de fonction. Pour print(), nous n'avons pas utilisé de notation new, bind/call/apply ou point lors de l'appel, cela correspond donc à la règle 4, c'est la fenêtre d'objet globale.

Lorsque plusieurs règles s'appliquent

Lorsque plusieurs règles s'appliquent, utilisez la règle ayant la priorité la plus élevée dans la liste.

var obj1 = {
  value: 'hi',
  print: function() {
    console.log(this);
  },
};
var obj2 = { value: 17 };

Si la règle 2 et la règle 3 s'appliquent en même temps, la règle 2 prévaut.

obj1.print.call(obj2); // -> { value: 17 }

Si la règle 1 et la règle 3 s'appliquent en même temps, la règle 1 prévaut.

new obj1.print(); // -> {}

Bibliothèques

Certaines bibliothèques lient parfois intentionnellement cette valeur à certaines fonctions. Habituellement, la valeur la plus utile est liée à cela dans une fonction. Par exemple, jQuery le lie à un élément DOM et déclenche un événement dans un rappel. Si une bibliothèque a une valeur this qui n'est pas conforme aux règles ci-dessus, veuillez lire attentivement la documentation de la bibliothèque. Elle est probablement liée à l'aide de bind.

Cet objet est lié en fonction de l'environnement d'exécution de la fonction lorsque la fonction est en cours d'exécution. Permettez-moi de vous présenter une analyse détaillée de l'utilisation de cet objet dans js. 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. :

Fonction globale

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 le global. environnement, qui est l'objet global Window appelé la fonction. À ce stade, cela pointe vers la méthode objet Window

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 donnons ici l'exemple. Ils sont tous relativement simples et faciles à comprendre. La prochaine étape est intéressante :

//例子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 utiliserons ceci. La fonction est assignée à cFun, puis cFun() est appelé 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 lors de l'examen)

appel C'est un cliché de dire « postuler », mais je vais le présenter un peu car j'ai peur que les nouveaux étudiants n'y aient pas été exposés (en fait juste pour inventer quelques mots). Prenons l'exemple de call, la syntaxe est la suivante

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

Comment utiliser cette méthode ? Voir l'exemple ci-dessous :

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

在这里我们就可以看出call函数的意思了:指定一个对象o1去调用其他对象o2的方法，此时this对象指向o1

好了，那为什么前面我们说通常呢？因为，这里的thisArg是可以指定为null和undefined的。请看：

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

   

此时的this指向全局对象Window

箭头函数

es6中的箭头函数现在也用的比较频繁，但是有个需要注意的点是：

函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。

其实出现这种情况的根本原因是:箭头函数没有this对象，所以箭头函数的this就是外层代码的this

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

   

这个例子和前面例子2是基本一样的，只是把普通函数改写成箭头函数，但是此时的this对象已经指向了外层的Window。

考虑到这一点可能不好理解，我们再看几个例子:

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

这个例子里，g的getThis写法就和之前的例子3一样，由于函数在全局环境中运行，所以此时this指向Window；h的getThis使用了箭头函数，所以this指向了外层代码块的this所以，此时this指向的是h。

总结

一般情况下this对象指向调用函数的对象，全局环境中执行函数this对象指向Window

在call和apply函数中this指向指定的对象，如果指定的对为undefined或者null，那么this对象指向Window

在箭头函数中，this对象等同于外层代码块的this。

相关推荐：

JS中的this、apply、call、bind实例分享

函数调用的不同方式及this的指向详解

html的标签中的this应该如何使用

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!