普通函数改写为构造函数。
前提:
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>