this用法

<script type="text/javascript">

varbtn=document.getElementsByTagName_r('button');

varmyA=document.getElementsByTagName_r('a');

varmySpan=document.getElementsByTagName_r('span');

varmyBody=document.getElementsByTagName_r('body');

vara_arr=['red','green','black'];

varbody_arr=['pink','#a3c5a8','gray'];

window.onload=function() {

for(varj=0;j<myA.length;j++) {

myA[j].style.backgroundColor=a_arr[1];

}

myBody[0].style.backgroundColor=body_arr[1];

mySpan[1].style.background='white';

}

for(vari=0; i<a_arr.length;i++) {

console.log(a_arr[i]);

btn[i].index=i;

btn[i].onclick=function() {

console.log(1);

console.log(a_arr[i]);

for(varj=0;j<myA.length;j++) {

myA[j].style.backgroundColor=a_arr[this.index];

}

myBody[0].style.backgroundColor=body_arr[this.index];

mySpan[this.index].style.backgroundColor='white';

if(this.index==0) {

mySpan[this.index+1].style.backgroundColor='transparent';

mySpan[this.index+2].style.backgroundColor='transparent';

}

if(this.index==1){

mySpan[this.index-1].style.backgroundColor='transparent';

mySpan[this.index+1].style.backgroundColor='transparent';

}

if(this.index==2){

mySpan[this.index-1].style.backgroundColor='transparent';

mySpan[this.index-2].style.backgroundColor='transparent';

}

console.log(this.index);

console.log(this.index-1);

console.log(this.index+1);

}

}

script>

如上段代码所示，相信如果看的话都能看懂。所以在此我就简单的说一下，我之前在写这段代码的时候遇到的问题。

1、正如您所看到的第一个加粗变大呈红色的代码：btn[i].index=i;我之前写的时候没有加这句话，而且在a_arr数组里面添加的也不是，而是i，但是造成的结果是出不来我想要的结果，而且如果在控制台把a_arr[i]打印出来的话，结果会显示说a_arr[i]未定义。原因很简单 因为JS是一种解释性的脚本语言，只有当用户需要的时候，才会解释其相对应的代码。而且我之前的那段代码是写在btn的点击事件里面，所以只有当用户点击按钮的时候才会执行里面的代码，而此时页面中的i已经结束的它自身的循环，即i的值为3；当我们点击的时候a_arr[3],很显然在数组a_arr[]里面没有这个值，所以在控制台才会出现undefined。

2、把代码写成上述的好处：在点击之前 利用for循环，将i的值付给每个btn[i]的下标 即btn[i].index。

我们都知道下标都是从0开始，所以btn[i].index也就对应着每一个i的值。当鼠标点击按钮的时候，this.index就相当于btn[i].index的值，（this指代当前对象的所有者），也就是点击按钮的那个下标。然后将这一点的下标值传送到a_arr[]数组里面。即可得到我们想要的结果