题记
JS中的this指向一直是个让初学者头疼的问题。今天，我们就一起来瞅瞅this倒地是咋回事，详细说说this指向原则，从此不再为了this指向操碎了心。
开篇
首先我们都知道this是Javascript语言的一个关键字。
它代表函数运行时，自动生成的一个内部对象，只能在函数内部使用。随着函数使用场合的不同，this的值会发生变化。但是有一个总的原则，那就是this的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁，实际上this的最终指向的是那个调用它所在函数的对象。 那么接下来我们一步步探索下这个问题。
探索一
function a() {
var user = "清蒸胖头鱼" ;
console.log( this .name); //undefined
console.log( this ); //Window
}
a();
window.a(); //两种结果相同
如我们上文所说的this的最终指向的是那个调用它所在函数的对象，这里a其实是由window对象点出来的。
探索二
var obj = {
name: '清蒸胖头鱼' ,
f1: function () {
console.log( this .name); //清蒸胖头鱼
}
};
obj.f1();
再次强调一点this的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁；这个例子this所在的f1函数是由obj对象调用的，所以这里的this指向obj对象。
探索三
如果要彻底的搞懂this必须看接下来的几个例子
var obj = {
a: 5,
b: {
a: 10,
fn: function () {
console.log( this .a); //10
}
}
};
obj.b.fn();
不是说this的最终指向的是那个调用它所在函数的对象吗？这里为什么不指向obj对象呢？
这里需要补充三点：
如果一个函数中有this，但是它没有被上一级的对象所调用，那么this指向的就是window。 如果一个函数中有this，这个函数有被上一级的对象所调用，那么this指向的就是上一级的对象。 如果一个函数中有this，这个函数中包含多个对象，尽管这个函数是被最外层的对象所调用，this指向的也只是它上一级的对象。看到这相信大家基本掌握了this指向的原则了吧，再碎碎念一遍：this的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁，实际上this的最终指向的是那个调用它所在函数的对象。
下面给大家介绍this几种不同的使用情况
构造函数(new 关键字)情况
function Student() {
this .name = '清蒸胖头鱼' ;
}
var s1 = new Student();
console.log(s1.name); // 清蒸胖头鱼
这里之所以对象s1可以点出函数Student里面的name 是因为new关键字可以改变this的指向，将这个this指向对象s1.
// new 关键字执行的过程
1. 在函数体内创建一个空的对象.
2. 让当前 this 指向这个空的对象.
3. 通过 this 给当前空的对象添加键值对.
4. 返回已经添加好所有键值对的对象给外面的变量.
定时器里的this指向情况
var num = 0;
function Obj() {
this .num = 1;
this .getNum1 = function () {
console.log( this .num);
};
this .getNum2 = function () {
setInterval( function () {
console.log( this .num);
}, 1000);
};
}
var o = new Obj();
o.getNum1(); //1 (o.num)
o.getNum2(); //0 (window.num)
o.getNum2() 值之所以为0，也就是这里的 this 指向 window ，再拿出我们的this指向原则解释： this 的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定 this 到底指向谁，实际上 this 的最终指向的是那个调用它所在函数的对象。
解： this.num 所在的函数为定时器 setInterval 内的 function () { console.log(this.num);} ，根据this指向原则当该函数被执行，this指向它的上一级对象。 setInterval ，又因 setInterval 是 window 点出了的，所以 this 指向 window 。
call 、 apply 、 bind 改变指向情况
var num = 0;
function Obj() {
this .num = 1;
this .getNum1 = function () {
console.log( this .num);
};
this .getNum2 = function () {
setInterval( function () {
console.log( this .num);
}.bind( this ), 1000); //利用bind将this绑定到这个函数上
};
}
var o = new Obj();
o.getNum1(); //1 (o.num)
o.getNum2(); //1 (o.num)
解释：
bind()方法是Function.prototype上的一个方法,当被绑定函数调用时,bind方法会创建一个新函数，并将第一个参数作为新函数的运行时的this。
根据原则：
没使用 bind 方法前：被调用时： this.num 指向的是调用它所在函数的对象，也就是 window.setTimeout 对象。 使用 bind 方法后：被调用时：将原来的 this 重新指向到→调用 getSum2 函数（就是新 this 所在的函数）的对象。这里构造函数，通过 new 调用，所以指向o对象。
bind 方法在该情况比较常用,当然如果使用 call 或 apply 方法来代替也行，得到的结果也是正确的，但是 call 和 apply 方法会在调用后马上执行，那样就没了延时的效果，定时器也就没有意义了。
以上就是详解JavaScript中的this指向问题的详细内容，更多关于JavaScript this指向的资料请关注服务器之家其它相关文章！
原文链接：https://juejin.cn/post/6924956367577546759
查看更多关于详解JavaScript中的this指向问题的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did63987