Overview

I just learned the front-end not long ago, and I have some questions about the writing method of event monitoring in React.
The writing methods I know are:

• Pass the bind function in the constructor

• When defining a function, use the shear function definition

hanlde = (e)=> { }

• Use the shear function in the tag

this.handleClick(e)}> 

question

What I don’t understand is the third way of writing

this.handleClick(e)}> 

I personally think that arrow function and bind should be different ways of writing the same thing. But I wrote a 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 ？？？不理解

In getName3, 4, and 5, what getName5 returns is not inside? ?
Maybe the problem lies in my misunderstanding of arrow functions and bind?
Hope to get guidance from seniors

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; }

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