[JS核心知識點] this指向問題

this指向誰？

this永遠指向最終調用的函數所在的對象

① this指向的，永遠只多是對象！

② this指向誰，永遠不取決於this寫在哪！而是取決於函數在哪調用。

③ this指向的對象，咱們稱之爲函數的上下文context，也叫函數的調用者。

1. 當直接調用函數時，this指向window

function Obj () {
    console.log(this)
  }
  Obj() // window
複製代碼

2. 函數爲對象屬性時，this指向該對象

function Obj () {
    console.log(this)
  } 
  let obj = {
    name: 'hello',
    where: Obj
  }
  obj.where() // {name: "hello", where: ƒ}
複製代碼

3. 構造函數中，this指向實例化對象

function Obj () {
    console.log(this)
  }  
  let obj = new Obj() // Obj{}
複製代碼

4. 在setTimeout和setInterval，this永遠指向window

function Obj () {
    setTimeout(function () {
  	  console.log(this)
    }, 100)
  } 
  let obj = {
    name: 'hello',
    where: Obj
  }
  obj.where() // window
複製代碼

爲什麼在setTimeout和setInterval中this永遠指向window呢？下面專門瞭解一下

setTimeout和setInterval中this指向問題

由setTimeout()調用的代碼運行在與所在函數徹底分離的執行環境上。這會致使，這些代碼中包含的 this 關鍵字在非嚴格模式會指向 window (或全局)對象，嚴格模式下爲 undefined

function Obj () {
    this.checkThis = function () {
      console.log(this)
    },
    this.checkThisLast = function () {
      setTimeout(function() {
        console.log(this)
      },100)
    }
  }
  let obj = new Obj()
  obj.checkThis() // Obj{}
  obj.checkThisLast() // window
複製代碼

如何解決setTimeout和setInterval中this的指向問題呢？

變量保存this

function Obj () {
    let self = this, // this綁定給一個變量
    this.checkThis = function () {
      console.log(this)
    },
    this.checkThisLast = function () {
      setTimeout(function() {
        console.log(self)
      },100)
    }
  }
  let obj = new Obj()
  obj.checkThis() // Obj{}
  obj.checkThisLast() // Obj{}
複製代碼

箭頭函數

箭頭函數不會建立本身的this,它只會從本身的做用域鏈的上一層繼承this

• 指向定義時所在的做用域，而不是指向運行時所在的做用域。

function Obj () {
    this.checkThis = function () {
      console.log(this)
    },
    this.checkThisLast = function () {
      setTimeout(() => {
        console.log(this)
      },100)
    }
  }
  let obj = new Obj() 
  obj.checkThis() // obj{}
  obj.checkThisLast() // obj{}
複製代碼

bind()綁定

bind()用法是將函數綁定到對象上，會建立新的函數，函數體內的this值會被綁定到傳入bind()的首個參數；f.bind(obj)至關於obj.f()，則f()的this指向obj

• call(),apply()能夠實現一樣this綁定，但call()、apply()調用後當即執行，apply()須要接收數組參數

function Obj () {
    this.checkThis = function () {
      console.log(this)
    },
    this.checkThisLast = function () {
      setTimeout(function () {
        console.log(this)
      }.bind(this),100)
    }
  }
  let obj = new Obj()
  obj.checkThis() // obj{}
  obj.checkThisLast() // obj{}
複製代碼