普通函数改写为构造函数。
前提：
1.所有的东西都在onload里；
2.不能有函数嵌套，可以有全局变量；
改写过程：
| 普通函数 | 构造函数 |
| onload(初始化整个程序) | 构造函数（初始化一个对象） |
| 全局对象 | 变为对象的属性 |
| 全局函数 | 变为对象的方法 |
<script type="text/javascript"> window.onload = function () { var oTab = new TabSwitch("div2"); } var aBtn = null; var aDiv = null; function TabSwitch(id){ var div2 = document.getElementById(id); this.aBtn = div2.getElementsByTagName('input');//全局变量 转变成属性 this.aDiv = document.getElementsByClassName('box'); for(i=0;i<this.aBtn.length;i++){ this.aBtn[i].index = i; this.aBtn[i].onclick = this.tab;//是当前对象的方法，所以给tab添加this } } TabSwitch.prototype.tab = function (){//函数 转变成对象的方法 for(i=0;i<this.aBtn.length;i++){ this.aBtn[i].className = ''; this.aDiv[i].style.display = 'none'; } this.aDiv[this.index].style.display = 'block'; this.className = 'active'; } </script>
3. 解决this问题：
<script type="text/javascript"> window.onload = function () { var oTab = new TabSwitch("div2"); } var aBtn = null; var aDiv = null; function TabSwitch(id){ var div2 = document.getElementById(id); this.aBtn = div2.getElementsByTagName('input');//全局变量 转变成属性 this.aDiv = document.getElementsByClassName('box'); var _this =this;//将这里的对象this存入_this中，方便在按钮点击里面用 for(i=0;i<this.aBtn.length;i++){ this.aBtn[i].index = i; this.aBtn[i].onclick = function () { _this.tab(this);//这里的this指的是按钮，把它作为参数传到函数中； } } } TabSwitch.prototype.tab = function (aBtn){//函数 转变成对象的方法 // alert(this); //input // alert(this); //这里的this指的是对象object; for(i=0;i<this.aBtn.length;i++){ this.aBtn[i].className = ''; this.aDiv[i].style.display = 'none'; } aBtn.className = 'active'; this.aDiv[aBtn.index].style.display = 'block'; } </script>
最后：完整案例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>面向对象-选项卡</title> <style> .box{display:none;} </style> </head> <body> <div id="div2"> <input class="active" type="button" value="王立娟"> <input type="button" value="同学"> <input type="button" value="几点上课"> </div> <div class="box" style="display:block;">11</div> <div class="box">22</div> <div class="box">33</div> </body> </html> <script type="text/javascript"> window.onload = function () { var oTab = new TabSwitch("div2"); } var aBtn = null; var aDiv = null; function TabSwitch(id){ var div2 = document.getElementById(id); this.aBtn = div2.getElementsByTagName('input');//全局变量 转变成属性 this.aDiv = document.getElementsByClassName('box'); var _this =this;//将这里的对象this存入_this中，方便在按钮点击里面用 for(i=0;i<this.aBtn.length;i++){ this.aBtn[i].index = i; this.aBtn[i].onclick = function () { _this.tab(this);//这里的this指的是按钮，把它作为参数传到函数中； } } } TabSwitch.prototype.tab = function (aBtn){//函数 转变成对象的方法 // alert(this); //input // alert(this); //这里的this指的是对象object; for(i=0;i<this.aBtn.length;i++){ this.aBtn[i].className = ''; this.aDiv[i].style.display = 'none'; } aBtn.className = 'active'; this.aDiv[aBtn.index].style.display = 'block'; } </script>