关于React事件回调函数bind(this)

故事：我一直很疑惑一件事情，那就是事件的绑定（react场景中的ES6 Class 语法下），比如 onClick、onChange 的事件处理函数必须这样写（React 在函数型组件 或者是类组件 中绑定事件的时候，不会进行 this 自动绑定，需要手动进行 this 的绑定。）

bind:

<button onClick={this.handleClick(this)}>删除</button>复制代码

或者在 constructor 函数中声明

constructor() {
    super()
    this.handleClick = this.handleClick.bind(this)
}
handleClick() {

}
render() {
    return <button onClick={this.handleClick}>test</button>;
}复制代码

或者箭头函数 形式1

handleClick() {
    console.log(this)
}
render() {
    return <button onClick={() => this.handleClick()}>test</button>
}复制代码

或者箭头函数 形式2

handleClick = () => {
   
}
render() {
    return <button onClick={this.handleClick}>test</button>
}复制代码

郁闷 

为什么要 bind 一下 this 呢?这样真的很不舒服？

从this说起

1）默认绑定>

    function fn() {
        console.log(this)
        //Window 
    }

    fn()
复制代码

注：this 的指向默认是全局作用域，即 window ,当然是在非严格模式下。在严格模式下就会是 undefined

"use strict"
function fn() {
    console.log(this)
    //undefined
}

fn()复制代码

2)隐式绑定

function fn() {
    console.log(this)
    //{fn: ƒ}
    console.log(this.name)
    //你我贷
}

var obj = {
    "name": "你我贷",
    "fn": fn
}
obj.fn()复制代码

注：函数存在对象obj中，并且函数被obj调用，因此this指向obj，特别需要注意的是如下

    function fn() {
        console.log(this)
        //Window
    }
    var obj = {
        "name": "你我贷",
        "fn": fn
    }
    var nwd = obj.fn;
    nwd()

复制代码

此时，函数 nwd 是对 obj.fn 的一个引用，严格来说，跟对象 obj 没有任何关系，此时 nwd 的执行就可以运用默认绑定规则，所以它的上下文this 指向 window

3）显示绑定

显示绑定是通过 call 和 apply,bind 方法，强制将 this 指向传入的对象，这种方式也叫做硬绑定

function fn() {
    console.log(this)
    //{name: "你我贷", fn: ƒ}
    console.log(this.name)
    //你我贷
}

var obj = {
    "name": "你我贷",
    "fn": fn
}
fn.call(obj)复制代码

4) new 绑定 构造函数中的this

function Fn(name) {
    this.name = name
}
var fn1 = new Fn("你我贷")
console.log(fn1.name)
//你我贷复制代码

注：这是一个非常简单的构造函数书写方式,可以通过new的方式调用来生成实例,构造函数中的this指向构造函数所创造的实例,当通过new方法调用构造函数的时候，构造函数内部的this就指向这实例，并将相应的属性和方法"生成"给这个实例。通过这个方法，生成的实例才能够获取属性和方法。

因此react中

<button onClick={this.handleClick.bind(this)}>test</button>复制代码

因为Class 语法中并没有默认做一个当前 this 绑定，所以会丢失 this 的绑定，在严格模式下，this 是 undefined，bind(this) 之后会创建一个新的函数，并且 this 绑定在当前想要的地方

或者可以使用箭头函数，箭头函数的特点是， 能够自动绑定定义此函数作用域的 this

<button onClick={(e) => this.handleClick(e)}>test</button复制代码