深入浅出this关键字
与python等其他的编程语言相比，this 关键字在 JavaScript 中的表现有所不同，是否是严格模式也会影响this的绑定；这里面套路众多，一不小心就可能出错，而且this作为动态作用域的表亲，与JavaScript的词法作用域差别很大，因此很多人称它为JavaScript的一个大坑。（我也是这样认为的，2333）
在绝大多数情况下，函数的调用方式决定了this的值。this不能在执行期间被赋值，并且在每次函数被调用时this的值也可能会不同。在此我们主要讨论一下较为常见的几种调用方式和在ES6中的箭头函数中的this。
几种较为常见的调用方式：
1.在全局范围内使用this，它将会指向全局对象即window.
var a = 1;
console.log(this.a); // 1
console.log(this === window); // true
this.b = "hello,world";
console.log(window.b); // "hello,world"
console.log(b); // "hello,world"
2.在函数中调用时，也会指向全局对象。而在node中则指向global：
var a = 1;
function fn(){
var a = 2;
console.log(a);
}
fn(); //1
//所以要注意的是：
//在浏览器中：
fn() === window;
//在Node中：
fn() === global;
要注意的是在ES5的严格模式下，不存在全局变量。this将保持他进入执行上下文时的值，这种情况下this将会是undefined:
"use strict"
function fn(a){
console.log(this);
}
fn(1); //undefined
fn() === undefined; // true
3.方法调用text.foo(); 在这个例子时this指向text对象。要注意的是这样的行为，根本不受函数定义方式或位置的影响。而且this 的绑定只受最靠近的成员引用的影响
var text = {
num: 1,
foo: function() {
return this.num;
}
};
console.log(text.foo()); // 1
fn = text.foo;
text.a = {b: fn, num: 2};
console.log(text.a.b()); // 2
4.当一个函数用作构造函数时，它的this就会被绑定到正在构造的新对象中：
function Person(age){
this.age = age;
}
var jake = new Person(18);
jake.age; //18
5.当使用call或者apply方法时，函数内的this将会被显式设置为函数调用的第一个参数。
//对象也可以作为call和apply传入的第一个参数，且this会显式的设置为该对象
var obj = {a: 1};
// 这个属性是在global对象定义的。
var a = 2;
function fn() {
// this的值取决于函数的调用方式
return this.a;
}
fn(); // 2
fn.call(obj); // 1
fn.apply(obj); // 1
用 call 和 apply 函数的时候还要注意，如果传递给 this 的值不是一个对象，JavaScript 会尝试使用内部 ToObject 操作将其转换为对象。
6.调用obj.bind()时可以创建一个与obj有着相同函数体和作用域的函数，但this将永久地被绑定到了bind的第一个参数，无论这个函数是如何被调用的。
var obj = {name: 'Jake'};
function sayName(){
console.log(this.name)
};
var fn = sayName.bind(obj);
// 注意 这里 fn还是一个函数
//功能和 sayName 一模一样，区别只在于它里面的 this 是 obj
fn() // 输出： 'Jake'
7.原型链中的 this仍然指向调用它的对象，这很好理解：
var fn = {
add : function(){
return this.a + this.b;
}
};
var p = Object.create(fn);
p.a = 1;
p.b = 2;
console.log(p.add()); // 3
8.当函数被用作事件处理函数时，它的this指向触发事件的元素:
// 被调用时，将关联的元素变成蓝色
function bluify(e){
//在控制台打印出所点击元素
console.log(this);
//阻止时间冒泡
e.stopPropagation();
//阻止元素的默认事件
e.preventDefault();
this.style.backgroundColor = '#A5D9F3';
}
// 获取文档中的所有元素的列表
var elements = document.getElementsByTagName('*');
// 将bluify作为元素的点击监听函数，当元素被点击时，就会变成蓝色
for(var i=0 ; i<elements.length ; i++){
elements[i].addEventListener('click', bluify, false);
}
箭头函数
由于this的高复杂性，this绑定也成为了JavaScript中最常出错的因素之一。因此在ES6中的箭头函数没有了this绑定，必须通过查找作用域链来决定其值，而在全局代码中，它将被设置为全局对象：
var obj = this;
var foo = (() => this);
console.log(foo() === obj); // true
由于箭头函数不绑定this，所以 call() / apply() / bind() 方法对于箭头函数来说只是传入参数，对它的 this毫无影响。
//接着上面的代码
var a = {foo: foo};
console.log(a.foo() === obj); // true
// 用call来绑定this
console.log(foo.call(a) === obj); // true
// 用call来绑定this
foo = foo.bind(a);
console.log(foo() === obj); // true
考虑到 this 是词法层面上的，严格模式中与 this 相关的规则都将被忽略。（可以忽略是否在严格模式下的影响）
var a = () => {'use strict'; return this};
var b = () => { return this};
console.log(1,a() === window);
console.log(2,a() === b());
//1 true
//2 true
而当箭头函数作为方法调用时，this会是怎样的呢？
var obj = {
a: 1,
b: () => console.log(this.a, this),
c: function() {
console.log( this.a, this)
}
}
obj.b(); // undefined Window{postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, frames: Window,…}
obj.c(); // 1 {a: 1, b: ƒ, c: ƒ}
可以看到的是作为方法的箭头函数this指向全局对象(window)，而普通函数中的this则指向调用它的对象。
