避免this出现歧义
1 function Aaa() 2 { 3 var _this=this; 4 this.a=12; //当前的对象的this 5 setInterval(function (){ //有定时器的时候，会出现this的误解问题 6 _this.show(); //把this存为一个变量，传递进来，因为this代表的不一样，所以定时器里面的this需要是外层的this，也就是Aaa 7 }, 1000); 8 } 9 10 Aaa.prototype.show=function () 11 { 12 alert(this.a); 13 }; 14 var obj=new Aaa(); 15 //obj.show();
具体事例----选项卡切换的面向过程写法
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <style> 5 #div1 input {background:#CCC;} 6 #div1 .active {background:yellow;} 7 #div1 div {200px; height:200px; background:#CCC; display:none;} 8 </style> 9 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 10 <title>无标题文档</title> 11 <script> 12 window.onload=function () 13 { 14 var oDiv=document.getElementById('div1'); 15 var aBtn=oDiv.getElementsByTagName('input'); 16 var aDiv=oDiv.getElementsByTagName('div'); 17 var i=0; 18 19 for(i=0;i<aBtn.length;i++) 20 { 21 aBtn[i].index=i; 22 aBtn[i].onclick=function () 23 { 24 for(i=0;i<aBtn.length;i++) 25 { 26 aBtn[i].className=''; 27 aDiv[i].style.display='none'; 28 } 29 this.className='active'; 30 aDiv[this.index].style.display='block'; 31 }; 32 } 33 }; 34 </script> 35 </head> 36 37 <body> 38 <div id="div1"> 39 <input class="active" type="button" value="教育" /> 40 <input type="button" value="财经" /> 41 <input type="button" value="aaa" /> 42 <div style="display:block;">1asdfasdfds</div> 43 <div>2xzcvxzcv</div> 44 <div>5332342345</div> 45 </div> 46 </body> 47 </html>
把面向过程的写法改为----面向对象的写法
- 原则： 不能有函数套函数、但可以有全局变量
- 过程：
- onload → 构造函数
- 全局变量 → 属性
- 函数 → 方法
- 改错： this、事件、闭包、传参
第一步-----不能有函数嵌套，把函数全部拎出来，为了函数起作用，需要把局部变量改为全局变量。
1 var aBtn=null; 2 var aDiv=null; //变为全局变量 3 window.onload=function () 4 { 5 var oDiv=document.getElementById('div1'); 6 aBtn=oDiv.getElementsByTagName('input'); 7 aDiv=oDiv.getElementsByTagName('div'); 8 var i=0; 9 10 for(i=0;i<aBtn.length;i++) 11 { 12 aBtn[i].index=i; 13 aBtn[i].onclick=tab; 14 } 15 }; 16 17 function tab() //单独的函数 18 { 19 for(i=0;i<aBtn.length;i++) 20 { 21 aBtn[i].className=''; 22 aDiv[i].style.display='none'; 23 } 24 this.className='active'; 25 aDiv[this.index].style.display='block'; 26 }
第二步-----把普通函数改为原型，window onload里面的内容改为构造函数，具体的实例全部改为this。
1 window.onload=function () 2 { 3 var oTab=new TabSwitch('div1'); 4 }; 5 6 function TabSwitch(id) 7 { 8 var oDiv=document.getElementById(id); 9 this.aBtn=oDiv.getElementsByTagName('input'); 10 this.aDiv=oDiv.getElementsByTagName('div'); 11 var i=0; 12 13 for(i=0;i<this.aBtn.length;i++) 14 { 15 this.aBtn[i].index=i; 16 this.aBtn[i].onclick=this.tab; 17 } 18 } 19 20 TabSwitch.prototype.tab=function () 21 { 22 for(i=0;i<this.aBtn.length;i++) 23 { 24 this.aBtn[i].className=''; 25 this.aDiv[i].style.display='none'; 26 } 27 this.className='active'; 28 this.aDiv[this.index].style.display='block'; 29 }
第三步----修改不正确的this，使用一个变量传递只带不同的this含义。今天刚看到一个this的指针问题，可能涉及到这个。附上网址http://www.w3cfuns.com/thread-5593260-1-1.html，有兴趣的可以看看
1 window.onload=function () 2 { 3 var oTab=new TabSwitch('div1'); 4 }; 5 6 function TabSwitch(id) 7 { 8 var oDiv=document.getElementById(id); 9 this.aBtn=oDiv.getElementsByTagName('input'); 10 this.aDiv=oDiv.getElementsByTagName('div'); 11 var i=0; 12 13 var _this=this; 14 15 for(i=0;i<this.aBtn.length;i++) 16 { 17 this.aBtn[i].index=i; 18 this.aBtn[i].onclick=function () 19 { 20 _this.tab(this); 21 }; 22 } 23 } 24 25 TabSwitch.prototype.tab=function (oBtn) 26 { 27 for(i=0;i<this.aBtn.length;i++) 28 { 29 this.aBtn[i].className=''; 30 this.aDiv[i].style.display='none'; 31 } 32 oBtn.className='active'; 33 this.aDiv[oBtn.index].style.display='block'; 34 };