面向对象---使用面向对象写函数

避免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 {width: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>

把面向过程的写法改为----面向对象的写法

  • 原则： 不能有函数套函数、但可以有全局变量
  • 过程：
  1. onload → 构造函数
  2. 全局变量 → 属性
  3. 函数 → 方法
  • 改错： 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 };

 

posted @ 2013-06-17 21:59  Paxster  阅读(265)  评论(0)  编辑  收藏  举报