目录
一、this指向原理
二、this指向例子详解【把例子看完看懂就差不多掌握了this了】
三、改变this的指向
this的指向始终坚持的原理：
（1）this永远指向最后调用它的那个对象
（2）前面没有调用对象的那最后调用它的的就是全局对象window【这里要注意是不是在严格模式情况下，下面的例子有介绍】
（3）如果箭头函数被非箭头函数包含，则 this 绑定的是最近一层非箭头函数的 this【就是最近一层非剪头函数的父级】，否则，this 为 undefined
(1) 例一，最后调用fn()的是a，this永远指向最后调用它的那个对象，则fn()函数中的this指向的就是a对象，则输出的就是a中的name"Cherry"
var name = "windowsName"; var a = { name: "Cherry", fn : function () { console.log(this.name); // Cherry } } a.fn();（2）例二，a()前面没有调用对象，则调用它的就是全局对象window，所以a()函数中的this指向的就是window，输出的就是"windowsName"【需要注意的是，没有严格模式的时候，前面没有调用对象的则调用它的就是window对象，即window.a()；要是使用严格模式的话，全局模式就是undefined】
非严格模式：a()函数中的this指的就是window
var name = "windowsName"; function a() { var name = "Cherry"; console.log(this.name); // windowsName console.log("inner:" + this); // inner:[object Window] } a(); console.log("outer:" + this) // outer:[object Window]严格模式：a()函数中的this指的就是undefined【注意查看输出的区别】
"use strict" var name = "windowsName"; function a() { var name = "Cherry"; console.log(this.name); // Uncaught TypeError: Cannot read property 'name' of undefined console.log("inner:" + this); // inner:undefined } a(); console.log("outer:" + this) // outer:[object Window]（3）例三，永远记住上面提到的原理："this永远指向最后一个调用它的对象"，所以虽然调用fn()时最前面加了一个window，但最后一个调用它的仍然是a()，所以fn()中的this的指向仍然是a对象
var name = "windowsName"; var a = { name: "Cherry", fn : function () { console.log(this.name) // Cherry } } window.a.fn();（4）例四，原理分析就和例三十一样的，就算 a 中没有 name 这个属性，也不会继续向上一个对象寻找 this.name，而是直接输出 undefined
var name = "windowsName"; var a = { fn : function () { console.log(this.name); // undefined } } window.a.fn();（5）例五，【这个例子有些陷阱】虽然对fn进行了赋值，但是没有调用，"this 永远指向最后调用它的那个对象，前面没有调用对象的那最后调用它的的就是全局对象window"，所以最后调用fn()的就是全局变量window，则输出的就是全局变量中的name
var name = "windowsName"; var a = { name: "Cherry", fn : function () { console.log(this.name) // windowsName } } var f = a.fn f()（6）例六，只要记住"this 永远指向最后调用它的那个对象，前面没有调用对象的那最后调用它的的就是全局对象window"，所以就知道innerFunction()函数的其实就是window调用的，输出的就是全局变量name
var name = "windowsName"; function fn() { var name = 'Cherry'; innerFunction(); function innerFunction() { console.log(this.name); // windowsName } } fn()1、使用ES6的箭头函数改变this指向
（1）不使用箭头函数：在这个例子中，调用setTimeout的对象是window，所以this指的就是window对象，但是window对象中并没有function1函数，所以会报错
var name = "windowsName"; var a = { name : "Cherry", func1: function () { console.log(this.name) }, func2: function () { setTimeout( function () { this.func1() // Uncaught TypeError: this.func1 is not a function },100); } }; a.func2()（2）使用箭头函数：使用箭头函数进行改造，ES6 的箭头函数是可以避免 ES5 中使用 this 的坑的，箭头函数的 this 始终指向函数定义时的 this，而非执行时【“箭头函数中没有 this 绑定，必须通过查找作用域链来决定其值，如果箭头函数被非箭头函数包含，则 this 绑定的是最近一层非箭头函数的 this，否则，this 为 undefined”。】
由上面的分析知道，定时器中的this绑定的就是func2中的this，输出func2中的this，可只是a()对象，所以输出就是a对象中的name
var name = "windowsName"; var a = { name : "Cherry", func1: function () { console.log(this.name) // Cherry }, func2: function () { setTimeout( () => { this.func1() },100) } } a.func2()2、在函数内部使用_this = this
为了防止在 func2 中的 setTimeout 被 window 调用而导致的在 setTimeout 中的 this 为 window，设置 var _this = this，这里的 this 是调用 func2 的对象 a
var name = "windowsName"; var a = { name : "Cherry", func1: function () { console.log(this.name) }, func2: function () { var _this = this setTimeout( function() { _this.func1() },100) } }; a.func2() // Cherry3、使用 apply、call、bind
（1）使用 apply
var a = { name : "Cherry", func1: function () { console.log(this.name) // Cherry }, func2: function () { setTimeout( function () { this.func1() }.apply(a),100); } }; a.func2()（2）使用 call
var a = { name : "Cherry", func1: function () { console.log(this.name) // Cherry }, func2: function () { setTimeout( function () { this.func1() }.call(a),100); } }; a.func2()（3）使用 bind
var a = { name : "Cherry", func1: function () { console.log(this.name) // Cherry }, func2: function () { setTimeout( function () { this.func1() }.bind(a)(),100); } }; a.func2()参考文献地址：https://juejin.im/post/59bfe84351882531b730bac2#comment
【大部分都是sunshine小小倩大神的原创，我只是按照我自己的思路完善整理了一下，感谢大神的整理】
