js中关于this的理解和应用（选项卡）

this的定义：在JavaScript中this表示函数运行的时候自动生成的一个内部对象，只能在函数内部使用。

简单例子

<script type="text/javascript">
alert(this); //window
</script>

它指向的是window对象

随着函数使用场合的不同，this的值会发生变化。但是有一个总的原则，那就是this指的是，调用函数的那个对象。

情况一：函数调用

var a = 'out';
function test(){
alert(this.a);
}
test(); //out
var t = new test();
alert(t.a);// undefined undefined

情况二：作为构造函数调用

var a = 'out';
function test(){
this.a = a;
alert(this.a);
}
test(); //out
var t = new test();
alert(t.a);// out out

情况三：作为对象方法调用

function test(){
alert(this.x);
}
var o = {};
o.x=1;
o.m=test;
o.m(); //1
//o.m=test(); //undefined

情况四：作为元素节点

window.onload=function(){
var a=document.getElementById("a");
var aul=a.getElementsByTagName("ul");
var ali=a.getElementsByTagName("li");
var adiv=a.getElementsByTagName("div");
for(var i=0;i<ali.length;i++){
ali[i].index=i;
ali[i].onclick=function(){
for(var t=0;t<adiv.length;t++){
adiv[t].className="";
ali[t].className=""
}
this.className="on";
adiv[this.index].className = "div1";
}
}
}

它指向的是HTMLElement,也就是点击元素节点，如果将元素节点进行编号（ali[i].index=i），那么会自动寻找点击按钮相对应的板块（adiv[this.index]）

下面是HTML代码：

<div id="a">
<ul>
<li class="on" >1</li>
<li >2</li>
<li >3</li>
</ul>
</div>

在这种添加了元素和事件的情况下，this不再指向window对象，而是指向元素节点（li）

另外附一个简单的用法：

效果图

js中关于this的理解和应用（选项卡）

相应代码

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>实践题 - 选项卡</title>
<style type="text/css">
/* CSS样式制作 */
body{
margin: 0;
padding: 0;
}
ul{
list-style:none; display:block; height:30px; line-height:30px;
}
ul li {
width: 50px;
height: 25px;
line-height: 25px;
border: 1px double #ccc;
cursor: pointer;
border-bottom:none;
text-align: center;
list-style: none;
float:left;
margin: 32px 0 0 0 ;
}
ul li.on{border-top:2px solid #8B4513;border-bottom:2px solid #FFFFFF;}
#a div{
width: 300px;
height: 250px;
border: 1px solid royalblue;
border-top-color:brown ;
margin: 30px 10px;
display: none;
}
#a .div1{
display: block;
}
</style>
<script type="text/javascript">
// JS实现选项卡切换
window.onload=function(){
var a=document.getElementById("a");
var aul=a.getElementsByTagName("ul");
var ali=a.getElementsByTagName("li");
var adiv=a.getElementsByTagName("div");
for(var i=0;i<ali.length;i++){
ali[i].index=i;
ali[i].onclick=function(){
for(var t=0;t<adiv.length;t++){
adiv[t].className="";
ali[t].className=""
}
this.className="on";
adiv[this.index].className = "div1";
}
}
}
</script>
</head>
<body>

<div id="a">
<ul>
<li class="on" >1</li>
<li >2</li>
<li >3</li>
</ul>
<div class="div1"><br><br>275万购昌平邻铁三居总价20万买一居
200万内购五环三居 140万安家东三环
北京首现零首付楼盘 53万购东5环50平
京楼盘直降5000 中信府公园楼王现房</div>
<div id="div2"> 40平出租屋大改造美少女的混搭小窝
经典清新简欧爱家 90平老房焕发新生
新中式的酷色温情 66平撞色活泼家居
瓷砖就像选好老婆卫生间烟道的设计</div>
<div id="div3"> 通州豪华3居260万二环稀缺2居250w甩
西3环通透2居290万 130万2居限量抢购
黄城根小学学区仅260万 121平70万抛!
独家别墅280万苏州桥2居优惠价248万</div>
</div>
</body>
</html>