实例了解js面向对象的封装和继承等特点

1、面向对象特点

相比之前按照过程式写法，面向对象有以下几个特点;

1、抽象：抓住核心问题，就是将很多个方法放在一个对象上。对象由属性和方法组成，属性就是我们定义的变量，它是静态的；方法就是行为操作，函数，它是动态的。

2、封装：只能通过对象来访问函数。工厂方式，就是面向对象中的封装函数。构造函数，就是用来创建对象的函数。

3、继承：从已有对象中继承出新的对象。

4、多态：多对象的不同形态。

2、选项卡面向对象写法

1、首先简单写一个页面布局和样式：

<style>

#div1 div{ width:200px; height:200px; border:1px #000 solid; display:none;}

.active{ background:red;}

</style>

<div id="div1">

    <input class="active" type="button" value="">

    <input type="button" value="">

    <input type="button" value="">

    <div style="display:block"></div>

    <div></div>

    <div></div>

</div>

</body>

2、原先的选项卡的写法：

window.onload = function(){

    var oParent = document.getElementById('div1');

    var aInput = oParent.getElementsByTagName('input');

    var aDiv = oParent.getElementsByTagName('div');

    for(var i =;i<aInput.length;i++){

        aInput[i].index = i;

        aInput[i].onclick = function(){

            for(var i=;i<aInput.length;i++){

                aInput[i].className = '';

                aDiv[i].style.display = 'none';

            }

            this.className = 'active';

            aDiv[this.index].style.display = 'block';

        };

    };

}

3、用面向对象的写法：

 window.onload = function(){

     var t1 = new Tab();

     t1.init();

     t1.autoPlay();

 };

 function Tab(){         //构造函数

     this.oParent = document.getElementById('div1');          //定义全局变量

     this.aInput = this.oParent.getElementsByTagName('input');

     this.aDiv = this.oParent.getElementsByTagName('div');

     this.iNow = 0;

 }

 Tab.prototype.init = function(){          //构造函数.原型.方法()

     var This = this;     //p1调用的init() 所以这里的this指向的是对象t1

     for(var i =0;i<this.aInput.length;i++){

         this.aInput[i].index = i;

         this.aInput[i].onclick = function(){

             This.change(this);    //用对象t1调用change()  传入的参数是当前点击的按钮this.aInput[i]

         };

     };

 }

 Tab.prototype.change = function(obj){

     for(var i=0;i<this.aInput.length;i++){   //因为是对象t1调用的change函数  所以这里的this就是对象t1

         this.aInput[i].className = '';

         this.aDiv[i].style.display = 'none';

     }

     obj.className = 'active';

     this.aDiv[obj.index].style.display = 'block';

 }

 Tab.prototype.autoPlay = function(){

     var This = this;     //定时器没有对象调用 所以定时器里面的this指向要改成对象

     setInterval(function(){      

         if(This.iNow == This.aInput.length-1){

             This.iNow = 0;

         }else{

             This.iNow++;

         }

         //console.log(This.iNow)

         for(var i=0;i<This.aInput.length;i++){

             This.aInput[i].className = '';

             This.aDiv[i].style.display = 'none';

         }

         This.aInput[This.iNow].className = 'active';

         This.aDiv[This.iNow].style.display = 'block';

     },1000)

 }

需要注意的是，改this指向问题 :如果是事件或者是定时器,尽量让面向对象中的this指向对象。

4、利用面向对象继承的特点，我们可以控制多组选项卡：

首先在页面中增加一组选项卡

<div id="div2">

    <input class="active" type="button" value="1">

    <input type="button" value="2">

    <input type="button" value="3">

    <div style="display:block">11111</div>

    <div>22222</div>

    <div>33333</div>

</div>

然后在构造函数中将id作为参数传入：

function Tab(id){

    this.oParent = document.getElementById(id);

    this.aInput = this.oParent.getElementsByTagName('input');

    this.aDiv = this.oParent.getElementsByTagName('div');

    this.iNow = 0;

}

最后传入页面id,直接创建不同的对象，继承对象的方法,这样就可以控制两组选项卡啦~

window.onload = function(){

    var t1 = new Tab('div1');

    t1.init();

    t1.autoPlay();

    var t2 = new Tab('div2');

    t2.init();

    t2.autoPlay();

};

巴特西

实例了解js面向对象的封装和继承等特点

最新文章

热门文章