javascript - Masalah dengan fungsi anak panah mendengar acara klik dalam React?

Question

Gambaran keseluruhan

Saya baru belajar front-end dan saya ada beberapa soalan tentang kaedah penulisan pemantauan acara dalam React.
Kaedah penulisan yang saya tahu ialah:

• Luluskan fungsi bind dalam pembina

• Apabila mentakrifkan fungsi, gunakan definisi fungsi ricih

hanlde = (e)=> {

}

Gunakan fungsi potong kepala dalam tag

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

</button>

Soalan

Apa yang saya tidak faham ialah cara penulisan yang ketiga

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

Saya secara peribadi berpendapat fungsi anak panah dan bind sepatutnya berbeza cara menulis perkara yang sama. Tetapi saya menulis demo

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 ？？？不理解

Dalam getName3, 4 dan 5, apakah yang dikembalikan oleh getName5 tidak ada di dalamnya? ?
Mungkin masalahnya terletak pada salah faham saya tentang fungsi anak panah dan mengikat?
Semoga mendapat tunjuk ajar dari senior

Answer 1

Fungsi anak panah dalam 5 tidak mengikat ini apabila memanggil func, jadi fungsi ini menghala ke tetingkap
Tukar sahaja kepada ini

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

Atau ini:

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

Answer 2

Fungsi yang baru ditakrifkan mempunyai nilai ini sendiri Dalam mod tidak ketat dalam penyemak imbas, ini menghala ke tetingkap. Jika fungsi dipanggil sebagai kaedah objek, ini menunjukkan kepada objek di mana ia dipanggil. Dalam contoh, kaedah objek getName5()中的函数func， 并非作为obj dipanggil, oleh itu, ini menunjuk ke tetingkap. Tiada kaitan dengan fungsi anak panah.

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 betul Apabila fungsi anak panah ditakrifkan, ini dalam skop leksikal terikat kepada skop leksikal periferinya, manakala fungsi biasa terikat secara khusus apabila ia perlu dipanggil. Adalah disyorkan untuk membaca penjelasan tentang ini dalam You-Dont-Know-JS, ia sangat jelas