首先复习下普通函数里的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指向,对你有用。
原文地址：https://www.cnblogs.com/studyshufei/p/9061713.html