浅谈JavaSript中的this

2022-10-21 21:42:29

　　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();//

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

　　  var num = 10;

     function testFun1() {

         var num = 3;

         alert(this.num);

     }

    var o = new Object();

     o.num = 2;

     o.fun1 = testFun1;

     o.fun1();//

　　可以看出,当通过对象调用函数的时候(这个和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);//

     }

     outObj.innerObj.infun();

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

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

　　　 var num = 3;

      function print() {

          alert(this.num);

      }

      var obj = {"num":10};

      print.call(window);//

      print.call(obj);//

      print.call();//

      var objPrint = print.bind(obj);

      var windowPrint = print.bind(window);

      objPrint();//

      windowPrint();//

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

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

码农公寓

相关文章