JavaScript中this指向

文章较长，希望你耐心阅读并有所收获。

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