箭頭函數(shù)不會(huì)創(chuàng)建自己的this,它只會(huì)從自己的作用域鏈的上一層繼承this。
由于箭頭函數(shù)沒(méi)有自己的this指針,通過(guò) call() 或 apply() 方法調(diào)用一個(gè)函數(shù)時(shí),只能傳遞參數(shù)(不能綁定this),他們的第一個(gè)參數(shù)會(huì)被忽略。
前言
閱讀下面的內(nèi)容要先看下《你不知道的javascript(上)》中的第二部分:this和對(duì)象原型(里面對(duì)于this指向的理論部分主要來(lái)源于該書(shū))。
問(wèn)題
這周在寫(xiě)代碼的時(shí)候,聽(tīng)同事在說(shuō)箭頭函數(shù)無(wú)法更改this的指向,并且使用下面代碼進(jìn)行驗(yàn)證:
// (1) 使用箭頭函數(shù),this一直指向windowvar a = 0var obj1 = { a: 1, fn: () => { console.log(this.a) }}obj1.fn() // 結(jié)果:0var obj2 = { a: 2}obj2.fn = obj1.fnobj2.fn() // 結(jié)果:0
// (2)不使用箭頭函數(shù),this的指向會(huì)更改var obj3 = { a: 3, fn: function() { console.log(this.a) }}obj3.fn() // 結(jié)果:3
第一段代碼,無(wú)論fn綁定在哪個(gè)對(duì)象上,this.a始終指向全局的a(在非嚴(yán)格模式下的瀏覽器中我們可認(rèn)為是window)
然而,這種說(shuō)法是有問(wèn)題(我認(rèn)為)。
先理解this
this代表什么取決于:
var a = 0test() // 調(diào)用位置在此,通過(guò)【默認(rèn)綁定規(guī)則】,可知test的this綁定到了window上function test() { console.log(this) // this是window var obj1 = { a: 1, fn: function() { console.log(this) // this是obj1 console.log(this.a) } } obj1.fn() // 調(diào)用位置在此,通過(guò)【隱式綁定規(guī)則】,可知fn中的this綁定到了obj1上 var obj2 = { a: 2 } obj2.fn = obj1.fn obj2.fn() // 調(diào)用位置在此,【隱式綁定規(guī)則】,可知fn內(nèi)的this綁定到了obj2}
箭頭函數(shù)中的this
其實(shí)這么起標(biāo)題不太準(zhǔn)確(然而想不出好的名字),因?yàn)榧^函數(shù)是不會(huì)創(chuàng)建自己的this的(MDN),那么下面代碼的this是來(lái)源于哪里的呢?
var obj3 = { a: 3, fn: () => { console.log(this.a) }}obj3.fn() // 調(diào)用位置在此,this指向window
arrowFoo1() // (1)此處是調(diào)用位置,使用【默認(rèn)的綁定規(guī)則】,this = windowfunction arrowFoo1() { var obj1 = { vv: 'svv1', fn: () => { console.log(this.vv, 'vv的值是') } } // (2)調(diào)用位置是此處,若fn不是箭頭函數(shù),那么這里也會(huì)有自己的this(即【隱式調(diào)用規(guī)則】,this綁定為obj1),而fn是箭頭函數(shù),則它沒(méi)有this,那么fn內(nèi)部調(diào)用的this是誰(shuí)? // 這時(shí)候需要根據(jù)作用域的規(guī)則,往外層查找,找到哪里?找到調(diào)用obj1.fn的調(diào)用棧,即arrowFoo1函數(shù)的this,那么從(1)中可知,那個(gè)this指向的是window obj1.fn() var obj2 = { vv: 'svv2', } obj2.fn = obj1.fn obj2.fn()}function arrowFoo2() { var vv = '哦哦哦哦哦' console.log(this.vv, 'vv的值是')}
因此,箭頭函數(shù)里面要是用到了this,那么其實(shí)它是通過(guò)作用域鏈,往外進(jìn)行查找的,找到了就直接返回咯。
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,謝謝大家對(duì)武林網(wǎng)的支持。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注