Qu'est-ce que cela indique dans la méthode de la flèche es6 ?

Dans es6, l'objet this dans le corps de la fonction flèche est l'objet pointé par la portée dans laquelle la fonction est définie. Le point de this dans la fonction arrow est le point de l'objet dans le contexte. Parfois, s'il n'y a pas d'objet de contexte, cela pointe vers la fenêtre ; même call, apply, bind et d'autres méthodes ne peuvent pas changer le point de this ; fonction flèche.

L'environnement d'exploitation de ce tutoriel : système Windows 7, ECMAScript version 6, ordinateur Dell G3.

Je pense que la fonction flèche est utilisée à de nombreux endroits dans le développement quotidien car elle est très concise et très lisible, mais son plus grand avantage est en fait qu'elle résout le problème de ce pointage des fonctions anonymes et aide à encapsuler les fonctions de rappel.

Permettez-moi d'abord de résumer :

L'objet this dans le corps de la fonction flèche est l'objet pointé par la portée dans laquelle la fonction est définie, et non l'objet pointé par la portée dans laquelle elle est utilisée.

Dans la fonction fléchée ES6, this

• (1) est par défaut le point this de l'objet dans le contexte lorsqu'il est défini. Autrement dit, le point de ceci dans la fonction flèche ES6 est le point de l'objet dans le contexte. Parfois, s'il n'y a pas d'objet contextuel, cela pointe vers la fenêtre

• (2) Même appeler, appliquer, lier et. les autres méthodes ne peuvent pas changer le point de la fonction flèche

Ce qui suit est un exemple d'une fonction ordinaire :

var name = 'window'; // 其实是window.name = 'window'

var A = {
   name: 'A',
   sayHello: function(){
      console.log(this.name)
   }
}

A.sayHello();// 输出A

var B = {
  name: 'B'
}

A.sayHello.call(B);//输出B

A.sayHello.call();//不传参数指向全局window对象，输出window.name也就是window

Comme vous pouvez le voir ci-dessus, la méthode sayHello est définie dans l'objet A lorsque nous l'utilisons. la méthode d'appel, pointez-la vers l'objet B, et finalement sortez B, on peut conclure que, Le this de sayHello n'est lié à l'objet que lorsqu'il est utilisé.

Modifiez-le :

var name = 'window'; 
var A = {
   name: 'A',
   sayHello: () => {
      console.log(this.name)
   }
}
A.sayHello();// 还是以为输出A ? 错啦，其实输出的是window

Je crois que la plupart des étudiants feront des erreurs ici, pensant que direBonjour est lié à A, mais en fait il est lié à la fenêtre Alors pourquoi ?

Au début, je me suis concentré sur "l'objet pointé par la portée de cette fonction". La portée fait référence à l'intérieur de la fonction. La portée de la fonction flèche ici, qui est sayHello, est en fait l'environnement js le plus externe. . Parce qu'il n'y a pas d'autres fonctions enveloppées ; et que l'objet pointé par l'environnement js le plus externe est l'objet winodw, donc ceci pointe ici vers l'objet window.

Comment le changer pour lier A pour toujours :

var name = 'window'; 

var A = {
   name: 'A',
   sayHello: function(){
      var s = () => console.log(this.name)
      return s//返回箭头函数s
   }
}

var sayHello = A.sayHello();
sayHello();// 输出A 

var B = {
   name: 'B';
}

sayHello.call(B); //还是A
sayHello.call(); //还是A

OK, de cette façon, il pointera toujours vers l'objet A. Analysons-le en fonction de « l'objet pointé par la portée où se trouve la fonction » :

• .

  This La portée où se trouve la fonction : La portée où se trouve la fonction fléchée s est sayHello, car sayHello est une fonction.

• L'objet pointé par le scope : A. L'objet pointé par sayHello est A.

Donc dans la fonction flèche s, cela pointe vers A~~

----------------terminer-------------

Enfin, il y a quelques autres points à noter lors de l'utilisation des fonctions fléchées. Elles ne peuvent pas être utilisées comme constructeurs, c'est-à-dire que la nouvelle commande ne peut pas être utilisée, sinon une erreur sera générée.

• Vous ne pouvez pas utiliser l'objet arguments, qui n'existe pas dans le corps de la fonction. Si vous souhaitez l'utiliser, vous pouvez utiliser le paramètre rest à la place.

• La commande rendement ne peut pas être utilisée, donc les fonctions fléchées ne peuvent pas être utilisées comme fonctions générateur.

• 【Apprentissage recommandé :

  Tutoriel vidéo 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!