zoukankan html css js c++ java

面向对象-选项卡

普通函数改写为构造函数。

前提：

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>

查看全文

相关阅读:
全栈程工程师
 月薪8000的程序员和月薪2万的程序员差别在哪里?
原型中的访问
 关于基本类型和复合类型用== 判断的小问题
 使用原型解决构造函数问题
 前端工程师学习路线 --书籍
 程序员成长之路
 GIT学习(1) Pull和Fetch
OO面向对象编程:第四单元总结及课程总结
 OO面向对象编程:第三单元总结

原文地址：https://www.cnblogs.com/wang715100018066/p/6047686.html