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

·  阅读 2885
故事:我一直很疑惑一件事情,那就是事件的绑定(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复制代码


分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改