this的指向
(1)无论是否在严格模式下，在全局执行环境中（在任何函数体外部）this 都指向全局对象
(2)在严格模式下，如果 this 没有被执行上下文（execution context）定义，那它将保持为 undefined。
(3)在箭头函数中，this与封闭词法上下文的this保持一致。在全局代码中，它将被设置为全局对象：
理解JavaScript普通函数以及箭头函数里使用的this
普通函数的this
普通函数的this是由动态作用域决定，它总指向于它的直接调用者。具体可以分为以下四项：
this总是指向它的直接调用者， 例如 obj.func() ,那么func()里的this指的是obj。
在默认情况(非严格模式,未使用 ‘use strict’)，如果函数没有直接调用者，this为window
在严格模式下,如果函数没有直接调者，this为undefined
使用call,apply,bind绑定的，this指的是绑定的对象
箭头函数的this
箭头函数是没有绑定自己的this，函数内使用的this是由静态作用域（也成为词法作用域，参考this）决定。静态作用域就是说箭头函数里this是由定义它的代码决定，而不是执行调用箭头函数的代码。
上面的说法有时很难理解，我自己总结的方法是：找出定义箭头函数的上下文（即包含箭头函数最近的函数或者对象），那么上下文所处的父上下文即为this。具体可以参考箭头函数的示例。
参考：https://majing.io/posts/10000005331170
全局环境
无论是否在严格模式下，在全局执行环境中（在任何函数体外部）this 都指向全局对象
// 在浏览器中, window 对象同时也是全局对象：
console.log(this === window); // true
a = 37;
console.log(window.a); // 37
this.b = "MDN";
console.log(window.b) // "MDN"
console.log(b) // "MDN"
函数（运行内）环境
在函数内部，this的值取决于函数被调用的方式。
因为下面的代码不在严格模式下，且 this 的值不是由该调用设置的，所以 this 的值默认指向全局对象。
function f1(){
return this;
}
//在浏览器中：
f1() === window; //在浏览器中，全局对象是window
//在Node中：
f1() === global;
在严格模式下，this将保持他进入执行环境时的值，所以下面的this将会默认为undefined。
function f2(){
"use strict"; // 这里是严格模式
return this;
}
f2() === undefined; // true
在严格模式下，如果 this 没有被执行环境（execution context）定义，那它将保持为 undefined。
当一个函数在其主体中使用 this 关键字时，可以通过使用函数继承自Function.prototype 的 call 或 apply 方法将 this 值绑定到调用中的特定对象。
function add(c, d) {
return this.a + this.b + c + d;
}
var o = {a: 1, b: 3};
// 第一个参数是作为‘this’使用的对象
// 后续参数作为参数传递给函数调用
add.call(o, 5, 7); // 1 + 3 + 5 + 7 = 16
// 第一个参数也是作为‘this’使用的对象
// 第二个参数是一个数组，数组里的元素用作函数调用中的参数
add.apply(o, [10, 20]); // 1 + 3 + 10 + 20 = 34
使用 call 和 apply 函数的时候要注意，如果传递给 this 的值不是一个对象，JavaScript 会尝试使用内部 ToObject 操作将其转换为对象。因此，如果传递的值是一个原始值比如 7 或 ‘foo’，那么就会使用相关构造函数将它转换为对象，所以原始值 7 会被转换为对象，像 new Number(7) 这样，而字符串 ‘foo’ 转化成 new String(‘foo’) 这样
在箭头函数中，this与封闭词法环境的this保持一致。在全局代码中，它将被设置为全局对象：
箭头函数表达式的语法比函数表达式更简洁，并且没有自己的this，arguments，super或 new.target。这些函数表达式更适用于那些本来需要匿名函数的地方，并且它们不能用作构造函数。
引入箭头函数有两个方面的作用：更简短的函数并且不绑定this。
示例：
var elements = [
'Hydrogen',
'Helium',
'Lithium',
'Beryllium'
];
elements.map(function(element) {
return element.length;
}); // 返回数组：[8, 6, 7, 9]
// 上面的普通函数可以改写成如下的箭头函数
elements.map((element) => {
return element.length;
}); // [8, 6, 7, 9]
写法
省略function ，=> 代替
当箭头函数只有一个参数时，可以省略参数的圆括号
当箭头函数的函数体只有一个return语句时，可以省略return关键字和方法体的花括号
在这个例子中，因为我们只需要 length 属性，所以可以使用参数解构
// 需要注意的是字符串 "length" 是我们想要获得的属性的名称，而 lengthFooBArX 则只是个变量名，
// 可以替换成任意合法的变量名
elements.map(({ "length": lengthFooBArX }) => lengthFooBArX); // [8, 6, 7, 9]
不绑定this
在箭头函数出现之前，每个新定义的函数都有它自己的 this值
（在构造函数的情况下是一个新对象，
在严格模式的函数调用中为 undefined，
如果该函数被作为“对象方法”调用则为基础对象等）。
This被证明是令人厌烦的面向对象风格的编程。
function Person() {
// Person() 构造函数定义 `this`作为它自己的实例.
this.age = 0;
setInterval(function growUp() {
// 在非严格模式, growUp()函数定义 `this`作为全局对象,
// 与在 Person()构造函数中定义的 `this`并不相同.
this.age++;
}, 1000);
}
var p = new Person();
在ECMAScript 3/5中，通过将this值分配给封闭的变量，可以解决this问题。
function Person() {
var that = this;
that.age = 0;
setInterval(function growUp() {
// 回调引用的是`that`变量, 其值是预期的对象.
that.age++;
}, 1000);
}
或者，可以创建绑定函数，以便将预先分配的this值传递到绑定的目标函数（上述示例中的growUp()函数）。
箭头函数不会创建自己的this,它只会从自己的作用域链的上一层继承this
因此，在下面的代码中，传递给setInterval的函数内的this与封闭函数中的this值相同：
function Person(){
this.age = 0;
setInterval(() => {
this.age++; // |this| 正确地指向 p 实例
}, 1000);
}
var p = new Person();
箭头函数内定义的变量及其作用域
// 常规写法
var greeting = () => {let now = new Date(); return ("Good" + ((now.getHours() > 17) ? " evening." : " day."));}
greeting(); //"Good day."
console.log(now); // ReferenceError: now is not defined 标准的let作用域
// 参数括号内定义的变量是局部变量（默认参数）
var greeting = (now=new Date()) => "Good" + (now.getHours() > 17 ? " evening." : " day.");
greeting(); //"Good day."
console.log(now); // ReferenceError: now is not defined
// 对比：函数体内{}不使用var定义的变量是全局变量
var greeting = () => {now = new Date(); return ("Good" + ((now.getHours() > 17) ? " evening." : " day."));}
greeting(); //"Good day."
console.log(now); // Fri Dec 22 2017 10:01:00 GMT+0800 (中国标准时间)
// 对比：函数体内{} 用var定义的变量是局部变量
var greeting = () => {var now = new Date(); return ("Good" + ((now.getHours() > 17) ? " evening." : " day."));}
greeting(); //"Good day."
console.log(now); // ReferenceError: now is not defined