this指向及this应用

1. 初识this

this：指的是调用当前方法（函数）的那个对象
alert(this);//object window
代码1：注意，此时弹出window，但是如果fn1();变成oBtn.οnclick=fn1;则弹出oBtn。

代码2：此时this指的是input;

<input id="btn2" type="button" onclick="alert(this);" value="按钮2"/>

2. 常见的this指向

function fn1(){
this
}
//fn1(); this=>window

oDiv.onclick=fn1;  this=>oDiv

oDiv.onclick=function (){
fn1();    //fn1()里的this=>window
}

<div onclick="this "></div>
//this=> div

<div onclick="fn1(); "></div>
//fn1();里的this=>window

alert(this); window
fn1(this);
function fn1(obj){
 obj=>window
}

oDiv.onclick=function(){
  this   //this指的oDiv
  fn1(this);  //this指的oDiv
}
function fn1(obj){obj=>oDiv}

3. 小例子1

<input type="button" value="按钮1"/>
<input type="button" value="按钮2"/>
<input type="button" value="按钮3"/>

<script>
window.onload=function(){
 var aBtn=document.getElementsByTagName('input');
        for(var i=0;i<aBtn.length;i++){
         aBtn[i].onclick=function(){
            this.style.background='yellow';//this指的是当前的aBtn
         }
 }
}
</script>

<script>
window.onload=function(){
 var aBtn=document.getElementsByTagName('input');
        for(var i=0;i<aBtn.length;i++){
            aBtn[i].onclick=function(){
               fn1();
            }
        }
        function fn1(){
          this//指的是window
        }
}
</script>

借用that可以使点一个按钮让其变颜色

<script>
window.onload=function(){
 var aBtn=document.getElementsByTagName('input');
 var that=null;
        for(var i=0;i<aBtn.length;i++){
            aBtn[i].onclick=function(){
               that=this;
               fn1();
            }
        }
        function fn1(){
          that.style.background='yellow';
        }
}
</script>

<script>
window.onload=function(){
 var aBtn=document.getElementsByTagName('input');
 var that=null;
        for(var i=0;i<aBtn.length;i++){
           aBtn[i].onclick=fn1;//fn1加（）就会报错
        }
        function fn1(){
         // this=>aBtn[i]
          this.style.background='yellow';
        }
}
</script>