在函数中this到底取何值，是 ** 在函数真正被调用执行的时候确定下来的 ** ，函数定义的时候确定不了。
因为this的取值是执行上下文环境的一部分，每次调用函数偶会产生一个新的执行上下文环境，当你在代码中使用了this，这个this的值就直接从执行的上下文中获取了，而不会从作用域链中搜寻。
1. 全局&调用普通函数
在全局环境中，this永远指向window
console.log(this === window); // true
普通函数在调用的时候（注意不是构造函数，前面不加new），其中的this也是指向window：
var x = 10;
function foo() {
console.log(this);
console.log(this.x);
}
foo();
// window
// 10
2. 构造函数
所谓构造函数就是由一个函数new出来的对象，一般构造函数的函数名首字母大写，例如像Object，Function，Array这些都属于构造函数。
function Foo() {
this.x = 10;
console.log(this);
}
var foo = new Foo();
console.log(foo.x);
// 10
上述代码，吐过函数作为构造函数使用，那么其中的this就代表它即将new出来的对象。
但是如果直接调用Foo函数，而不是new Foo()，那就变成情况一，这时候Foo()就变成普通函数：
function Foo() {
this.x = 10;
console.log(this);
}
var foo = Foo();
console.log(foo.x);
// window
// undefined
3. 对象方法
如果函数作为对象的方法时，方法中的this指向该对象。
var obj = {
x : 10,
foo : function() {
console.log(this);
console.log(this.x);
}
}
};
obj.foo();
// object
// 10
- 注意：若是在对象方法中定义函数，那么情况就不同了
var obj = {
x : 10,
foo : function () {
function f() {
console.log (this);
console.log(this.x);
}
f();
}
}
obj.foo()
// window
// undefined
函数f虽然是在 obj.foo 内部定义的，但它仍然属于一个普通函数，this 仍指向 window；
在这里，如果想要调用上层作用域中的变量 obj.x，可以使用 self 缓存外部 this 变量
如果函数不作为对象方法被调用：
var obj = {
x : 10,
foo : function() {
console.log(this);
console.log(this.x);
}
};
var fn = obj.foo;
fn();
obj.foo 被赋值给一个全局变量，并没有作为 obj 的一个属性被调用，那么此时 this 的值是 window
4. 构造函数 prototype 属性
functionFoo（） {
this.x = 10;
}
Foo.prototype.getX = function() {
console.log(this);
console.log(this.x);
}
var foo = new Foo();
foo.getX ()
// Foo { x: 10, getX : function}
// 10
在 Foo.prototype.getX 函数中，this指向foo对象，不仅如此，即使是在整个原型链中，this 代表的也是当前对象的值。
5. 函数用call，apply 或者 bind 调用
var obj = {
x : 10
}
function foo() {
console.log(this);
console.log(this.x);
}
foo.call(obj);
foo.apply(obj);
foo.bind(obj)();
// {x:10}
// 10
当一个函数被call，apply或者bind调用是，this的值就是传入对象的值。
6. DOM event this
在一个HTML DOM事件处理程序里，this始终指向这个处理程序所绑定的 HTML DOM节点：
function Listener() {
document.getElementById('foo').addEventListener ('click', this.handleClick);
}
Listener.prototype.handleClick = function (event) {
console.log(this);
}
var listener = new Listener();
document.getElementById('foo').click();
//
前六种情况总结一句话为：this指向调用该方法的对象。
7. 箭头函数中的this
当使用箭头函数的时候，情况就有所不同了：箭头函数内部的this是词法作用域，由上下文确定
var obj = {
x: 10,
foo: function() {
var fn = () => {
return () => {
return () => {
console.log(this); //Object {x: 10}
console.log(this.x); //10
}
}
}
fn()()();
}
}
obj.foo();
// Object { x: 10 }
// 10