由于class 的方法默認(rèn)不會(huì)綁定this,如果你忘記綁定 this,當(dāng)你調(diào)用這個(gè)方法的時(shí)候 this的值為 undefined。如下:
通常情況下如果不是直接調(diào)用,應(yīng)該為方法綁定this。綁定方式有如下幾種:
1、在構(gòu)造函數(shù)中使用bind綁定this(官方推薦的綁定方式,也是性能最好的方式,只會(huì)生成一個(gè)方法實(shí)例,并且綁定一次之后如果多次用到這個(gè)方法也不需要再綁定,不過即使不用到state,也需要添加類構(gòu)造函數(shù)來綁定this,代碼量多一點(diǎn))
2、在調(diào)用的時(shí)候綁定this(寫法比較簡單,當(dāng)組件中沒有state的時(shí)候就不需要添加類構(gòu)造函數(shù)來綁定this,但是這樣每次渲染App時(shí)都會(huì)創(chuàng)建不同的回調(diào)函數(shù),當(dāng)該方法作為屬性傳遞給子組件時(shí),子組件可能會(huì)進(jìn)行額外的重新渲染,有一定的性能影響)
2.1 使用bind
2.2 使用箭頭函數(shù)
3、 使用實(shí)驗(yàn)性的 public class fields 語法(利用屬性初始化語法,將方法初始化為箭頭函數(shù),在創(chuàng)建函數(shù)的時(shí)候就綁定了this,不需要在類構(gòu)造函數(shù)中綁定,調(diào)用的時(shí)候不需要再作綁定,但目前仍然是實(shí)驗(yàn)性語法,需要用babel轉(zhuǎn)譯)
4、使用lodash的bind和es7的@裝飾器來完成this綁定(目前在項(xiàng)目上使用的一種綁定方式,簡單方便)
①需要讓項(xiàng)目支持裝飾器寫法
首先安裝依賴
然后在.babelrc.js文件中進(jìn)行相關(guān)配置
②需要在項(xiàng)目中安裝lodash相關(guān)依賴 ,這里我們用到的是lodash中的lodash-decorators
安裝之后就可以在代碼中進(jìn)行引用,然后結(jié)合@裝飾器進(jìn)行bind操作,但是發(fā)現(xiàn)會(huì)有警告信息,鼠標(biāo)放到上面可以看到詳細(xì)的提示信息
針對上面問題的解決方法是在項(xiàng)目根目錄下新建jsconfig.json文件,這個(gè)文件主要是用來指定根文件和JavaScript語言服務(wù)提供的功能選項(xiàng),根據(jù)上面的警告提示信息在文件中進(jìn)行相關(guān)配置即可
③然后就可以成功完成this綁定啦