bind:
复制代码
或者在 constructor 函数中声明
constructor() { super() this.handleClick = this.handleClick.bind(this)}handleClick() {}render() { return ;}复制代码 或者箭头函数 形式1
handleClick() { console.log(this)}render() { return }复制代码 或者箭头函数 形式2
handleClick = () => { }render() { return }复制代码 郁闷
为什么要 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中
复制代码
因为Class 语法中并没有默认做一个当前 this 绑定，所以会丢失 this 的绑定，在严格模式下，this 是 undefined，bind(this) 之后会创建一个新的函数，并且 this 绑定在当前想要的地方
或者可以使用箭头函数，箭头函数的特点是， 能够自动绑定定义此函数作用域的 this