react組件中的this的一點理解

剛學不久，本身的一點理解，不對的地方你們使勁噴，但你要告訴我對的

import React, { Component } from 'react'

class Demo extends Component{
    handleClick1 = () =>{
        console.log(this)
    }
    handleClick2(){
        console.log(this)
    }
    render(){
        return (
            <div> <button onClick={console.log(this)}>button1</button> <button onClick={this.handleClick1}>button2</button> <button onClick={this.handleClick2}>button3</button> <button onClick={()=>this.handleClick2()}>button4</button> <button onClick={this.handleClick2.bind(this)}>button5</button> </div>
        )
    }
}
export default Demo
複製代碼

• button1

  不用多說直接執行, this 就是組件自己

• button2

  this.handleClick1 指向當前組件的 handleClick1 這個箭頭函數, 箭頭函數內部訪問的都是來自外部的 this 值, 此時的 this 由箭頭函數 handleClick1 直接獲取的組件自己

• button3

  this.handleClick2 指向當前組件的 handleClick2 這個函數, 而此時 this.handleClick2 中這個 . 點返回的不是一個函數，而是一種特殊的引用類型的值(this,"handleClick2",true), 此時再去調用 handleClick2 會將引用類型做爲一個總體丟棄, 只獲取 this.handleClick2（一個函數）的值進行傳遞, 失去了 this

• button4

  箭頭函數首先訪問了 render 函數傳遞來的 this ，handleClick2 經過 . 接收了這個 引用類型 ，而後當在引用類型上用 () 調用時，handleClick2 接收到這個對象和它的方法的全部信息，而且設定正確的 this 值, 而後再執行

• button5

  使用 bind() 方法建立一個新的函數, 將 handleClick2 的 this 設置爲給定的 this (這裏就是 render 函數傳來的 this)