首页 > 代码库 > 面向对象this指向
面向对象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 //调用结果为 我的名字是：程序员我的年纪是：2712 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 HTMLInputElement11 }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);//object13 }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);
面向对象this指向
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。