JavaScript中最古怪的部分之一就是this对象。在我们日常开发中经常使用到 this 关键字，但是我们使用 this 时需要格外小心。
全局环境
在标准函数中，this 引用的是把函数当成方法调用的上下文对象。我们打开浏览器的控制台，输入 this ,我们就能看到 this 当前引用的是 window 对象。同样，当我们输入 this === window 的时候，返回结果也是true。
我们来看一个例子，在一个内部函数打印this,输出的结果是什么？
function someFunction() {
console.log(this); // 这里打印的 this 是什么？
return this;
}
你可能会说这里的this 将等于全局对象（或者严格模式下为undefined）。这个答案可能正确也可能不正确，因为this 是在代码执行期间确定的。但是一般来说，变量中的函数（不是对象方法）具有全局对象的this（严格模式下为undefined）：
function someFunction() {
return this;
}
console.log(someFunction() === window); // true
该函数每次调用都会得到自己的 this 调用，常规调用下会有一个全局对象作为上下文，后面我们会说怎么来使用其他方法调用，使其this 不是全局对象。
常用用法
接下来，我们来看另一个例子。我们创建了一个具有属性和方法的对象，然后在该对象内部访问改对象的属性。
const myObject = {
value:66,
getAnswer(){
return this.value;
}
}
const answer = myObject.getAnswer();
console.log(answer); // 66
我们可以看到在对象的方法中，this指向了该对象。就像前面说的this 是在代码执行期间确定的，一般来说，这个this 就是指向方法那个点前面的对象（无论深度多少层，它都是方法左侧最接近的那个对象）。如果函数或方法左侧没有调用对象的话，想象有一个全局对象在调用它（例如 window.someFunction()）
如果你将一个方法分配给另外一个变量，调用它之后，this指向的是新对象。
const myObject = {
value: 66,
getAnswer() {
return this.value;
},
};
const newObject = {
value: 8888,
};
newObject.getAnswer = myObject.getAnswer; // 赋值给新的变量
const answer = newObject.getAnswer();
console.log(answer); // 8888
下面这个例子可以验证，当有多层深的对象调用方法时，this指向的是“最接近”的那个对象。
const a = {
value: 42,
b: {
value: 3301,
getContext: function() {
console.log(this.value);
return this;
}
}
};
console.log(a.b.getContext() === a.b); // 3301 true
现在我们返回本文最开始那个例子。有了最新的认识，我们知道，可以将函数赋值给某个对象的属性，在正常调用的情况下，this 指向赋值的那个属性的对象。
function someFunction() {
return this;
}
const a = {
b: 42,
c: someFunction
};
console.log(a.c() === a); // true
棘手的例子
我们一起看下更多关于this 指向的例子。这些问题，还是要认真的应用有关引用和执行上下文的知识。
// 非严格模式下
const a = {
b: 42,
c: function () {
console.log(this.b);
},
};
(a.c || [])(); // undefined
(a.c)(); // 42
(1, a.c)(); // undefined
我们来一一讨论这三种情况。首先我们需要理解括号：如果将某些内容括在括号中，它将在内部返回一个表达式。所以第一个例子中，内部先执行了一个表达式然后返回它，再然后不带任何参数的执行了这个函数。我们可以将其重写成下面这种形式：
const method = a.c || [];
(method)();
根据前面的知识，我们知道，将方法赋值给变量，然后在函数左边不带任何内容的情况下调用它，就等于是把window 当做 this 的上下文进行调用。因此，除非window.b 有值，否则结果就是undefined。
第二个例子，还是像上面说的，括号不做任何事情，它只是返回内部的内容。所以就是如下的形式:
a.c(); // 方法c 里面的this指向a 对象。
最后一个示例使用了逗号运算符（逗号运算符，它将先计算左边的参数，再计算右边的参数值。然后返回最右边参数的值。），所以可以重写为下面这种形式
const method = a.c;
(method)();
Reference Type 解读
为什么 (a.c || [])(); 会返回 undefined，this 上下文会丢失呢。可以参考下 Reference Type
箭头函数
在 ES6 中新增了一个箭头函数的新功能。箭头函数写起来更简洁，但是更重要的是箭头函数没有自己的this对象，它的this 是外部环境中的this。下面的示例中，我们有使用setTimeout 回调：
const a = {
b:66,
c:function(cb){
setTimeout(function(){
return cb(this.b)
},500)
}
}
a.c(function (value){
console.log(value); // undefined
})
这里输出的是undefined，而不是66。根据前面的知识，我们已经知道了，传递的cb 回调函数，并没有绑定上下文，因此回调函数的上下文为全局的this。
怎么解决这个问题呢，在es6 之前，我们可以分配this 一个变量（一般变量名取self 或者 that）,然后我们在闭包中使用这个变量来获取值：
const a = {
b:66,
c:function(cb){
const that = this;
setTimeout(function(){
return cb(that.b)
},500)
}
}
a.c(function (value){
console.log(value); // 66
})
现在我们可以直接使用箭头函数来解决这个问题。
箭头函数没有this, 也可以理解为箭头函数中的this 会继承定义函数时的上下文，还可以理解为和外层函数指向同一个this。
const a = {
b: 66,
c: function (cb) {
setTimeout(() => {
return cb(this.b);
}, 500);
},
};
a.c(function (value) {
console.log(value); // 66
});
