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);