JavaScript：面向对象编程改装的例子_js面向对象重构-优快云博客

本文链接：https://blog.youkuaiyun.com/GY_U_YG/article/details/72876466

本文介绍了一个简单的Tab切换效果实现方案，包括使用纯JavaScript通过面向过程和面向对象两种方式来完成不同选项卡之间的切换，并详细解释了如何避免作用域链带来的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

日常开发中，经常遇到Tab切换，而且这个非常常见，各大门户网站都有。每个Tab是一个大的分类，比如体育，新闻，娱乐，军事等等。

这里写图片描述

看看新浪的首页—【今日要闻】、【高清美图】、【精选视频】。每个Tab对应一片内容。

那么怎么实现呢？
先用面向过程的方式实现一遍，再用面向对象改装一下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        #div1 input {background: white;}
        #div1 input.active {background: yellow;}
        #div1 div {
            width: 200px;
            height: 200px;
            background: #ccc;
            display: none;
        }
    </style>
</head>
<body>

    <div id="div1">
        <input class="active" type="button" value="AAA">
        <input type="button" value="BBB">
        <input type="button" value="CCC">
        <div style="display: block;">aaa</div>
        <div>bbb</div>
        <div>ccc</div>
    </div>


    <script type="text/javascript">
        var oDiv = document.getElementById('div1');
        var aBtn = oDiv.getElementsByTagName('input');
        var aDiv = oDiv.getElementsByTagName('div');
        for (var i = 0; i < aBtn.length; i++) {
            aBtn[i].index = i;
            aBtn[i].onclick = function() {
                for (var i = 0; i < aBtn.length; i++) {
                    aBtn[i].className = '';
                    aDiv[i].style.display = 'none';
                }
                this.className = 'active';
                aDiv[this.index].style.display = 'block';
            };
        }
    </script>
</body>
</html>

这里写图片描述

一定要注意到作用域链的问题，上面的JS部分还可以这么写（参考我的博客JavaScript作用域链）：

<script type="text/javascript">
    var oDiv = document.getElementById('div1');
    var aBtn = oDiv.getElementsByTagName('input');
    var aDiv = oDiv.getElementsByTagName('div');

    for (var i = 0, len = aBtn.length; i < len; i++) {
        (function(num) {
            aBtn[num].onclick = function() {
                for (var j = 0,len = aBtn.length; j < len; j++) {
                    aBtn[j].className = '';
                    aDiv[j].style.display = 'none';
                }
                this.className = 'active';
                aDiv[num].style.display = 'block';
                //alert(num);
            };
        })(i);

    }
</script>

假如不采用这种传参自执行的方式，就会出现循环完成之后，所有的i都成3了，都是个死数字。没有0，1，2这种逐个对应。

下面是错误代码：

<script type="text/javascript">
    var oDiv = document.getElementById('div1');
    var aBtn = oDiv.getElementsByTagName('input');
    var aDiv = oDiv.getElementsByTagName('div');

    for (var i = 0, len = aBtn.length; i < len; i++) {
            aBtn[i].onclick = function() {
                for (var j = 0,len = aBtn.length; j < len; j++) {
                    aBtn[j].className = '';
                    aDiv[j].style.display = 'none';
                }
                this.className = 'active';
                aDiv[i].style.display = 'block';
                //alert(i);无论点击哪个Tab都弹出3
            };
    }
</script>

上面的代码，无论点击哪个Tab，都是弹出3，这并不是我们想要的，我们想要的是点第一个弹0，点第二个弹1，……，至于原因，如下：

由于内部函数，也就是绑定的点击函数，时刻都有被调用的可能，所以其作用域链不能被销毁，更何况i还是个全局变量，只能在页面关闭，刷新时销毁，i的值一直保持for循环执行完毕之后的length的值。

还可以这么理解：for循环完成之后，由于JS没有块级作用域的概念，i的值还在，也就是length的值，当点击触发点击事件（执行内部函数），要弹出i，一看，i并不在这个click函数中定义也就是不在active object（活动对象）中，于是到作用域链的下一级去找，也就是全局变量，找到了，这时候i的值是length。没有自执行，最后用到i的时候，i的值已经循环到头了，一直是3.

除了自执行之外，还可以这么改，也就是上面的方法：

<script type="text/javascript">
    var oDiv = document.getElementById('div1');
    var aBtn = oDiv.getElementsByTagName('input');
    var aDiv = oDiv.getElementsByTagName('div');

    for (var i = 0, len = aBtn.length; i < len; i++) {
        aBtn[i].index = i;
        aBtn[i].onclick = function() {
            for (var j = 0,len = aBtn.length; j < len; j++) {
                aBtn[j].className = '';
                aDiv[j].style.display = 'none';
            }
            this.className = 'active';
            aDiv[this.index].style.display = 'block';

            //alert(i);
            //由于i一直都是3，所以上面采用了灵活的方式，每个Btn对象在内部函数（onclick函数）作用域之外自带索引
        };

    }
</script>

下面是改编的面向对象的写法：

<script type="text/javascript">
    function TabSwitch(id) {
        var that = this;
        var oDiv = document.getElementById(id);
        this.aBtn = oDiv.getElementsByTagName('input');
        this.aDiv = oDiv.getElementsByTagName('div');
        for (var i = 0, len = this.aBtn.length; i < len; i++) {
            this.aBtn[i].index = i;
            //this.aBtn[i].onclick = that.fnClick;
            this.aBtn[i].onclick = function() {
                that.fnClick(this);
            }
        }
    }

    TabSwitch.prototype.fnClick = function(oBtn) {
        for (var j = 0,len = this.aBtn.length; j < len; j++) {
            this.aBtn[j].className = '';
            this.aDiv[j].style.display = 'none';
        }
        oBtn.className = 'active';
        this.aDiv[oBtn.index].style.display = 'block';
    };

    new TabSwitch('div1');
</script>