javascript - React中点击事件监听箭头函数的问题？

Question

概述

刚学前端不久，对于React中的事件监听写法有所疑问.
我知道的写法有：

• 在构造函数中通过bind函数

• 定义函数的时候采用剪头函数定义

hanlde = (e)=> {

}

• 标签中使用剪头函数

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

</button>

问题

我不理解的是第三种写法

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

我个人认为箭头函数和bind应该是同一种东西的不同写法。但是我写了一个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 ？？？不理解

在getName3、4、5中，getName5返回的居然不是inside？？
问题可能出在我对于箭头函数以及bind的理解有错误么？
希望能够得到前辈指点

Answer 1

5中箭头函数调用func的时候没有绑定this，所以func的this指向的是window
换成这样就可以了

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

或者这样：

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

Answer 2

新定义的函数都有自己的 this 值，在浏览器中非严格模式下，这个 this 指向 window。如果函数作为对象方法被调用，则其 this 指向调用它的对象。示例中getName5()中的函数func， 并非作为obj对象方法被调用，因此，它的 this 指向 window。与箭头函数无关。

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 说的不错，箭头函数定义时词法内的this就绑定在其外围词法作用域了，而普通函数需要调用时才会具体绑定。推荐去看看You-Dont-Know-JS中关于this的讲解，很是明了