首页 > 编程笔记 > JavaScript笔记 阅读:76

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 的方法是一种比较常用的方法,在后面的定时器中会再次使用这种方法。

编程帮,一个分享编程知识的公众号。跟着站长一起学习,每天都有进步。

通俗易懂,深入浅出,一篇文章只讲一个知识点。

文章不深奥,不需要钻研,在公交、在地铁、在厕所都可以阅读,随时随地涨姿势。

文章不涉及代码,不烧脑细胞,人人都可以学习。

当你决定关注「编程帮」,你已然超越了90%的程序员!

编程帮二维码
微信扫描二维码关注

所有教程

优秀文章