javascript - Problème avec la fonction de flèche d'écoute d'événement Click dans React?

Question

Aperçu

Je viens d'apprendre le front-end et j'ai quelques questions sur la méthode d'écriture de surveillance des événements dans React.
Les méthodes d'écriture que je connais sont :

• Passez la fonction bind dans le constructeur

• Lors de la définition d'une fonction, utilisez la définition de la fonction de cisaillement

hanlde = (e)=> {

}

Utilisez la fonction coupe-tête dans le

• tag

<button onClick={(e)=>this.handleClick(e)}>

</button>

Question

Ce que je ne comprends pas, c'est la troisième façon d'écrire

<button onClick={(e)=>this.handleClick(e)}>
</button>

Personnellement, je pense que la fonction de flèche et la liaison devraient être des manières différentes d'écrire la même chose. Mais j'ai écrit une démo

var name = 'outside'

var obj = {
  name: 'inside',
  getName1: function() {
    return function() {
      return this.name;
    };
  },
  getName2: function() {
    var func = function(s) {
      return function() {
        return s;
      }
    };
    return func(this.name);
  },
  getName3: function () {
    var func = ()=> this.name;
    return func;
  },
  getName4: function () {
    var func = function() {
      return this.name;
    };
    func = func.bind(this);
    return func;
  },
  getName5 :function () {
    var func = function() {
      return this.name;
    };
    var func2 = ()=>func();
    return func2;
  }
};
console.log(obj.getName1()());//undefine或outside
console.log(obj.getName2()());//inside 通过闭包解决
console.log(obj.getName3()());//inside 通过箭头函数
console.log(obj.getName4()());//inside 通过bind函数
console.log(obj.getName5()());//undefine或outside ？？？不理解

Dans getName3, 4 et 5, ce que getName5 renvoie n'est pas à l'intérieur ? ?
Peut-être que le problème réside dans mon incompréhension des fonctions de flèche et de liaison ?
J'espère recevoir des conseils des seniors

Answer 1

La fonction flèche en 5 ne lie pas ceci lors de l'appel de func, donc celui-ci de func pointe vers la fenêtre
Changez-le simplement par ceci

  getName5 :function () {
    var func = function() {
      return this.name;
    }.bind(this);
    var func2 = ()=>func();
    return func2;
  }

Ou comme ça :

  getName5 :function () {
    var func = () => this.name;
    var func2 = () => func();
    return func2;
  }

Answer 2

Les fonctions nouvellement définies ont leur propre valeur this. En mode non strict dans le navigateur, ceci pointe vers la fenêtre. Si une fonction est appelée en tant que méthode objet, cela pointe vers l'objet sur lequel elle a été appelée. Dans l'exemple, la méthode objet getName5()中的函数func， 并非作为obj est appelée, donc elle pointe vers la fenêtre. Rien à voir avec les fonctions fléchées.

var name = 'outside'
var obj = {
  name: 'inside',
  getName: function () {
    var func = function () {
      return this.name
    }
    return func()
  }
}
console.log(obj.getName()) // outside

Answer 3

@Xeira a raison. Lorsque la fonction flèche est définie, celle-ci dans la portée lexicale est liée à sa portée lexicale périphérique, tandis que les fonctions ordinaires sont spécifiquement liées lorsqu'elles doivent être appelées. Il est recommandé de lire l'explication à ce sujet dans You-Dont-Know-JS, c'est très clair