普通函數(shù)的this指向

• 全局this

console.log(this) // window

function globalFunc() {
  console.log(this) // window
}

globalFunc() // 相當(dāng)于window.globalFunc(), 全局方法就是window在調(diào)用,所以指向window

在瀏覽器中指向window

• 函數(shù)(this指向調(diào)用者)

var obj = {
  clg: function() {
    console.log(this)
  }
}

obj.clg() // this = obj

對象調(diào)用方法指向該對象

var a = 5
var obj = {
  a: 10,
  clg: function() {
    console.log(this.a)
  }
}

var func = obj.clg
func() // a = 5, this === window

因為函數(shù)其實是地址,obj.clg賦值給func,其實是將函數(shù)地址賦值給func,函數(shù)只有一份,obj.clg()是通過對象尋址到函數(shù)的,是對象調(diào)用的,所以this指向obj,而func()是window.func尋址到的函數(shù),是window調(diào)用的,所以指向window,也就是誰調(diào)用,this指向誰

var a = 5
var obj = {
  a: 10,
  clg: function() {
    function func() {
      console.log(this)
    }
    func() // 指向window,沒有對象調(diào)用就相當(dāng)于window調(diào)用的
  }
}

obj.clg()

var a = 5
var obj = {
  a: 10,
  clg: function() {
    setTimeout(function() {
      console.log(this)
    }, 500)
  }
}

obj.clg()

func沒有被對象調(diào)用,所以是window調(diào)用的,this指向window

• 箭頭函數(shù)(箭頭函數(shù)沒有this指針,根據(jù)詞法作用域找最近的this,只有函數(shù)有this)
  詞法作用域是指找到作用域鏈中最近的一個變量,this和argument是函數(shù)才有的局部變量

var obj = {
  arrow: {
    func: () => {
      console.log(this) // window
    }
  }
}

obj.arrow.func()

箭頭函數(shù)沒有this指針,會根據(jù)詞法作用域進(jìn)行查找,對象也沒有this指針,所以func對象和arrow對象都沒有this局部變量,所有this找到了window上

var obj = {
  arrow: function() {
   setTimeout(() => {
     console.log(this) // obj
   }, 500)
  }
}

obj.arrow()

箭頭函數(shù)沒有this,通過詞法作用域,找到arrow為函數(shù),有this,則其this為arrow的this,arrow是obj調(diào)用的,所以this指向obj,所以箭頭函數(shù)的this指向obj

• call/apply/bind

var a = 1
var obj1 = {
  a: 2
}

var obj2 = {
  a: 3
}

function clga() {
  console.log(this.a)
}

clga() // 1
clga.call(obj1) // 2
clga.apply(obj1) // 2
var f = clga.bind(obj2)
f() // 3

均可以修改this對象,注意apply和call都會執(zhí)行函數(shù),bind只是綁定this,但是bind之后,不論賦值給誰,調(diào)用的時候,this都會指向綁定的對象,所以此時f()中的this不是指向window而是指向obj2

注意: 當(dāng)需要多個this的時候,可以使用that或者_(dá)this等保存對應(yīng)的this,然后通過詞法作用域,內(nèi)部都可以拿到這個this