this指向

以前不太理解面向对象的this指向问题，今天自己看着视频教程，加自己学了2个例子，终于明白点了。

我们在写对象程序的时候，我们希望保持this始终是指向对象的，但事实确常常事与愿违。

正常情况this的指向都没问题，比如下面

 1 //构造函数
 2 function createPerson(name,age){
 3     this.name=name;
 4     this.age=age;
 5     this.showName();    
 6 }
 7 //原型方法
 8 createPerson.prototype.showName=function(){
 9     console.log('我的名字是：'+this.name+'我的年纪是：'+this.age);    
10 }
11 //调用结果为 我的名字是：程序员我的年纪是：27
12 new createPerson('程序员','27');
13 
14 //可以看到这里的this始终指向 createPerson对象

但工作的写代码不会那么简单alert一个值，常常会加入事件等等，这时候this的指向是怎样的呢？还会指向对象么？看下面

 1 function tabSwitch(id){ 
 2         this.oDiv=document.getElementById(id);
 3         this.btn=this.oDiv.getElementsByTagName('input');
 4         this.div=this.oDiv.getElementsByTagName('div');
 5     }
 6     tabSwitch.prototype.tab=function(){ 
 7         for(var i=0;i<this.btn.length;i++){            
 8             this.btn[i].index=i;
 9             this.btn[i].onclick=function(){
10                 alert(this);//object HTMLInputElement
11             }
12 
13         }
14     }

 

看到了么this，变成了html的一个节点，这时候再继续写下边的代码，肯定就错了。这时候我需要改下this的指向，让this重新指向对象。继续

 1 function tabSwitch(id){ 
 2         this.oDiv=document.getElementById(id);
 3         this.btn=this.oDiv.getElementsByTagName('input');
 4         this.div=this.oDiv.getElementsByTagName('div');
 5     }
 6     tabSwitch.prototype.tab=function(){ 
 7         //把对象中的this存下来赋值为_this
 8         var _this=this;
 9         for(var i=0;i<this.btn.length;i++){            
10             this.btn[i].index=i;
11             this.btn[i].onclick=function(){
12                 alert(_this);//object
13             }
14 
15         }
16     }

用_this变量缓存指向对象的this就可以在正确的地方 用到正确的指向。（有点绕晕了）

最后上一个今天尝试些的复杂一点点的例子：左右点击按钮滑动切换ul

 1 function slideMove(moveUl,arrowLeft,arrowRight,marginRight){                             
 2     this.moveUl=$('#'+moveUl);
 3     this.liLength=$('#'+moveUl).find('li').length;
 4     this.liWidth=$('#'+moveUl+'>li').eq(0).innerWidth()+marginRight;
 5     this.arrowLeft=$('#'+arrowLeft);
 6     this.arrowRight=$('#'+arrowRight);
 7     this.path=0;
 8     this.moveUl.css('width',this.liWidth*this.liLength);
 9     this.init();//初始化
10 }
11 slideMove.prototype.init=function(){
12     var _this=this;//对象
13     this.arrowLeft.on('click',function(){ 
14         _this.clickLeft();
15     });
16     this.arrowRight.on('click',function(){ 
17         _this.clickRight();
18     });
19 }
20 slideMove.prototype.clickLeft=function(){ 
21     
22     console.log(this.path)
23     //到左边了return掉
24     if(this.path<=0){ 
25         this.path=0;
26         return false;
27     }
28     this.path--;
29     this.moveUl.stop().animate({'left':-this.path*this.liWidth});
30 }
31 slideMove.prototype.clickRight=function(){ 
32     
33     console.log(this.path)
34     //到了右边return掉
35     if(this.path>=this.liLength-4){ 
36         this.path=this.liLength-3;
37         return false;
38     }
39     this.path++;
40     this.moveUl.stop().animate({'left':-this.path*this.liWidth});
41 }
42 //调用
43 var slide1=new slideMove('moban_ul1','arrow_left1','arrow_right1',22);