总之，普通函数的this取值多少有点奇怪，尤其当我们采用面向对象的方式编程时，很多时候都需要用到this，大多数时候我们都不会去使用.bind(this)，而是使用临时变量self或者that来搬运this的取值，写起来当然不是很爽，而且一不小心就会写出BUG来。
正如MDN文档所说：
Until arrow functions, every new function defined its own this value based on how the function was called。This proved to be less than ideal with an object-oriented style of programming.
箭头函数
箭头函数的this取值，规则非常简单，因为this在箭头函数中，可以看做一个普通变量。
An arrow function does not have its own this. The this value of the enclosing lexical scope is used; arrow functions follow the normal variable lookup rules.
箭头函数没有自己的this值，箭头函数中所使用的this都是来自函数作用域链，它的取值遵循普通普通变量一样的规则，在函数作用域链中一层一层往上找。
有了箭头函数，我只要遵守下面的规则，this的问题就可以基本上不用管了：
对于需要使用object.method()方式调用的函数，使用普通函数定义，不要使用箭头函数。对象方法中所使用的this值有确定的含义，指的就是object本身。
其他情况下，全部使用箭头函数。
// 使用箭头函数 var circle = { radius: 10, outerDiameter() { var innerDiameter = () => { console.log(2 * this.radius); }; innerDiameter(); } }; circle.outerDiameter(); // 打印20
对于内层函数innerDiameter，它本身并没有this值，其使用的this来自作用域链，来自更高层函数的作用域。innerDiameter的外层函数outerDiameter是普通函数，它是有this值的，它的this值就是circle对象。因此，innerDiameter函数中所使用的this来自outerDiameter函数，其值为circle对象。
结论
JavaScript是Brendan Eich花了10天时间设计出来的，因此各种莫名其妙的特性，this也算是其中一个奇葩。好在这些年ECMAScript标准发展很快也很稳定，每年撸一个新的标准，多少可以弥补一下JS的先天不足。
箭头函数对于this取值规则的简化，其实也就是为了少给大家添乱，谁能记得住普通函数this取值的那么多条条框框啊。。。
另外，MDN文档绝对是一个宝藏，大家可以多看看。