前言
JavaScript中this指向是让很多初学者头疼的一个问题，也是面试时的高频考点，因为如果不彻底搞懂this的指向，可能会在开发中导致出现一些无法估量的问题
概念
- 无论在哪里调用函数，函数当中this的指向于调用他的对象
- 在JavaScript语言当中一切皆为对象，运行环境也是对象（web应用是window对象），所以函数都是在某个对象下运行的，而这个this就是指向函数运行时的对象
- ()=>{}箭头函数的this指向继承定义他的作用域的this的指向，也就是父级函数的this指向，并且一切绑定规则对箭头函数无效
原理
本来想了很久这块应该怎么写，后来发现了一篇解释的很详细的文章，所以我们拿来主义一下吧
普通函数
function fun(){
console.log(this.s);
}
var obj = {
s:'1',
f:fun
}
var s = '2';
obj.f(); //1
fun(); //2
上述代码中，fun函数被调用了两次，显而易见的是两次的结果不一样；
很多人都会这样解释，obj.f()的调用中，因为运行环境在obj对象内，因此函数中的this指向对象obj;
而在全局作用域下调用 fun() ，函数中的 this 就会指向全局作用域对象window;
但是大部分人不会告诉你，this的指向为什么会发生改变，this指向的改变到底是什么时候发生的； 而搞懂了这些，this的使用才不会出现意外；
首先我们应该知道，在JS中，数组、函数、对象都是引用类型，在参数传递时也就是引用传递；
上面的代码中，obj 对象有两个属性，但是属性的值类型是不同的，在内存中的表现形式也是不同的；
调用时就成了这个样子：
因为函数在js中既可以当做值传递和返回，也可当做对象和构造函数，所有函数在运行时需要确定其当前的运行环境，this就出生了，所以，this会根据运行环境的改变而改变，同时，函数中的this也只能在运行时才能最终确定运行环境；
再来看下面的代码，你可能会更加理解this对于运行环境的动态切换规则：
var A = {
name: '张三',
f: function () {
console.log('姓名：' + this.name);
}
};
var B = {
name: '李四'
};
B.f = A.f;
B.f() // 姓名：李四
A.f() // 姓名：张三
上面代码中，A.f属性被赋给B.f，也就是A对象将匿名函数的 地址 赋值给B对象；
那么在调用时，函数分别根据运行环境的不同，指向对象A和B
function foo() {
console.log(this.a);
}
var obj2 = {
a: 2,
fn: foo
};
var obj1 = {
a: 1,
o1: obj2
};
obj1.o1.fn(); // 2
obj1对象的o1属性值是obj2对象的地址，而obj2对象的fn属性的值是函数foo的地址；
函数foo的调用环境是在obj2中的，因此this指向对象obj2;
那么接下来，我们对this使用最频繁的几种情况做一个总结，最常见的基本就是以下5种：
对象中的方法，事件绑定 ，构造函数 ，定时器，函数对象的call()、apply() 方法；
上面在讲解this原理是，我们使用对象的方法中的this来说明的，在此就不重复讲解了，不懂的同学们，请返回去重新阅读；
()=>{}箭头函数【补充】
var a = 'window'
var obj1 = {
a: 'obj1',
fn: ()=>{
console.log(this.a)
}
}
var obj2 = {
a: 'obj2',
fn:function(){
console.log(this.a)
}
}
obj1.obj2fn = obj2.fn
obj1.fn() // window 永远指向声明时父级作用域的this的指向
obj2.fn() // obj2 动态指向调用他的对象
obj1.obj2fn() // obj1 动态指向调用他的对象
obj1.fn.apply(obj2) // window 无法被强制绑定this
obj2.fn.apply(obj1) // obj1 可以被强制绑定this
事件绑定中的this
事件绑定共有三种方式：行内绑定、动态绑定、事件监听；
行内绑定的两种情况：
<input type="button" value="按钮" onclick="clickFun()">
<script>
function clickFun(){
this // 此函数的运行环境在全局window对象下，因此this指向window;
}
</script>
<input type="button" value="按钮" onclick="this">
<!-- 运行环境在节点对象中，因此this指向本节点对象 -->
行内绑定事件的语法是在html节点内，以节点属性的方式绑定，属性名是事件名称前面加'on'，属性的值则是一段可执行的 JS 代码段；而属性值最常见的就是一个函数调用；
当事件触发时，属性值就会作为JS代码被执行，当前运行环境下没有clickFun函数，因此浏览器就需要跳出当前运行环境，在整个环境中寻找一个叫clickFun的函数并执行这个函数，所以函数内部的this就指向了全局对象window；如果不是一个函数调用，直接在当前节点对象环境下使用this，那么显然this就会指向当前节点对象；
动态绑定与事件监听：
<input type="button" value="按钮" id="btn">
<script>
var btn = document.getElementById('btn');
btn.onclick = function(){
this ; // this指向本节点对象
}
</script>
因为动态绑定的事件本就是为节点对象的属性(事件名称前面加'on')重新赋值为一个匿名函数，因此函数在执行时就是在节点对象的环境下，this自然就指向了本节点对象；
事件监听中this指向的原理与动态绑定基本一致，所以不再阐述；
构造函数中的this
function Pro(){
this.x = '1';
this.y = function(){};
}
var p = new Pro();
对于接触过 JS 面向对象编程的同学来说，上面的代码和图示基本都能看懂，new 一个构造函数并执行函数内部代码的过程就是这个五个步骤，当 JS 引擎指向到第3步的时候，会强制的将this指向新创建出来的这个对象；基本不需要理解，因为这本就是 JS 中的语法规则，记住就可以了；
window定时器中的this
var obj = {
fun:function(){
this ;
}
}
setInterval(obj.fun,1000); // this指向window对象
setInterval('obj.fun()',1000); // this指向obj对象
setInterval() 是window对象下内置的一个方法，接受两个参数，第一个参数允许是一个函数或者是一段可执行的 JS 代码，第二个参数则是执行前面函数或者代码的时间间隔；
在上面的代码中，setInterval(obj.fun,1000) 的第一个参数是obj对象的fun ，因为 JS 中函数可以被当做值来做引用传递，实际就是将这个函数的地址当做参数传递给了 setInterval 方法，换句话说就是 setInterval 的第一参数接受了一个函数，那么此时1000毫秒后，函数的运行就已经是在window对象下了，也就是函数的调用者已经变成了window对象，所以其中的this则指向的全局window对象；
而在 setInterval('obj.fun()',1000) 中的第一个参数，实际则是传入的一段可执行的 JS 代码；1000毫秒后当 JS 引擎来执行这段代码时，则是通过 obj 对象来找到 fun 函数并调用执行，那么函数的运行环境依然在 对象 obj 内，所以函数内部的this也就指向了 obj 对象；
函数对象的call()、apply() 方法
函数作为对象提供了call()，apply() 方法，他们也可以用来调用函数，这两个方法都接受一个对象作为参数，用来指定本次调用时函数中this的指向；
call()方法
call方法使用的语法规则
函数名称.call(obj,arg1,arg2...argN);
参数说明:
obj:函数内this要指向的对象,
arg1,arg2...argN :参数列表，参数与参数之间使用一个逗号隔开
var lisi = {names:'lisi'};
var zs = {names:'zhangsan'};
function f(age){
console.log(this.names);
console.log(age);
}
f(23);//undefined
//将f函数中的this指向固定到对象zs上；
f.call(zs,32);//zhangsan
apply()方法
函数名称.apply(obj,[arg1,arg2...,argN])
参数说明:
obj :this要指向的对象
[arg1,arg2...argN] : 参数列表，要求格式为数组
var lisi = {name:'lisi'};
var zs = {name:'zhangsan'};
function f(age,sex){
console.log(this.name+age+sex);
}
//将f函数中的this指向固定到对象zs上；
f.apply(zs,[23,'nan']);
注意：call和apply的作用一致，区别仅仅在函数实参参数传递的方式上；
这个两个方法的最大作用基本就是用来强制指定函数调用时this的指向；
参考
彻底搞懂JavaScript中的this指向问题 本来想自己写，后来发现自己写也不过如此，深度参考了该文章，并且做了一定的补充
