javascript面向对象编程基础

最新推荐文章于 2024-08-25 19:44:31 发布

Q_Jimmy

最新推荐文章于 2024-08-25 19:44:31 发布

阅读量400

点赞数 1

分类专栏： HTML5

本文链接：https://blog.csdn.net/Q_Jimmy/article/details/50817889

版权

HTML5 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

该文章通过一个实例来讲解和实现JavaScript面向对象的使用：

实例：面向对象的选项卡

注释：该案例首先应用面向过程来实现，然后再将面向过程改成面向对象。请注重修改的过程。

实现的原理：

把面向过程的程序改写成面向对象的形式
 原则：
    不能有函数嵌套，但可以有全局变量
 过程：
 onload ->构造函数
 全局变量 ->属性
 函数 ->方法

 改错
   this、事件、闭包、传参

对象闭包
  通过闭包传递this

多说无益，首先我们来看看效果：

第一步：按面向过程实现

代码如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style >
        #div1 input{background:white;}
        #div1 input.active{background:yellow;}
        #div1 div{width:200px;height: 200px;background: #ccc;display:none;}
    </style>
    <script>
        window.onload=function(){
            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>
</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;">IOS学习</div>
    <div>PHP学习</div>
    <div>C++学习</div>
</div>
</body>
</html>

第二步：

改写成面向对象
window.onload                                       构造函数
          初始化整个程序                                      初始化整个程序
 变量                                               属性
 函数                                               方法
 函数嵌套
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style >
        #div1 input{background:white;}
        #div1 input.active{background:yellow;}
        #div1 div{width:200px;height: 200px;background: #ccc;display:none;}
    </style>
    <script>
        var aBtn;
        var aBtn;
        window.onload=function(){
            var oDiv=document.getElementById('div1');
            aBtn=oDiv.getElementsByTagName('input');
            aDiv=oDiv.getElementsByTagName('div');
            for(var i=0;i<aBtn.length;i++){
                aBtn[i].index=i;
                aBtn[i].onclick=fnClick;
            }
        };
        function  fnClick(){
            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>
</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;">IOS学习</div>
    <div>PHP学习</div>
    <div>C++学习</div>
</div>
</body>
</html>
第三步：将以上程序改写为只有方法和属性，实现面向对象

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style >
        #div1 input{background:white;}
        #div1 input.active{background:yellow;}
        #div1 div{width:200px;height: 200px;background: #ccc;display:none;}
    </style>
    <script>
        window.onload=function(){
            new TableSwitch('div1');
        }
        function   TableSwitch(id){
            var _this=this;
            var oDiv=document.getElementById(id);
            this.aBtn=oDiv.getElementsByTagName('input');
            this.aDiv=oDiv.getElementsByTagName('div');
            for(var i=0;i<this.aBtn.length;i++){
                this.aBtn[i].index=i;
                this.aBtn[i].onclick=function(){
                    _this.fnClick(this);
                };
            }
        };
        TableSwitch.prototype.fnClick=function(oBtn){
            for(var i=0;i<this.aBtn.length;i++){
                this.aBtn[i].className='';
                this.aDiv[i].style.display='none';
            }
            oBtn.className='active';
            this.aDiv[oBtn.index].style.display='block';
        }
    </script>
</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;">IOS学习</div>
    <div>PHP学习</div>
    <div>C++学习</div>
</div>
</body>
</html>