最近寫專案遇到很多this指向的問題，今天來寫一下我總結的this指向
看了很多文章，之前也在私下總結過，對于正常函式，誰呼叫的它，this就指向誰，而箭頭函式沒有this，它的this指向一般就是背景關系中，與誰呼叫它沒關系，
但是在Vue實體中，methods中如果用的是正常函式，那么它的this就指向Vue實體；如果是箭頭函式，this就指向window物件，
在Vue的官方檔案是這么解釋的：
methods 將被混入到 Vue 實體中，可以直接通過 VM 實體訪問這些方法，或者在指令運算式中使用，方法中的
this自動系結為 Vue 實體，注意，不應該使用箭頭函式來定義 method 函式 (例如
plus: () => this.a++)，理由是箭頭函式系結了父級作用域的背景關系，所以this將不會按照期望指向 Vue 實體，this.a將是 undefined，
1. Vue中生命周期鉤子和自定義方法中的this指向當前的 Vue 實體：
生命周期鉤子的 this 背景關系指向呼叫它的 Vue 實體
所有的生命周期鉤子自動系結 this 背景關系到實體中，因此你可以訪問資料，對 property 和方法進行運算，這意味著你不能使用箭頭函式來定義一個生命周期方法 (例如 created: () => this.fetchTodos())，這是因為箭頭函式系結了父背景關系，因此 this 與你期待的 Vue 實體不同，this.fetchTodos 的行為未定義，
2. Vue 中回呼函式中的 this：
- 若回呼函式為匿名函式，非嚴格模式下指向 window,嚴格模式下為 undefined，
- 若回呼函式為自定義方法，則 this 指向 Vue 實體，
- 若回呼函式為 箭頭函式，則 this 指向 Vue 實體，
3. Vue 中 addEventListener 中的 this
通常，事件監聽函式中的 this 都指向系結事件的那個元素, 但是在 Vue 中，監聽函式中的 this 也指向 Vue 實體
總結：除了回呼函式中的 this ，其它地方的 this 均指向 Vue 實體
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/335151.html
標籤：其他