JS回调函数中的 this 指向(详细)
- 2019 年 11 月 12 日
- 筆記
首先先说下正常的 this 指向问题
什么是 this：自动引用正在调用当前方法的.前的对象。
this指向的三种情况
1. obj.fun() fun 中的 this->obj ，自动指向.前的对象
2. new Fun() Fun 中的 this->正在创建的新对象，new 改变了函数内部的 this 指向，导致 this 指向实例化 new 的对象
3. fun() 和匿名函数自调 this 默认->window，函数内部的 this，this 默认是指向 window 的
再说回调函数中的 this 指向问题，我们先来看一个例子
1 <script> 2 var Bob={ 3 sname:"鲍勃", 4 friends:["Jack","Rose","Tom","Jerry"], 5 intr(){ 6 this.friends.forEach(function(ele){ 7 console.log(this.sname+"认识"+ele); 8 }); 9 } 10 } 11 Bob.intr(); 12 </script>
看结果：
undefined认识Jack undefined认识Rose undefined认识Tom undefined认识Jerry
回调函数中的this默认是指向window的，因为本质上是在函数内callback,并没有.前的对象调用
如何解决：
使用箭头函数
1<script> 2 var Bob={ 3 sname:"鲍勃", 4 friends:["Jack","Rose","Tom","Jerry"], 5 intr(){ 6 this.friends.forEach(ele=>{ 7 console.log(this.sname+"认识"+ele); 8 }); 9 } 10 } 11 Bob.intr(); 12 </script>
结果是：
鲍勃认识Jack 鲍勃认识Rose 鲍勃认识Tom 鲍勃认识Jerry
可以看出箭头函数内的this自动指向了回调函数外层的 this 。
箭头函数中的 this:
函数体内的 this 对象，就是定义时所在的对象，而不是使用时所在的对象。
this 指向的固定化，并不是因为箭头函数内部有绑定 this 的机制，实际原因是箭头函数根本没有自己的 this，导致内部的 this 就是外层代码块的 this。正是因为它没有 this，所以也就不能用作构造函数。
也可使用bind永久绑定this
1 var Bob={ 2 sname:"鲍勃", 3 friends:["Jack","Rose","Tom","Jerry"], 4 intr(){ 5 this.friends.forEach(function(friend){ 6 console.log(this.sname+"认识"+friend); 7 }.bind(this)); 8 } 9 } 10 Bob.intr();
