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)=> {

}

<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