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 所示。

图 1：直接调用 fn1 的结果

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

图 2：单击按钮 1 的结果

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

图 3：单击按钮 2 的结果

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

图 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 

 div /div 

 /li 

 div /div 

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

23990.html

htmljavaJavaScript