避开箭头函数this的绑定的小陷阱

箭头函数函数体内的this对象， 就是定义时所在的对象， 而不是使用时所在的对象；
换句话说，箭头函数里面的this， 绑定定义时所在的作用域， 而不是指向运行时所在的作用域；

知道是定义时所在的对象，接下来就是找离箭头函数最近的this所在作用域

先看运行时的指向

var obj = {};
obj.arr = [1, 2];
obj.arr.forEach(item => console.log(this));//输出的是window对象，因为箭头函数是直接使用的，并未在使用前在别处定义，此时离它最近的定义时的this就是window对象

image.png

再看定义时的指向

function Dog() {
  this.arr = [1,2,3];
  this.arr.forEach(item => console.log(this));//此时输出的就是dog对象，因为箭头函数在构造函数Dog中定义，所以此时离它最近的定义是的this就是向上层找最近的this，那就是dog对象
}

var dog = new Dog();

image.png