关于js中的this指向问题：有很多同学刚接触js时，对this的指向问题很是迷惑，在有些不常见情况，往往搞不清到底指向谁。对此，我们只需记住一点：this始终指向调用它的对象。废话少说，下面直接通过不同情况下的实例来说明其指向问题。
1、对象中的方法中的this，指向调用它的对象，即 b ,所以 this.a 的输出结果是b对象中的a的值； 如果b对象中没有a，则this.a的输出结果是 undefined。
var o = {
a: 10,
b: {
a: 12,
fn: function(){
console.log(this.a); // 输出结果是 12
console.log(this); // 输出结果是 b 对象
}
}
}
//调用
o.b.fn();
var o = {
a: 10,
b: {
fn: function(){
console.log(this.a); // undefined
console.log(this); // b对象
}
}
}
//调用
o.b.fn();
2、改变调用方法，不直接调用：改用赋值后调用，此时this的指向为window，所以this.a的输出结果为 undefined，因为全局中没有全局变量a。
var o = {
a: 10,
b: {
a: 12,
fn: function(){
console.log(this.a); //undefined 若在对象o外定义a，则输出的就是其在外定义的值(全局变量)
console.log(this); // window
}
}
}
var j = o.b.fn; //只是将b对象下的方法赋值给j，并没有调用
j(); //调用，此时绑定的对象是window,并非b对象直接调用
3、在对象方法中调用时：
var point = {
x : 0,
y : 0,
moveTo : function(x, y) {
this.x = this.x + x;
this.y = this.y + y;
console.log(this.x); // 1
console.log(this.y); // 1
}
};
point.moveTo(1, 1)//this 绑定到当前对象，即 point 对象
4、作为函数调用时
function someFun(x) {
this.x = x;
}
someFun(5); //函数被调用时，this绑定的是全局对象 window,相当于直接声明了一个全局变量x，并赋值为5
console.log(x); // x 已经成为一个值为 5 的全局隐式变量
更复杂一点的情况：如下所示，point对象中的x、y没有被改变，并结果中多了两个新的全局变量x,y，值都为1。根本原因是point对象下的moveTo方法中的moveX与moveX方法在调用时都是全局调用，绑定的对象都是window。
var point = {
x : 0,
y : 0,
moveTo : function(x, y) {
// 内部函数
var moveX = function(x) {
this.x = x;
};
// 内部函数
var moveY = function(y) {
this.y = y;
};
moveX(x); // 这里是全局调用
moveY(y);
};
};
point.moveTo(1, 1);
console.log(point.x); // 0
console.log(point.y); // 0
可以通过下面情况输出结果说明:
var point = {
x : 0,
y : 0,
moveTo : function(x, y) {
this.x = x;
console.log(this.x); // 1
console.log(this); // point对象
// 内部函数
var moveX = function(x) {
this.x = x;
};
// 内部函数
var moveY = function(y) {
this.y = y;
}
moveX(x); // 这里是全局调用
moveY(y);
}
};
point.moveTo(1, 1);
console.log(point.x); // 1
console.log(point.y); // 0
console.log(x); // 1
console.log(y);// 1
像如上对象中函数方法所示，本意是改变point对象中的x、y的值，而非新建全局变量。所以可以通过以下方法避免上述情况：
var point = {
x : 0,
y : 0,
moveTo : function(x, y) {
var that = this; //内部变量替换
// 内部函数
var moveX = function(x) {
that.x = x;
// this.x = x;
};
// 内部函数
var moveY = function(y) {
that.y = y;
// this.y = y;
}
moveX(x); //这里依然是全局调用，但是在给变量赋值时，不再是this指向，而是that指向，而that指向的对象是 point。
moveY(y);
}
};
point.moveTo(1, 1);
console.log(point.x); // 1
console.log(point.y); // 1
console.log(x) // 报错 x is not defined
console.log(y) //
另附将moveX、moveY由内部函数改为非内部函数后的一种情况示例：这种情况下moveX、moveY方法的调用时绑定在moveTo对象上的，因为moveTo对象一开始是没有x、y变量的，所以执行 this.x = x、this.y = y之后，相当于在moveTo对象中新建了两个变量。
var point = {
x : 0,
y : 0,
moveTo : {
// 内部函数
moveX: function(x) {
console.log(this) // {moveX: ƒ, moveY: ƒ}
this.x = x;
},
// 内部函数
moveY: function(y) {
this.y = y;
}
}
};
point.moveTo.moveX(1);
point.moveTo.moveY(1);
console.log(point.moveTo); // {moveX: ƒ, moveY: ƒ, x: 1, y: 1}
console.log(point.x); // 0
console.log(point.y); // 0
console.log(x) // x is not defined
console.log(y) //
5、作为构造函数调用：
function Point(x, y){
console.log(this); // point对象
this.x = x;
this.y = y;
this.moveTo = function(x,y){
this.x = x;
this.y = y;
console.log(this.x);//1 10
console.log(this.y);//1 10
}
}
var p1 = new Point(0,0); //注意这种形式方法的调用及apply、call的使用
var p2 = {
x:0,
y:0
}
p1.moveTo(1,1);
p1.moveTo.apply(p2,[10,10]);
console.log(x);// x is not defined
console.log(y);//
6、this在不同场景中的指向
①匿名函数中的this指向全局对象
var a = 10;
var foo = {
a: 20,
fn: (function(){
console.log(this); // window
console.log(this.a); // 10
})()
}
②setInterval和setTimeout定时器中的this指向全局对象
var a = 10;
var oTimer1 = setInterval(function(){
var a = 20;
console.log(this.a); // 10
clearInterval(oTimer1);
},100);
③eval中的this指向调用上下文中的this
(function(){
eval("console.log(this)"); // Window
})();
function Foo(){
this.bar = function(){
eval("console.log(this)"); // Foo
}
}
var foo = new Foo();
foo.bar();
④apply和call中的this指向参数中的对象
var a = 10;
var foo = {
a: 20,
fn: function(){
console.log(this.a);
}
};
var bar ={
a: 30
}
foo.fn.apply();//10(若参数为空，默认指向全局对象)
foo.fn.apply(foo);//20
foo.fn.apply(bar);//30
附：eval、apply、call方法的说明：
eval() 函数可计算某个字符串，并执行其中的的 JavaScript 代码。
call 、apply 这个两个函数的第一个参数都是 this 的指向对象，第二个参数的区别如下：
call的参数是直接放进去的，第二第三第n个参数全都用逗号分隔，直接放到后面 obj.myFun.call(db,'params1', ... ,'paramsn' )；
apply的所有参数都必须放在一个数组里面传进去 obj.myFun.apply(db,['params1', ..., 'paramsn' ]);
以上。
参考链接：
1、https://www.jb51.net/article/62166.htm
2、https://www.jb51.net/article/72146.htm
