面向对象简单实例

Posted 2021-02-15 hilxj

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了面向对象简单实例相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>面向对象选项卡案例</title>
    <style>
    #div1 div{width: 200px;height: 200px;border: 1px solid #333;display: none}
    .active{background: #f00}
    </style>
</head>
<body>
    <div id="div1">
        <input type="button" class="active" value="1">
        <input type="button" value="2">
        <input type="button" value="3">
        <div style="display:block;">1111</div> 
        <div>2222</div> 
        <div>3333</div> 
    </div>
    <script>
    var oParent=null;
    var oIpt=null;
    var oDiv=null;
    window.onload=function(){
    var oParent=document.getElementById("div1");
    var oIpt=oParent.getElementsByTagName("input");
    var oDiv=oParent.getElementsByTagName("div");  
    for(var i=0;i<oIpt.length;i++){
            oIpt[i].index=i;
            oIpt[i].onclick= change;
            }
    for(var i=0;i<oIpt.length;i++){
        oIpt[i].className=‘‘;
        oDiv[i].style.display=‘none‘;
    }
    this.className=‘active‘;
    oDiv[this.index].style.display=‘block‘;
    }; 
    </script>
</body>
</html>
 
   首先将嵌套的函数拿到window.onload外面，不能有函数嵌套，可以有全局变量
    <script>
    window.onload=function(){
    var oParent=document.getElementById("div1");
    var oIpt=oParent.getElementsByTagName("input");
    var oDiv=oParent.getElementsByTagName("div");  
    init()  
    }; 
    function init(){
        for(var i=0;i<oIpt.length;i++){
            oIpt[i].index=i;
            oIpt[i].onclick= change;
            }
    };
    function change(){
        for(var i=0;i<oIpt.length;i++){
                oIpt[i].className=‘‘;
                oDiv[i].style.display=‘none‘;
            }
            this.className=‘active‘;
            oDiv[this.index].style.display=‘block‘;
    }
    </script>
   将全局的变量变为对象的属性，全局的函数变为对象的方法；将window.onload里的代码提取到一个构造函数里面，在window.onload里创建对象即可
    <script>
    window.onload=function(){
        var t1=new Tab();
        t1.init()  
    }; 
    function Tab(){
        this.oParent=document.getElementById("div1");
        this.oIpt=this.oParent.getElementsByTagName("input");
        this.oDiv=this.oParent.getElementsByTagName("div");  
    };

   Tab.prototype.init=function(){
       var _this=this;
        for(var i=0;i<this.oIpt.length;i++){
            this.oIpt[i].index=i;
           // this.oIpt[i].onclick= this.change; 
           this.oIpt[i].onclick= function(){
               //this
               _this.change(this)
           };
            }
    };
    Tab.prototype.change=function(obj){
        for(var i=0;i<this.oIpt.length;i++){
            this.oIpt[i].className=‘‘;
            this.oDiv[i].style.display=‘none‘;
            }
            obj.className=‘active‘;//obj指的是被点击的元素，并不是实例化的对象（this），所以此处不能用this
            this.oDiv[obj.index].style.display=‘block‘;
    }
    </script>
 
	js静态方法和实例方法的区别：

        静态方法，属于类的方法，即类可以直接调用的方法。为类所有实例化对象所共用（但不能用实例对象调用），所以静态成员只在内存中占一块区域；
        实例方法，属于实例化类后对象的方法，即实例对象调用的方法。每创建一个类的实例，都会在内存中为非静态成员分配一块存储；
        静态方法在一启动时就实例化了，因而静态内存是连续的，且静态内存是有限制的；而非静态方法是在程序运行中生成内存的，申请的是离散的空间。
        function A(){
        
        }
        A.staticMethof = function(){
        alert(‘静态方法‘);
        }
        A.prototype.instaceMethod = function(){
        alert(‘实例方法‘); 
        }
        A.staticMethof(); //类A直接调用
        var instace = new A();
        instace.instaceMethod();//A的实例对象instace调用

 

以上是关于面向对象简单实例的主要内容，如果未能解决你的问题，请参考以下文章