面向对象this指向

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

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

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

//构造函数
function createPerson(name,age){
    this.name=name;
    this.age=age;
    this.showName();    
}
//原型方法
createPerson.prototype.showName=function(){
    console.log('我的名字是：'+this.name+'我的年纪是：'+this.age);    
}
//调用结果为 我的名字是：程序员我的年纪是：27
new createPerson('程序员','27');

//可以看到这里的this始终指向 createPerson对象

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

function tabSwitch(id){ 
        this.oDiv=document.getElementById(id);
        this.btn=this.oDiv.getElementsByTagName('input');
        this.div=this.oDiv.getElementsByTagName('div');
    }
    tabSwitch.prototype.tab=function(){ 
        for(var i=0;i<this.btn.length;i++){            
            this.btn[i].index=i;
            this.btn[i].onclick=function(){
                alert(this);//object HTMLInputElement
            }

        }
    }

 

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

function tabSwitch(id){ 
        this.oDiv=document.getElementById(id);
        this.btn=this.oDiv.getElementsByTagName('input');
        this.div=this.oDiv.getElementsByTagName('div');
    }
    tabSwitch.prototype.tab=function(){ 
        //把对象中的this存下来赋值为_this
        var _this=this;
        for(var i=0;i<this.btn.length;i++){            
            this.btn[i].index=i;
            this.btn[i].onclick=function(){
                alert(_this);//object
            }

        }
    }

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

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

function slideMove(moveUl,arrowLeft,arrowRight,marginRight){                             
    this.moveUl=$('#'+moveUl);
    this.liLength=$('#'+moveUl).find('li').length;
    this.liWidth=$('#'+moveUl+'>li').eq(0).innerWidth()+marginRight;
    this.arrowLeft=$('#'+arrowLeft);
    this.arrowRight=$('#'+arrowRight);
    this.path=0;
    this.moveUl.css('width',this.liWidth*this.liLength);
    this.init();//初始化
}
slideMove.prototype.init=function(){
    var _this=this;//对象
    this.arrowLeft.on('click',function(){ 
        _this.clickLeft();
    });
    this.arrowRight.on('click',function(){ 
        _this.clickRight();
    });
}
slideMove.prototype.clickLeft=function(){ 
    
    console.log(this.path)
    //到左边了return掉
    if(this.path<=0){ 
        this.path=0;
        return false;
    }
    this.path--;
    this.moveUl.stop().animate({'left':-this.path*this.liWidth});
}
slideMove.prototype.clickRight=function(){ 
    
    console.log(this.path)
    //到了右边return掉
    if(this.path>=this.liLength-4){ 
        this.path=this.liLength-3;
        return false;
    }
    this.path++;
    this.moveUl.stop().animate({'left':-this.path*this.liWidth});
}
//调用
var slide1=new slideMove('moban_ul1','arrow_left1','arrow_right1',22);