浅谈JavaSript中的this

Posted 2020-09-21 大胡龙的小圈子

　　javascript的this对初学者来说一直是一个很头疼的问题,因为它的指向刚刚接触的时候往往觉得有点莫名奇妙,这篇博客用实例来概括一下,this代表什么以及如何改变函数的this.

　　在<JavaScript高级程序设计>一书中,对this做出了简单的介绍.即"this引用了函数据以执行的环境对象".如何理解这句话呢?先来看看第一个实例:

　　  function testFun1() {
         var num = 3;
         alert(this.num);
     }
     function testFun2() {
         var num = 4;
         testFun1();
     }
     testFun2();//undefined

　　上面的代码输出undefined,从这个例子我们可以看出this是不会引用具体的某个函数对象的(虽然在JavaScript中,函数也是对象的一种).那么在上述情况下,this代表什么呢?可以在testFun1()中运行下面代码:

alert(this);

　　输出的结果如下:

　　可以得出如下结论:在直接调用函数的时候,this代指window对象!

　　为了证明上述结论,可以使用下面例子验证:

　　  var num = 10;
     function testFun1() {
         var num = 3;
         alert(this.num);
     }
     function testFun2() {
         var num = 4;
         testFun1();
     }
     testFun2();//10

　　接下来是第二个示例,我们将函数作为一个对象的属性:

　　  var num = 10;
     function testFun1() {
         var num = 3;
         alert(this.num);
     }
    var o = new Object();
     o.num = 2;
     o.fun1 = testFun1;
     o.fun1();//2

　　可以看出,当通过对象调用函数的时候(这个和Java中的对象调用方法倒挺类似的),则this指向这个对象.那么如果存在多层对象的嵌套呢?看看下面的例子:

　　 var num = 10;
    var inObj = new Object();
    var outObj = new Object();
    outObj.innerObj = inObj;
    outObj.num = 10;
    inObj.num = 5;
    inObj.infun = testFun1;
     function testFun1() {
         alert(this.num);//5
     }
     outObj.innerObj.infun();

　　从上面的例子看出来,当存在多层对象的嵌套的时候,则this指向离函数"最近"的对象.

　　讨论完this之后,我们在讨论下如何改变函数中的this.下面的示例演示了两种改变this的方式:

　　　 var num = 3;
      function print() {
          alert(this.num);
      }
      var obj = {"num":10};
      print.call(window);//3
      print.call(obj);//10
      print.call();//3
      var objPrint = print.bind(obj);
      var windowPrint = print.bind(window);
      objPrint();//10
      windowPrint();//3

　　call方法代表执行函数,传入的第一个参数代指函数的执行环境,因此在传入window,则通过call方法执行函数的时候.this指向window.传入对象的时候,this指向该对象.

　　bind方法则将该函数绑定一个执行环境,并且返回绑定该执行环境的函数对象.可以直接调用.