首页 > 编程笔记 > JavaScript笔记

JS this的指向及其应用

在 JS 程序中会经常使用 this 来指向当前对象。所谓当前对象，指的是调用当前方法（函数）的对象，而当前方法（函数）指的是正在执行的方法（函数）。需要注意的是，在不同情况下，this 会指向不同的对象，下面通过示例 1 来演示说明。

【例 1】this 指向示例。 
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>this指向示例</title>
<script>
   window.onload = function (){
      function fn1(){
          alert(this);
      }
      function fn2(obj){
          alert(obj);
      }
      var aBtn = document.getElementsByTagName('input');//使用标签名获取所有按钮
      fn1(); //① 直接调用fn1函数
      aBtn[0].onclick = fn1; //② 通过按钮1的单击事件来调用fn1函数
      aBtn[1].onclick = function (){
          fn1(); //③ 在匿名函数中调用
      };
      aBtn[2].onclick = function (){
          fn2(this); //④ 在匿名函数中调用
      };
   };
</script>
</head>
<body>
   <input type="button" value="按钮1"/>
   <input type="button" value="按钮2"/>
   <input type="button" value="按钮3"/>
</body>
</html>
上述代码中，① 处代码是直接调用 fn1 函数，该代码等效于 window.fn1()，即调用当前函数 fn1 是 window 对象，所以执行 fn1 函数后输出的 this 为 window 对象，结果如图 1 所示。
直接调用fn1的结果
图 1：直接调用 fn1 的结果

② 处代码是通过按钮 1 的单击事件来调用 fn1 函数，所以此时调用 fn1 函数的是 aBtn[0]，因此执行 fn1 函数后输出的 this 为按钮对象，结果如图 2 所示。
单击按钮1的结果
图 2：单击按钮 1 的结果

③ 处代码是在匿名函数中调用，而匿名函数又是通过按钮2 的单击事件来调用，即对于按钮 2 来说，匿名函数为当前函数，执行当前函数体时会调用 fn1，此时 fn1 的调用等效于 window.fn1()，对于 window 对象来说，fn1 为当前函数，所以执行 fn1 后输出的 this 为 window 对象，结果如图 3 所示。
单击按钮2的结果
图 3：单击按钮 2 的结果

④ 处代码和 ③ 处代码一样，也是由匿名函数调用，但不同的是，fn2 函数的参数是在按钮3 的当前函数，即匿名函数中指定，所以 fn2 函数中的参数 this 指向的是按钮 3，运行结果如图 4 所示。
单击按钮3的结果
图 4：单击按钮3的结果

从示例 1 中可以看到，this 在 JS 程序中是用来指向当前对象的，但在不同情况下，this 指向的对象不一样，所以在使用时需要特别注意。下面使用一个具体示例来演示 this 的应用。

【例 2】this 的应用。 
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>this的应用</title>
<style>
  li{width:100px;height:150px;float:left;margin-right:30px;list-style:none;
      background:#f1f1f1;position:relative;}
  div{width:80px;height:120px;background:red;position:absolute;top:100px;
      left:10px;display:none;}
</style>
<script>
  window.onload = function (){
     var aLi = document.getElementsByTagName('li');//通过标签名获取所有li元素
     for(var i = 0; i < aLi.length; i++){
          //光标移到某个li元素上时显示div元素
          aLi[i].onmouseover = function (){
               //使用this指代当前元素，即光标移到的那个li元素
               //获取当前li元素的第一个子元素div，并设置它的显示样式为block，即显示div
              this.getElementsByTagName('div')[0].style.display='block';
          };
          //光标移开某个li元素上时隐藏div元素
          aLi[i].onmouseout = function (){
              //获取当前li元素的第一个子元素div，并设置它的显示样式为none,即隐藏div
              this.getElementsByTagName('div')[0].style.display='none';
          };
     }
  };
</script>
</head>
<body>
  <ul>
    <li>
      <div></div>
    </li>
    <li>
      <div></div>
    </li>
    <li>
      <div></div>
    </li>
  </ul>
</body>
</html>
例 2 实现的功能是：页面中存在 3 个 li 元素，当光标移到任何一个 li 元素上时，会在其下面显示一个 div，一旦光标移开 li 元素，显示的 div 又会隐藏。在上述代码中，我们看到 div 的显示和隐藏都是通过事件调用匿名函数来实现的，所以在匿名函数中的 this 指向触发事件的那个 li 元素，因而可以通过它来获取 li 的子元素 div。

对上述 JS 代码作如下修改： 
<script>
window.onload = function (){
     var aLi = document.getElementsByTagName('li');
     for(var i = 0; i < aLi.length; i++){
         aLi[i].onmouseover = function (){
              show();
         };
         aLi[i].onmouseout = function (){
              hide();
         };
     }
     function show(){
         this.getElementsByTagName('div')[0].style.display='block';
     }
     function hide(){
         this.getElementsByTagName('div')[0].style.display='none';
     }

};
</script>
此时，对 li 元素来说，show() 和 hide() 并不是它的当前函数，因为它们的调用并不是直接由 li 元素来完成的，而是由 window 对象来完成，所以在这两个函数体中的 this 指向的是 window 对象，而不是 li 对象。这样使用上面的代码就无法实现例 2 的功能。要让上述代码实现例 2 的功能，需要将 show() 和 hide() 中的 this 指向 li 元素，如果直接用 this，是无法实现这个需求的。

此时这里需要变通一下，不直接使用 this，而是用一个变量，但这个变量必须事先在 li 元素的光标移入和移出事件调用的匿名函数中赋值，且值等于 this，这样，在 show() 和 hide() 中使用这个变量就等效于使用触发光标事件的那个 li 元素。下面按照这个思路修改上述代码： 
<script>
window.onload = function (){
     var aLi = document.getElementsByTagName('li');
     var that = null;
     for(var i = 0; i < aLi.length; i++){
         aLi[i].onmouseover = function (){
              that = this;
              show();
         };
         aLi[i].onmouseout = function (){
              that = this;
              hide();
         };
     }
     function show(){
         that.getElementsByTagName('div')[0].style.display='block';
     }
     function hide(){
         that.getElementsByTagName('div')[0].style.display='none';
     }
};
</script>
上述代码中变通使用 this 的方法是一种比较常用的方法，在后面的定时器中会再次使用这种方法。

所有教程

优秀文章