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