javaScript中this关键字的指向

js中的this是一个关键字，是一个指针，它指向某个对象.但是有时候大家都会对它到底指向哪个对象 感到混乱:

一：记住三条原则即可

1：当一个函数只是作为一个函数来调用的时候，这个函数中的this指向全局对象。
如：  <script text=”javascript”>
               function doSomething(){
                   alert(this);
               }
               doSomething();
      </script>
this指向的是全局的Window对象。

2：当一个函数作为一个对象的方法来调用的时候，用来调用方法的对象成为关键字this的值
如：  <script text=”javascript”>
                var doSomething={
                  something:function(){
                     alert(this);
                  }
                }      
                doSomething.something();
      </script>
this指向的就是doSomething函数的调用对象（CallObject）。

3：当用构造函数来创建一个对象实例的时候，会把新创建的对象作为this关键字的值来传递；
如：  <script text=”javascript”>
                function doSomething(){
                      alert(this);
                }
               new doSomething();
      </script>
this指向的同样也是doSomething函数的调用对象（CallObject）。
用图来表示就是如下所示：

二:考虑一下以下几种容易混淆的情况：
1:绑定元素属性 ，形如<element  onclick=”doSomething()”>
    例：
   <script text=”javascript”>
      function doSomething(){
         alert(this);
      }
   </script>
 <button  type=”button” id=”something” onclick=”doSomething()”>something</button>

此时注册的onclick事件只是对doSomething函数的引用，而不是作为这个element对象的方法被调用，也就是说，this指向 Window对象。
2: 绑定对象属性，形如 element.onclick = doSomething;
     例：
     <button  type=”button” id=”something” onclick=”">something</button>
     <script text=”javascript”>
         function doSomething(){
            alert(this);
         }
     document.getElementById(”something”).onclick = doSomething;
     </script>
很明显，此时的doSomething将会被作为element的onclick方法被调用，所以此时的this指向element对象

上面两种情况如图所示：
 

三：既然this容易混淆，其实可以通过下面这个方法来避免这种混淆
 <button  type=”button” id=”something” onclick=”doSomething(this)”>something</button>

   <script text=”javascript”>
         function doSomething(o){
             alert(o);          
         }
   </script>
   这也是一个简单的避免调用this出错的方法

四：了解了以上的原理，你就会发现下面这道题目将会非常简单

问：下面这三段js会输出什么？

1：<script text=”javascript”>
                    function doSomething(){
                        alert(this);
                        function doSomething2(){
                             alert(this);
                        }
                       doSomething2();
                    }
                    new doSomething(); 
    </script>

2:<script text=”javascript”>
                    var aaa=”test1″;
                    function doSomething(){
                         var aaa=”test2″;
                         alert(this.aaa);
                     }

            doSomething();  
  </script> 

3:<script text=”javascript”>
                var aaa=”test1″;
                function doSomething(){
                      var aaa=”test2″;
                      alert(this.aaa);
                 }

        new doSomething();  
  </script>
 
答案：

     1：Object，Window  (虽然嵌套函数容易引起混淆，但是只要按照上面所说的两条原则，得出正确的结论应该轻而易举)
     2：test1 (this指向的是Window对象)
     3：undefined（这里this指向的是doSomething的调用对象，而根据函数的局部变量创建的调用对象的属性在变量实例化的过程中会被赋 予undefined值）

ps：如若对javaScript的调用对象等概念还不是很清楚，请参考：
     1：《javaScript权威指南》第五版 第4,8,9章
     2：http://www.cn-cuckoo.com/wordpress/wp-content/uploads/2007/08/JavaScriptClosures.html