详解Javascript 中的this指针

admin

前言
       Javascript是一门基于对象的动态语言，也就是说，所有东西都是对象，一个很典型的例子就是函数也被视为普通的对象。Javascript可以通过一定的设计模式来实现面向对象的编程，其中this “指针”就是实现面向对象的一个很重要的特性。但是this也是Javascript中一个非常容易理解错，进而用错的特性。特别是对于接触静态语言比较久了的同志来说更是如此。



示例说明
     我们先来看一个最简单的示例：


Js代码  收藏代码

   1. <script type="text/javascript">      
   2.       var name = "Kevin Yang";     
   3.       function sayHi(){         
   4.          alert("你好，我的名字叫" + name);      
   5.       }      
   6.       sayHi();  
   7. </script>  

<script type="text/javascript">   
      var name = "Kevin Yang";   
      function sayHi(){      
         alert("你好，我的名字叫" + name);   
      }   
      sayHi();
</script>



      这段代码很简单，我们定义了一个全局字符串对象name和函数对象sayHi。运行会弹出一个打招呼的对话框，“你好，我的名字叫Kevin Yang”。

      我们把这段代码稍微改一改：
Js代码  收藏代码

   1. <script type="text/javascript">      
   2.       var name = "Kevin Yang";   
   3.       function sayHi(){        
   4.            alert("你好，我的名字叫" + this.name);      
   5.       }     
   6.       sayHi();  
   7. </script>  

<script type="text/javascript">   
      var name = "Kevin Yang";
      function sayHi(){      
           alert("你好，我的名字叫" + this.name);   
      }   
      sayHi();
</script>



       这段代码和上段代码的区别就在于sayHi函数在使用name的时候加上了this.前缀。运行结果和上面一摸一样。这说明this.name引用的也还是全局的name对象。

        开头我们不是说了，函数也是普通的对象，可以将其当作一个普通变量使用。我们再把上面的代码改一改：
Js代码  收藏代码

   1. <script type="text/javascript">   
   2.      var name = "Kevin Yang";     
   3.      function sayHi(){   
   4.          alert("你好，我的名字叫" + this.name);     
   5.      }     
   6.      var person = {};     
   7.      person.sayHello = sayHi;     
   8.      person.sayHello();  
   9. </script>  

<script type="text/javascript">
     var name = "Kevin Yang";   
     function sayHi(){
         alert("你好，我的名字叫" + this.name);   
     }   
     var person = {};   
     person.sayHello = sayHi;   
     person.sayHello();
</script>



     这一次，我们又创建了一个全局对象person，并将sayHi函数对象赋给person对象的sayHello属性。运行结果如下：

         image



      这一次打招呼的内容就有点无厘头了，我们发现this.name已经变成undefined了。这说明，在sayHello函数内部执行时已经找不着this.name对象了。如果我们重新定义person对象，在其上面加上一个name属性又会怎么样呢？

var person = {name:"Marry"};运行代码发现打招呼的“人”变了：

       image



    是不是看出点道道了呢？



判别this指针的指导性原则
       在Javascript里面，this指针代表的是执行当前代码的对象的所有者。



       在上面的示例中我们可以看到，第一次，我们定义了一个全局函数对象sayHi并执行了这个函数，函数内部使用了this关键字，那么执行this这行代码的对象是sayHi（一切皆对象的体现），sayHi是被定义在全局作用域中。其实在Javascript中所谓的全局对象，无非是定义在window这个根对象下的一个属性而已。因此，sayHi的所有者是window对象。也就是说，在全局作用域下，你可以通过直接使用name去引用这个对象，你也可以通过window.name去引用同一个对象。因而this.name就可以翻译为window.name了。

       再来看第二个this的示例。我们定义了一个person的对象，并定义了它的sayHello属性，使其指向sayHi全局对象。那么这个时候，当我们运行person.sayHello的时候，this所在的代码所属对象就是sayHello了（其实准确来说，sayHi和sayHello是只不过类似两个指针，指向的对象实际上是同一个），而sayHello对象的所有者就是person了。第一次，person里面没有name属性，因此弹出的对话框就是this.name引用的就是undefined对象（Javascript中所有只声明而没有定义的变量全都指向undefined对象）；而第二次我们在定义person的时候加了name属性了，那么this.name指向的自然就是我们定义的字符串了。

      理解了上面所说的之后，我们将上面最后一段示例改造成面向对象式的代码。
Js代码  收藏代码

   1. <script type="text/javascript">      
   2.       var name = "Kevin Yang";     
   3.       function sayHi(){      
   4.           alert("你好，我的名字叫" + this.name);      
   5.       }     
   6.       function Person(name){      
   7.           this.name = name;     
   8.      }      
   9.      Person.prototype.sayHello = sayHi;   
  10.      var marry = new Person("Marry");     
  11.      marry.sayHello();   
  12.      var kevin = new Person("Kevin");      
  13.      kevin.sayHello();  
  14. </script>  

<script type="text/javascript">   
      var name = "Kevin Yang";   
      function sayHi(){   
          alert("你好，我的名字叫" + this.name);   
      }   
      function Person(name){   
          this.name = name;   
     }   
     Person.prototype.sayHello = sayHi;  
     var marry = new Person("Marry");   
     marry.sayHello();  
     var kevin = new Person("Kevin");   
     kevin.sayHello();
</script>



      在上面这段代码中，我们定义了一个Person的“类”（实际上还是一个对象），然后在这个类的原型（类原型相当于C++中的静态成员变量的概念）中定义了sayHello属性，使其指向全局的sayHi对象。运行代码我们可以看到，marry和kevin都成功的向我们打了声“招呼”。

      在这段代码中有两点需要思考的，一个是new我们很熟悉，但是在这里new到底做了什么操作呢？另外一个是，这里执行sayHello的时候，this指针为什么能够正确的指向marry和kevin对象呢？

      我们来把上面定义“类”和实例化类对象的操作重新“翻译”一下：
Js代码  收藏代码

   1. <script type="text/javascript">     
   2.       var name = "Kevin Yang";     
   3.       function sayHi(){        
   4.           alert("你好，我的名字叫" + this.name);      
   5.       }     
   6.       function Person(name){         
   7.           var this;         
   8.           this.name = name;         
   9.           return this;     
  10.       }      
  11.       Person.prototype.sayHello = sayHi;   
  12.       var marry = Person("Marry");      
  13.       marry.sayHello();   
  14.       var kevin = Person("Kevin");   
  15.       kevin.sayHello();  
  16. </script>  

<script type="text/javascript">   
      var name = "Kevin Yang";   
      function sayHi(){      
          alert("你好，我的名字叫" + this.name);   
      }   
      function Person(name){      
          var this;      
          this.name = name;        
          return this;   
      }   
      Person.prototype.sayHello = sayHi;  
      var marry = Person("Marry");     
      marry.sayHello();  
      var kevin = Person("Kevin");  
      kevin.sayHello();
</script>



         当然这段代码并不能正确执行，但是它可以帮助你更好的理解这个过程。

         当我们使用new关键字实例化一个“类”对象的时候，Javascript引擎会在这个对象内部定义一个新的对象并将其存入this指针。所有此对象内部用到this的代码实际上都是指向这个新的对象。如this.name = name，实际上是将参数中的name对象赋值给了这个新创建的对象。函数对象执行完之后Javascript引擎会将此对象返回给你，于是就有 marry变量得到的对象的name为“Marry”，而kevin变量得到的对象的name属性确实“Kevin”。



显式操纵this指针
        在上面的面向对象式编程实例中，我们看到，在使用new操作符的情况下，看起来this的指向和我们前一节中讲到的指导原则并不相符。 this指针并没有指向marry或者kevin的所有者，而是指向marry和kevin变量本身。

        实际上，如果你理解什么是指针的话，那么你就会知道，既然是指针，那么当然可以改变其指向的对象。只不过Javascript引擎不允许我们自己写代码来做这样的事情，也就是说，在Javascript中，你不可以直接写this = someObj这样的代码。Javascript引擎通过以下两种方式允许我们显式指定this指针指代的对象：

        1. 通过new操作符，Javascript引擎会将this指针返回给被赋值的变量A（对应上面的例子就是marry和kevin变量），这个时候A和 this指针引用的就是同一个对象了，即A == this。过程参见上面的伪代码。

        2. 通过Function.apply或者Function.call的原型方法，我们可以将this指针指代的对象以参数的形式传入，这个时候，函数内部使用的this指针就是传入的参数。

        注意，对于这种显式指定this指针的情况，上一节提到的指导原则不再适用。



容易误用的情况
       理解了this指针后，我们再来看看一些很容易误用this指针的情况。

      

       示例1——内联式绑定Dom元素的事件处理函数
Html代码  收藏代码

   1. <script type="text/javascript">      
   2.      function sayHi(){         
   3.          alert("当前点击的元素是" + this.tagName);   
   4.       }     
   5. </script>  
   6. <input id="btnTest" type="button" value="点击我">  

<script type="text/javascript">   
     function sayHi(){      
         alert("当前点击的元素是" + this.tagName);  
      }   
</script>
<input id="btnTest" type="button" value="点击我">



     在此例代码中，我们绑定了button的点击事件，期望在弹出的对话框中打印出点击元素的标签名。但运行结果却是：

         image



       也就是this指针并不是指向input元素。这是因为当使用内联式绑定Dom元素的事件处理函数时，实际上相当于执行了以下代码：
Js代码  收藏代码

   1. <script type="text/javascript">     
   2.      document.getElementById("btnTest").onclick =  function({                        
   3.                         sayHi();      
   4.               }  
   5. </script>  

<script type="text/javascript">   
     document.getElementById("btnTest").onclick =  function({                     
                        sayHi();   
              }
</script>



       在这种情况下sayHi函数对象的所有权并没有发生转移，还是属于window所有。用上面的指导原则一套我们就很好理解为什么this.tagName是undefined了。

      

      那么如果我们要引用元素本身怎么办呢？

      我们知道，onclick函数是属于btnTest元素的，那么在此函数内部，this指针正是指向此Dom对象，于是我们只需要把this作为参数传入sayHi即可。
Js代码  收藏代码

   1. <script type="text/javascript">  
   2.     function sayHi(el){        
   3.        alert("当前点击的元素是" + el.tagName);     
   4.    }  
   5. </script>  
   6. <input id="btnTest" type="button" value="点击我">  

<script type="text/javascript">
    function sayHi(el){      
       alert("当前点击的元素是" + el.tagName);   
   }
</script>
<input id="btnTest" type="button" value="点击我">



等价代码如下：
Js代码  收藏代码

   1. <script type="text/javascript">  
   2.      document.getElementById("btnTest").onclick = function(){              
   3.                       sayHi(this);      
   4.       }  
   5. </script>  

<script type="text/javascript">
     document.getElementById("btnTest").onclick = function(){            
                      sayHi(this);   
      }
</script>





      示例2——临时变量导致的this指针丢失
Js代码  收藏代码

   1. <script type="text/javascript">      
   2.    var Utility = {         
   3.         decode:function(str){              
   4.             return unescape(str);         
   5.         },         
   6.         getCookie:function(key){     
   7.              // ... 省略提取cookie字符串的代码            
   8.          var value = "i%27m%20a%20cookie";              
   9.              return this.decode(value);         
  10.          }   
  11.    };     
  12.    alert(Utility.getCookie("identity"))  
  13. </script>  

<script type="text/javascript">   
   var Utility = {      
        decode:function(str){            
            return unescape(str);        
        },        
        getCookie:function(key){   
             // ... 省略提取cookie字符串的代码           
         var value = "i%27m%20a%20cookie";            
             return this.decode(value);        
         }  
   };   
   alert(Utility.getCookie("identity"))
</script>



       我们在写稍微有点规模的Js库的时候，一般都会自己封装一个Utility的类，然后将一些常用的函数作为Utility类的属性，如客户端经常会用到的 getCookie函数和解码函数。如果每个函数都是彼此独立的，那么还好办，问题是，函数之间有时候会相互引用。例如上面的getCookie函数，会对从document.cookie中提取到的字符串进行decode之后再返回。如果我们通过Utility.getCookie去调用的话，那么没有问题，我们知道，getCookie内部的this指针指向的还是Utility对象，而Utility对象时包含decode属性的。代码可以成功执行。

      但是有个人不小心这样使用Utility对象呢？
Js代码  收藏代码

   1. <script type="text/javascript">     
   2.       function showUserIdentity(){         
   3.              // 保存getCookie函数到一个局部变量，因为下面会经常用到         
   4.         var getCookie = Utility.getCookie;         
   5.             alert(getCookie("identity"));      
   6.      }      
   7.      showUserIdentity();  
   8. </script>  

<script type="text/javascript">   
      function showUserIdentity(){      
             // 保存getCookie函数到一个局部变量，因为下面会经常用到        
        var getCookie = Utility.getCookie;        
            alert(getCookie("identity"));   
     }   
     showUserIdentity();
</script>



        这个时候运行代码会抛出异常“this.decode is not a function”。运用上面我们讲到的指导原则，很好理解，因为此时Utility.getCookie对象被赋给了临时变量getCookie，而临时变量是属于window对象的——只不过外界不能直接引用，只对Javascript引擎可见——于是在getCookie函数内部的this指针指向的就是window对象了，而window对象没有定义一个decode的函数对象，因此就会抛出这样的异常来。

      这个问题是由于引入了临时变量导致的this指针的转移。解决此问题的办法有几个：

       1,不引入临时变量，每次使用均使用Utility.getCookie进行调用
       2, getCookie函数内部使用Utility.decode显式引用decode对象而不通过this指针隐式引用（如果Utility是一个实例化的对象，也即是通过new生成的，那么此法不可用）
       3, 使用Funtion.apply或者Function.call函数指定this指针



       前面两种都比较好理解，第三种需要提一下。正是因为this指针的指向很容易被转移丢失，因此Javascript提供了两个类似的函数apply和call来允许函数在调用时重新显式的指定this指针。

       修正代码如下：
Js代码  收藏代码

   1. <script type="text/javascript">      
   2.        function showUserIdentity(){         
   3.             // 保存getCookie函数到一个局部变量，因为下面会经常用到         
   4.         var getCookie = Utility.getCookie;         
   5.             alert(getCookie.call(Utility,"identity"));         
   6.             alert(getCookie.apply(Utility,["identity"]));      
   7.        }      
   8.        showUserIdentity();  
   9. </script>  

<script type="text/javascript">   
       function showUserIdentity(){        
            // 保存getCookie函数到一个局部变量，因为下面会经常用到        
        var getCookie = Utility.getCookie;        
            alert(getCookie.call(Utility,"identity"));        
            alert(getCookie.apply(Utility,["identity"]));   
       }   
       showUserIdentity();
</script>



       call和apply只有语法上的差异，没有功能上的差别。



示例3——函数传参时导致的this指针丢失

     我们先来看一段问题代码：
Js代码  收藏代码

   1. <script type="text/javascript">     
   2.      var person = {         
   3.             name:"Kevin Yang",      
   4.             sayHi:function(){            
   5.                 alert("你好，我是"+this.name);        
   6.             }     
   7.      }     
   8.       setTimeout(person.sayHi,5000);  
   9. </script>  

<script type="text/javascript">   
     var person = {        
            name:"Kevin Yang",     
            sayHi:function(){           
                alert("你好，我是"+this.name);      
            }   
     }   
      setTimeout(person.sayHi,5000);
</script>



       这段代码期望在访客进入页面5秒钟之后向访客打声招呼。setTimeout函数接收一个函数作为参数，并在指定的触发时刻执行这个函数。可是，当我们等了5秒钟之后，弹出的对话框显示的this.name却是undefined。

       其实这个问题和上一个示例中的问题是类似的，都是因为临时变量而导致的问题。当我们执行函数的时候，如果函数带有参数，那么这个时候Javascript 引擎会创建一个临时变量，并将传入的参数复制（注意，Javascript里面都是值传递的，没有引用传递的概念）给此临时变量。也就是说，整个过程就跟上面我们定义了一个getCookie的临时变量，再将Utility.getCookie赋值给这个临时变量一样。只不过在这个示例中，容易忽视临时变量导致的bug。



函数对象传参
      对于函数作为参数传递导致的this指针丢失的问题，目前很多框架都已经有方法解决了。



     Prototype的解决方案——传参之前使用bind方法将函数封装起来，并返回封装后的对象
Js代码  收藏代码

   1. <script type="text/javascript">      
   2.       var person = {         
   3.            name:"Kevin Yang",         
   4.            sayHi:function(){            
   5.                alert("你好，我是"+this.name);         
   6.            }     
   7.       }      
   8.        var boundFunc = person.sayHi.bind(person,person.sayHi);                  
   9.        setTimeout(boundFunc,5000);  
  10. </script>  

<script type="text/javascript">   
      var person = {        
           name:"Kevin Yang",        
           sayHi:function(){           
               alert("你好，我是"+this.name);        
           }   
      }   
       var boundFunc = person.sayHi.bind(person,person.sayHi);               
       setTimeout(boundFunc,5000);
</script>

      bind方法的实现其实是用到了Javascript又一个高级特性——闭包。我们来看一下源代码：


Js代码  收藏代码

   1. function bind(){   
   2.    if (arguments.length < 2 && arguments[0] === undefined)      
   3.      return this;  
   4.      var __method = this,   
   5.      args = $A(arguments),  
   6.      object = args.shift();      
   7.      return function(){         
   8.          return __method.apply(object, args.concat($A(arguments)));      
   9.      }  
  10. }  

function bind(){
   if (arguments.length < 2 && arguments[0] === undefined)     
     return this;
     var __method = this,
     args = $A(arguments),
     object = args.shift();   
     return function(){        
         return __method.apply(object, args.concat($A(arguments)));   
     }
}



      首先将this指针存入函数内部临时变量，然后在返回的函数对象中引用此临时变量从而形成闭包。



微软的Ajax库提供的方案——构建委托对象

  
Java代码  收藏代码

   1. <script type="text/javascript">      
   2. var person = {         
   3.     name:"Kevin Yang",         
   4.     sayHi:function(){              
   5.          alert("你好，我是"+this.name);        
   6.     }     
   7.  }         
   8.  var boundFunc = Function.createDelegate(person,person.sayHi);     
   9.  setTimeout(boundFunc,5000);  
  10. </script>  

<script type="text/javascript">   
var person = {      
    name:"Kevin Yang",        
    sayHi:function(){            
         alert("你好，我是"+this.name);      
    }   
}      
var boundFunc = Function.createDelegate(person,person.sayHi);   
setTimeout(boundFunc,5000);
</script>



        其实本质上和prototype的方式是一样的。

       著名的Extjs库的解决方案采用的手法和微软是一样的。