es6箭頭方法中this指向?qū)嵗治?/h1>

發(fā)布時(shí)間：2022-11-22 09:33:48 來(lái)源：億速云 閱讀：99 作者：iii 欄目：web開(kāi)發(fā)

這篇文章主要介紹“es6箭頭方法中this指向?qū)嵗治觥保谌粘２僮髦?，相信很多人在es6箭頭方法中this指向?qū)嵗治鰡?wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”es6箭頭方法中this指向?qū)嵗治觥钡囊苫笥兴鶐椭〗酉聛?lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！

在es6中，箭頭函數(shù)體內(nèi)的this對(duì)象，就是定義該函數(shù)時(shí)所在的作用域指向的對(duì)象。箭頭函數(shù)中this的指向就是上下文里對(duì)象this指向，偶爾沒(méi)有上下文對(duì)象，this就指向window；即使是call、apply、bind等方法也不能改變箭頭函數(shù)this的指向。

箭頭函數(shù)相信大家在日常開(kāi)發(fā)中用到的地方非常之多，因?yàn)樗芎?jiǎn)潔，可讀性強(qiáng)，但是它最大的好處，其實(shí)是解決了匿名函數(shù)的this指向問(wèn)題，有利于封裝回調(diào)函數(shù)。

先來(lái)個(gè)總結(jié)：

箭頭函數(shù)體內(nèi)的this對(duì)象，就是定義該函數(shù)時(shí)所在的作用域指向的對(duì)象，而不是使用時(shí)所在的作用域指向的對(duì)象。

ES6箭頭函數(shù)中this

• （1）默認(rèn)指向定義它時(shí)，所處上下文的對(duì)象的this指向。即ES6箭頭函數(shù)里this的指向就是上下文里對(duì)象this指向，偶爾沒(méi)有上下文對(duì)象，this就指向window

• （2）即使是call，apply，bind等方法也不能改變箭頭函數(shù)this的指向

下面是普通函數(shù)的列子：

var name = 'window'; // 其實(shí)是window.name = 'window'

var A = {
   name: 'A',
   sayHello: function(){
      console.log(this.name)
   }
}

A.sayHello();// 輸出A

var B = {
  name: 'B'
}

A.sayHello.call(B);//輸出B

A.sayHello.call();//不傳參數(shù)指向全局window對(duì)象，輸出window.name也就是window

從上面可以看到，sayHello這個(gè)方法是定義在A對(duì)象中的，當(dāng)當(dāng)我們使用call方法，把其指向B對(duì)象，最后輸出了B；可以得出，sayHello的this只跟使用時(shí)的對(duì)象有關(guān)。


改造一下：

var name = 'window'; 
var A = {
   name: 'A',
   sayHello: () => {
      console.log(this.name)
   }
}
A.sayHello();// 還是以為輸出A ? 錯(cuò)啦，其實(shí)輸出的是window

我相信在這里，大部分同學(xué)都會(huì)出錯(cuò)，以為sayHello是綁定在A上的，但其實(shí)它綁定在window上的，那到底是為什么呢？


一開(kāi)始，我重點(diǎn)標(biāo)注了“該函數(shù)所在的作用域指向的對(duì)象”，作用域是指函數(shù)內(nèi)部，這里的箭頭函數(shù)，也就是sayHello，所在的作用域其實(shí)是最外層的js環(huán)境，因?yàn)闆](méi)有其他函數(shù)包裹；然后最外層的js環(huán)境指向的對(duì)象是winodw對(duì)象，所以這里的this指向的是window對(duì)象。

那如何改造成永遠(yuǎn)綁定A呢：

var name = 'window'; 

var A = {
   name: 'A',
   sayHello: function(){
      var s = () => console.log(this.name)
      return s//返回箭頭函數(shù)s
   }
}

var sayHello = A.sayHello();
sayHello();// 輸出A 

var B = {
   name: 'B';
}

sayHello.call(B); //還是A
sayHello.call(); //還是A

OK，這樣就做到了永遠(yuǎn)指向A對(duì)象了，我們?cè)俑鶕?jù)“該函數(shù)所在的作用域指向的對(duì)象”來(lái)分析一下：


• 該函數(shù)所在的作用域：箭頭函數(shù)s 所在的作用域是sayHello,因?yàn)閟ayHello是一個(gè)函數(shù)。

• 作用域指向的對(duì)象：A.sayHello指向的對(duì)象是A。

所以箭頭函數(shù)s 中this就是指向A啦 ～～

----------------finish-------------

最后是使用箭頭函數(shù)其他幾點(diǎn)需要注意的地方

• 不可以當(dāng)作構(gòu)造函數(shù)，也就是說(shuō)，不可以使用new命令，否則會(huì)拋出一個(gè)錯(cuò)誤。

• 不可以使用arguments對(duì)象，該對(duì)象在函數(shù)體內(nèi)不存在。如果要用，可以用 rest 參數(shù)代替。

• 不可以使用yield命令，因此箭頭函數(shù)不能用作 Generator 函數(shù)。

到此，關(guān)于“es6箭頭方法中this指向?qū)嵗治觥钡膶W(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！