计划写很长的篇幅，预计12月初完成。
先说结论：
无论是ES6还是React的this，相对于ES5，只是增加了箭头函数this绑定了其封闭上下文，自己实现了该词法，其它的关于this的与ES5仍然一样。
目录：
1.ES5中对this使用的4种方式
2.ES6中箭头函数中的this
3.ES6中class中的this
4.React中组件里的this 组件里事件函数，其实相当于把对象方法赋值给新变量后再调用，这和ES5中是一样的，变成了函数调用，this指向全局。
要理解ES6的this知识，首先必须非常熟悉ES5里this的知识，要不然还是会一头雾水。
1.ES5中对this使用的4种方式
待补充
2.ES6中箭头函数中的this
先看几个例子
function foo() {
setTimeout(() => {
console.log(‘id:‘, this.id);
}, 100);
}
var id = 21;
foo.call({ id: 42 });
// id: 42
上面这个例子是阮一峰ES6入门里的一个例子，他在书中提到“箭头函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象”，这种解释并不好，你也行还是不能真正理解上面这个例子。我更推荐MDN里对箭头函数this的说明“箭头功能不会创建自己的this；它使用封闭执行上下文的this值”。setTimeout里的函数的封闭上下文是foo函数，因此该箭头函数使用foo函数的this，在调用的时候，foo函数通过call将自己的id变成42，所以打印出的this.id是42。
下面的例子是MDN的例子，会从0每隔一秒打印递增的整数0,1,2,3... 。对照这个例子再体会MDN对于箭头函数的说明。
function Person(){
this.age = 0;
setInterval(() => {
console.log(this.age++) // 传递给setInterval的函数内的this与封闭函数中的this值相同
}, 1000);
}
var p = new Person();
还有一点，有些同学可能因为之前看了阮一峰对箭头函数this的解释“箭头函数体内的this对象，就是定义时所在的对象”，会产生疑惑，它每次使用的是这个对象的起初的深拷贝的副本还是引用值，通俗的问就是，当执行上下文的this值上的属性变化了，箭头函数里的this上的属性是否变化呢。答案是也跟着变化，我们根据MDN的解释，它使用封闭执行上下文的this值。上面的例子其实已经可以验证这个问题了，为了更清楚一下，我们稍微改一下。
function Person(){
this.age = 0;
setInterval(() => {
console.log(this.age++);
}, 1000);
}
var p = new Person();
p.age = 50;
我们在控制台可以看到，从50每隔1秒递增打印一个整数。
由于 this 已经在词法层面完成了绑定，通过 call() 或 apply() 方法调用一个箭头函数时，只是传入了参数而已，对 this 并没有什么影响:
var adder = {
base : 1,
add : function(a) {
var f = v => v + this.base;
return f(a);
},
addThruCall: function(a) {
// console.log(this.base)
var f = v => v + this.base;
var b = {
base : 2
};
return f.call(b, a);
}
};
console.log(adder.add(1)); // 输出 2
console.log(adder.addThruCall(1)); // 仍然输出 2（而不是3）
注意与一开始的例子区别，一开始的例子是对箭头函数外层函数使用call，而这个例子是直接对箭头函数使用call。addThruCall内的this与ES5一样，是调用对象的this,里面的箭头函数同样使用这个this。我们在后面加两句
var cc = adder.addThruCall;
console.log(cc(1))
控制台输出NaN，想想是不是和ES5对象方法调用一样的呢。
参考链接：1.MDN箭头函数