文章较长，希望你耐心阅读并有所收获。
this指向
想必各位看客老爷搜索此问题，多多少少还是被this迷惑住了，今天就讲一下JavaScript中的this指向问题。
例1:
var obj = {
showLog : function(){
console.log(this);
}
}
obj.showLog(); // obj对象
这个大家都知道会打印obj对象本身。在JavaScript中，this是个关键字。通常this理解为当 "前对象"，那么问题来了,"当前对象" 到底指向谁呢？
上面 例1 中this指向obj对象，接着看下面例2：
function showLog() {
console.log(this)
}
showLog(); // window对象
好奇了吧？为什么会打印 window对象呢 ？如果你觉得奇怪，那么可能是你忽略了 window 对象可以忽略不写这个问题。那么实际上就等同于：
function showLog(){
console.log(this);
}
window.showLog();
再举个例子（关于事件绑定）例3：
btn.onclick = function(){
console.log(this);
}
btn.onclick(); // 自行手动调用函数
// 除自行手动调用外，鼠标单击按钮也可以触发函数执行
在上面 例3 中，结果打印都是 btn 对象。通过上面例子我们可以简单总结为：this总是指向调用该函数的对象。也就是说：
obj.函数(); // 那么函数里的this，必然指向这个obj对象！
当然，文章到此就结束了吗 ？？？那肯定不可能这么不严谨，为了证明这个结论是否正确，那我们接下来就一一验证这个结论是否正确。
function showLog(){
console.log(this);
}
window.showLog(); // 打印window对象
var obj1 = {};
obj1.showLog1 = showLog;
obj1.showLog1(); // 打印obj1对象
var obj2 = {};
obj2.showLog2 = obj1.showLog1;
obj2.showLog2(); // 打印obj2对象
上面代码中，window对象和 obj1 对象和 obj2 对象，共享了一个函数 showLog，就等同于：
window.showLog == obj1.showLog1; //true
window.showLog == obj2.showLog2; //true
上面三个对象，用了同一个函数，但打印出的this是各不相同
window.showLog(); 打印出window对象
obj1.showLog1(); 打印出obj1对象
obj2.showLog2(); 打印出obj2对象
这貌似印证了：函数由哪个对象调用，this就指向哪个对象 ！！！
接着再次验证：
例4:
obj.onclick = function(){
setTimeout(function(){
console.log(this);
},0)
}
obj.onclick(); // window
打印这个定时器里面的 this 时，我们猛然发现，居然不是打印 obj 对象，难道我们得出的结论这么不堪一击？接下来，我们仔细研究一下这段代码：
btn.onclick = function(){ //<----这个函数，用A来表示
setTimeout(function(){ //<----这个函数，用B来表示
console.log(this);
},0)
}
btn.onclick();
通过上面代码和注释，我们不难发现，代码中出现了两个函数，一个函数A一个函数B，我们得出的结论是：函数由哪个对象调用，this就指向哪个对象（所以 this 指向会依赖它所在的函数），所以不难看出 this 很明显是在函数B中，因此我们现在知道了为什么不会打印 obj 对象，那肯定有人还会问，为什么函数B里的 this 指向 window 呢？？？这里话不多说，死死记住就行了，传入定时器的函数，this 都是指向 window 对象。
通过几个例子，我们证明了我们的 this 结论，函数由哪个对象调用，那么 this 就指向哪个对象。接下来几个练习让我们更加理解 this 指向问题。
function fn(){
console.log(this);
}
var obj = {
showLog: fn
}
btn.onclick = function(){
window.setTimeout(function(){
obj.showLog(); // obj 对象
}, 100);
}
上面的代码，最终打印还是obj对象
function fun1(){
function fun2(){
console.log(this);
}
fun2();
}
fun1();
不出意外，会打印window对象
最后的结论：
- this所在的函数由哪个对象调用，this就会指向谁
- 当函数执行时，没有明确的调用对象时，则this指向window
拓展问题： call() 、apply() 、bind()
例一：
var name = 'kattes' , age = 24
var obj = {
name : ' suncunxu ',
objAge : this.age,
myFun : function () {
console.log( this.name + " 年龄 " + this.age)
}
}
obj.objAge; // 24
obj.myFun();// suncunxu 年龄 undefined
例二：
var chairman = '习大大'
function showChairman(){
console.log( this.chairman )
}
showChairman() // 习大大
比较这两者 this 的差别，第一个打印里面的 this 指向 obj ，第二个全局声明的shows() 函数 this 是 window；
其实call()、apply()、bind() 都是用来重定义 this 这个对象的！
var name = 'kattes' , age = 24
var obj = {
name : ' suncunxu '
objAge : this.age
myFun : function () {
console.log( this.name + " 年龄 " + this.age)
}
}
var dboy = {
name: '小张' ，
age: 99
}
obj.myFun.call(db)； // 德玛年龄 99
obj.myFun.apply(db); // 德玛年龄 99
obj.myFun.bind(db)(); // 德玛年龄 99
微妙的差距！从上面四个结果不难看出:
call 、bind 、 apply 这三个函数的第一个参数都是 this 的指向对象，第二个参数差别就来了：
call 的参数是直接放进去的，第二第三第 n 个参数全都用逗号分隔，直接放到后面 obj.myFun.call(db,'成都', ... ,'string' )。
apply 的所有参数都必须放在一个数组里面传进去 obj.myFun.apply(db,['成都', ..., 'string' ])。
bind 除了返回是函数以外，它的参数和 call 一样。
当然，三者的参数不限定是 string 类型，允许是各种类型，包括函数 、 object 等等！
拓展问题之 ES6的箭头函数中的 this 指向（因为箭头函数不具备自己的this，所以非常简单，假装它不存在，就像这样，但是箭头函数里面的 this 是会继承外面的环境）
例(1)：
var obj = {
showLog : function(){
setTimeout( () => {
console.log(this);
}, 0)
}
}
obj.showLog(); // showLog函数
上面例子，就等同于
var obj = {
showLog : function(){
console.log(this);
}
}
obj.showLog(); // showLog函数
例(2)：
let obj={
a:222,
fn:function(){
setTimeout( function(){
console.log(this.a)
}, 0)
}
};
obj.fn();//undefined
不难发现，虽然 fn() 里面的 this 是指向 obj ，但是传给 setTimeout 的是普通函数， this 指向是 window ， window 下面没有 a ，所以这里输出 undefined。
换成箭头函数:
let obj={
a:222,
fn:function(){
setTimeout( ()=>{
console.log(this.a)
}, 0);
}
};
obj.fn();//222
这次输出 222 是因为，传给 setTimeout 的是箭头函数，然后箭头函数里面没有 this ，所以要向上层作用域查找，在这个例子上， setTimeout 的上层作用域是 fn。而 fn 里面的 this 指向 obj ，所以 setTimeout 里面的箭头函数的 this ，指向 obj 。所以输出 222 。
总结：以上就是今天我们所讲的 this 指向问题，包括常见的拓展问题，文章比较长，希望你能耐心看完并有所收获，当然也很开心你能看到这儿，如你有更好的方式方法，请留言告知，相互学习才能更快进步.
优秀文章推荐：
https://zhuanlan.zhihu.com/p/113105779
https://www.runoob.com/w3cnote/js-call-apply-bind.html
https://blog.csdn.net/weixin_37722222/article/details/81625826
网友评论