我們看個(gè)特殊的例子

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

var obj = {
  a: 2,
  foo
}

var bar = obj.foo
var a = "mick"
bar() // mick

bar是obj.foo的一個(gè)引用，但是實(shí)際上，它引用的是foo函數(shù)本身，因此此時(shí)bar()其實(shí)是一個(gè)不帶任何修飾的函數(shù)調(diào)用，因此應(yīng)用了默認(rèn)綁定。

我們?cè)倏戳硪环N情況

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

function doFoo(fn) {
  fn()
}

var obj = {
  a: 2,
  foo
}

var a = "mick"

doFoo(obj.foo) // mick

嵌套函數(shù)中的this 不會(huì)從外層函數(shù)中繼承。this永遠(yuǎn)指向最后調(diào)用它的那個(gè)對(duì)象

顯示綁定

可以使用call、apply或bind方法。如果對(duì)這三個(gè)方法的實(shí)現(xiàn)原理感興趣可以看看這篇手寫(xiě)call、apply、bind

function foo() {
  console.log(this.a)
}
var obj = {
  a: 2
}

foo.call(obj) // 2

通過(guò)call方法，可以在調(diào)用foo時(shí)候，強(qiáng)制把它的this綁定到obj上。

new綁定

這里我們先說(shuō)一下new來(lái)調(diào)用函數(shù)會(huì)發(fā)生哪些事情

• 創(chuàng)建一個(gè)全新的對(duì)象
• 這個(gè)新對(duì)象會(huì)被執(zhí)行[[原型]]鏈接
• 這個(gè)新對(duì)象會(huì)綁定到函數(shù)調(diào)用的this
• 如果函數(shù)沒(méi)有返回其他對(duì)象，那么new表達(dá)式中的函數(shù)調(diào)用會(huì)自動(dòng)返回這個(gè)新對(duì)象。

function foo(a){
    this.a = a
}
var bar = new foo(2)
console.log(bar.a)

使用new來(lái)調(diào)用foo時(shí)，我們會(huì)構(gòu)造一個(gè)新對(duì)象并把它綁定到foo調(diào)用中的this上。

特例

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

var a = 2
var o = { a: 3, foo: foo }
var p = { a: 4 }

o.foo() // 3
;(p.foo = o.foo)() // 2

賦值表達(dá)式p.foo = o.foo的返回值是目標(biāo)函數(shù)的引用，因此調(diào)用位置是foo()而不是p.foo()或者o.foo()。所以這里是默認(rèn)綁定。

面試題

下面我們看個(gè)面試題吧

var name = 'window'
var person1 = {
  name: 'person1',
  foo1: function () {
    console.log(this.name)
  },
  foo2: () => console.log(this.name),
  foo3: function () {
    return function () {
      console.log(this.name)
    }
  },
  foo4: function () {
    return () => {
      console.log(this.name)
    }
  }
}
var person2 = { name: 'person2' }

person1.foo1()
person1.foo1.call(person2)

person1.foo2()
person1.foo2.call(person2)

person1.foo3()()
person1.foo3.call(person2)()
person1.foo3().call(person2)

person1.foo4()()
person1.foo4.call(person2)()
person1.foo4().call(person2)

我們一個(gè)個(gè)來(lái)解析一下。

• person.foo1()這個(gè)屬于隱式綁定，foo1的this綁定到了person,所以打印person1
• person1.foo1.call(person2)顯示綁定，foo1的this通過(guò)call改變了this,指向了person,所以打印person2
• person.foo2()因?yàn)閒oo2是箭頭函數(shù)，所以它的this指向是它上一層this的指向也就是window,window
• person1.foo2.call(person2)和上面一條同樣的道理，也是window
• person1.foo3()()內(nèi)部返回了一個(gè)函數(shù)，其實(shí)是一個(gè)函數(shù)的引用，此時(shí)this應(yīng)該指向window,所以打印window
• person1.foo3.call(person2)()通過(guò)call只是改變了foo3的this指向，和返回的函數(shù)沒(méi)有什么關(guān)系，所以this還是指向window,打印window
• person1.foo3().call(person2)通過(guò)call改變了foo3內(nèi)部返回函數(shù)的this指向，所以打印person2
• person1.foo4()()返回的是一個(gè)箭頭函數(shù)，箭頭函數(shù)的this是它上一層函數(shù)內(nèi)部this的指向，所以也就是foo4this的指向，由于foo4被person1包含并調(diào)用，所以this指向person1,打印person1
• person1.foo4.call(person2)(),此時(shí)foo4內(nèi)部的this通過(guò)call改變成了person2,所以打印person
• person1.foo4().call(person2)這個(gè)和person1.foo4()是一樣的道理，打印person1

簡(jiǎn)單的談了談this的綁定，歡迎留言你的問(wèn)題，大家一起學(xué)習(xí)一起進(jìn)步?。。?/p>

到此這篇關(guān)于JavaScript中this的綁定你知道幾種?的文章就介紹到這了,更多相關(guān)JavaScript this綁定內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！