js this指向练习题

this指向及应用

关于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' ]);
以上。