js中this的用法
this：指的是調用當前方法 （函數）的那個對象，切記，一定要是當前的那一個！
this使用時的幾種情況：
1) alert(this); this指向的是window
alret(this);實際是縮寫，全寫爲window.alert(this); 所以此時alert的當前其實就是windou
2) function fn(){
alert(this);
}
fn(); this指向的是window
記憶時可以偷懶的記憶只要是函數的直接調用，都是window
3) var oBtn = document.getElementById('btn');
oBtn.onclick = function(){
alert(this); this指向的是input
fn();
this指向的是window,此時的fn()不是當前的，所以得到的是window，而不是input。
}
4)如果在需要使用this時，發現this不是直接的，不能指向你想要的變量，可以先定義一個變量爲空，把this存在裏 面，在後面的代碼中進行調用
this使用的實例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>js的this屬性的運用</title>
<style>
h2{ height:30px; width:300px; border:2px solid pink; font-size:20px; text-align:center; line-height:30px; margin:40px auto;}
li{ height:150px; width:100px; background:pink; border:2px solid #333; margin-top:30px; margin-left:250px; float:left; list-style:none;}
div{ height:150px; width:200px; background:yellow; border:2px solid green; margin-top:100px; display:none;}
</style>
<script>
window.onload = function(){
var oUl = document.getElementById('list');
var aLi = document.getElementsByTagName('li');
var that = null;
for(var i=0;i<aLi.length;i++){
aLi[i].onmousemove = function(){
that = this;
fn();
}
function fn(){
that.getElementsByTagName('div')[0].style.display = 'block';
}
aLi[i].onmouseout = function(){
this.getElementsByTagName('div')[0].style.display = 'none';
}
}
}
</script>
</head>
<body>
<h2>this屬性應用實例</h2>
<ul id="list">
<li>
<div></div>
</li>
<li>
<div></div>
</li>
<li>
<div></div>
</li>
</ul>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>js的this屬性的運用</title>
<style>
h2{ height:30px; width:300px; border:2px solid pink; font-size:20px; text-align:center; line-height:30px; margin:40px auto;}
li{ height:150px; width:100px; background:pink; border:2px solid #333; margin-top:30px; margin-left:250px; float:left; list-style:none;}
div{ height:150px; width:200px; background:yellow; border:2px solid green; margin-top:100px; display:none;}
</style>
<script>
window.onload = function(){
var oUl = document.getElementById('list');
var aLi = document.getElementsByTagName('li');
var that = null;
for(var i=0;i<aLi.length;i++){
aLi[i].onmousemove = function(){
that = this;
fn();
}
function fn(){
that.getElementsByTagName('div')[0].style.display = 'block';
}
aLi[i].onmouseout = function(){
this.getElementsByTagName('div')[0].style.display = 'none';
}
}
}
</script>
</head>
<body>
<h2>this屬性應用實例</h2>
<ul id="list">
<li>
<div></div>
</li>
<li>
<div></div>
</li>
<li>
<div></div>
</li>
</ul>
</body>
</html>
這個例子在使用this的屬性時，便通過了兩種方法進行使用，一種是直接使用（用藍色進行標記），另一種便是先把this存放到一個變量中，在後面的代碼中進行調用。存this的變量爲that（用紅色進行標記）。