這是一個標準的類組件

import React,{Component} from 'react'; class View extends Component{constructor(props){super(props)}state={} //寫在這里跟寫在constructor中一樣，都可以起到初始化的效果,并且可以省去thisfn(){}fn1(){}render(){return(<div><button onClick={this.fn}>按鈕</button><ul>{this.fn1()}</ul></div>) } }

接下來是this指向的問題

主要分三個模塊：

• constructor：this指向new生成的實例，這里也就是我們的View組件了

• render()：this指向也是組件實例View

• 方法：

  fn(): this指向是undefind fn1(): this指向是組件實例

為什么fn()的指向是undefined？

分析：
1、我們知道調用都是有（）的，所以這里只是把onClick指向堆中的fn，調用時也就沒有實例————所以this會指向window
2、使用babel編譯后就是嚴格模式（嚴格模式下this不能指向window)，所以this就會變為undefined

改變方法this指向的4種方法

在contructor寫入this.fn=this.fn.bind(this)

會在實例的屬性中添加一個fn屬性，指向改變this指向之后的fn(),原型鏈的的fn()并無變化。
使用bind是因為不會自執行，而call，apply都會自執行

方法使用箭頭函數的寫法fn=()=>{}

箭頭函數this指向特性

調用時使用箭頭函數，可以傳參()=>{this.fn("text")}

調用時使用bind改變this指向，也可以傳參this.fn.bind(this,'text')

總結

以上是生活随笔為你收集整理的react中类组件this指向的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。