首先復習下普通函數裏的this指向：

1 function test(){
2     console.log(this)
3 }
4 test()

你會秒殺的毫無疑問的回答：window，針對普通函數：誰調用了函數 函數裏的this就指向誰，test（）等價於window.test（），所以是window

1 var name="outername"
2 var o={
3     name:"innername",
4     getname:function(){
5         console.log(this.name)
6     }
7 }
8 o.getname()

這個是普通函數，誰調用了函數 函數裏的this就指向誰，o.getname()，調用這個getname函數的是o這個對象，這個o對象下面有name："innername",所以打印出的是 "innername"

怎麽還不見ES6裏的箭頭函數呢？別急馬上登場：看我變身

1 var name="outername"
2 var o={
3     name:"innername",
4     getname:()=>{
5         console.log(this.name)
6     }
7 }
8 o.getname()

哇，箭頭函數出來了，o.getname（）執行後，因為箭頭函數坐鎮，我不敢輕易的說，因為調用getname（）的是o對象，所以this指向o對象，哦NO，可是人家不是普通函數，人家是箭頭函數，哪就猜相反的那個var name="outername"，它會打印外面的那個name（"outername"），恭喜你，答對了，原因下面會講解。

1 var name="outername"
2 var o={
3     name:"innername",
4     getname:function(){
5        return ()=>this.name
6         
7     }
8 }
9 console.log(o.getname()())

箭頭函數繼續出現，那麽這個會打印出什麽呢？不想猜的我直接敲出代碼打印出來答案："innername"，為什麽？箭頭函數的this指向：箭頭函數在定義時已經決定 所以永遠指向window，說好的window下面的name（"outername"）呢？難道說錯了,?稍安勿躁，再最後個例子一並總結.

1 var name="outername"
2 var o={
3     name:"innername",
4     getname:function(){
5        setTimeout(()=>console.log(this.name),1000)
6         
7     }
8 }
9 o.getname()

待我先總結完後自己可以先去猜下沒有給出答案的答案.

總結:

普通函數this指向：誰調用了函數 函數裏的this就指向誰

箭頭函數的this指向：箭頭函數在定義時已經決定 所以永遠指向window

調用的函數類型:

①箭頭函數：this指向window

②普通函數：this指向調用這個普通函數的對象,可能這個普通函數裏有箭頭函數,否管它,即使這個普通函數裏有箭頭函數,這個箭頭函數的this依舊是調用這個普通函數的對象(謹記)

小結以上調用的函數是普通函數缺內嵌箭頭函數的例子：

1 var name="outername"
2 var o={
3     name:"innername",
4     getname:function(){
5        return ()=>this.name
6         
7     }
8 }
9 console.log(o.getname()())

1 var name="outername"
2 var o={
3     name:"innername",
4     getname:function(){
5        setTimeout(()=>console.log(this.name),1000)
6         
7     }
8 }
9 o.getname()

希望此篇認清ES6箭頭函數裏的this指向,對你有用。

進階路上有你我-相互相持篇之ES6裏箭頭函數裏的this指向問題