this 問題解決方案

通常情況下,函數的this會指向他的調用者

function foo() {
  console.log(this)
}
foo() //等於window.foo(),調用者是window所以this指向window

const obj = {
  foo: foo
}
obj.foo()//調用者是obj所以this指向obj

## new指向實例
使用new 構造函數()模式,this會指向生成的實例
```javascript
let a=new Foo();

箭頭函數

箭頭函數內部沒有this所以bind,call,apply不能用於箭頭函數,那麼如果在箭頭函數內部使用this,箭頭函數內的this就是包裹箭頭函數的第一個普通函數的this.
bind,call,apply是將函數本身的this指向第一個參數

function a() {
  return () => {
    return () => {
      console.log(this)
    }
  }
}
console.log(a()()())

根據箭頭函數this定義,this指向的是方法a,方法a是window調用的,所以箭頭函數內部的this是window

bind,apply,call

bind,call,apply是將函數本身的this指向第一個參數,如果第一個參數爲空,就是window

fn.bind(第一個參數也就是this的指向)
fn.call(第一個參數也就是this的指向,parma2,param3...)
fn.apply(第一個參數也就是this的指向,[parma2,parma3..])

混合優先級

實際開發中可能會遇到上述多個情況嵌套,這時this指向就根據優先級來確定
new>bind,apply,call>調用者
注意箭頭函數的 this 一旦被綁定,就不會再被任何方式所改變。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章