《JavaScript学习笔记》:第一个面向对象的程序

《JavaScript学习笔记》:第一个面向对象的程序

在看blue老师的js视频的时候,再将写第一个面向对象程序的时候,被那个this给整晕了,因此,就尝试了自己整理了下。

下面以选项卡这个例子为例,来实现从一个面向过程的程序到面向对象的转换。

先不管面向对象,我们一般实现一个选项卡的代码如下所示:

    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>无标题文档title>
    <style>
    #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;ifunction()
            {   

                for(var j=0;j'';
                    aDiv[j].style.display='none';
                }
                this.className='active';
                aDiv[this.index].style.display='block';
            };
        }
    };
    script>
    head>

    <body>
    

    <div id="div1">
        <input type="button" class="active" value="first" />
        <input type="button" value="second" />
        <input type="button" value="third" />
        <div style="display:block">aaaaadiv>
        <div >bbbdiv>
        <div >ccccdiv>
    div>

    body>
    html>

上面的代码比较简单,下面我们逐渐对这个代码进行面向对象的转换。

第一步:首先我们将嵌套的函数给分离出来,取名为my_click,由于my_click是一个全局函数,用到了aBtn和aDiv两个变量,因此 ,我们就将aBtn和aDiv两个变量声明为全局变量。

如下:

    <script>
    var aBtn=null;
    var aDiv=null;
    window.onload=function()
    {
        var oDiv= document.getElementById('div1');

         aBtn = oDiv.getElementsByTagName('input');
         aDiv = oDiv.getElementsByTagName('div');

        for(var i=0;ifunction my_click()
    {   

        for(var j=0;j'';
            aDiv[j].style.display='none';
        }
        this.className='active';
        aDiv[this.index].style.display='block';
    };
    script>

第二步:我们才是提炼构造函数和方法,将构造函数命名为TabSwitch。

这里我们给TabSwitch提供一个参数,由于我们可能div的id不是div1,是吧。

有了构造函数,显然,我们就把aBtn和aDiv两个变量变为对象的两个属性,供对象使用。

而且在代码用所有的属性前面的使用都加上this关键字进行限定。

最后完成的正确代码如下:

    <script>

    window.onload=function()
    {
        var obj=new TabSwitch('div1');

    };

    function TabSwitch(obj)
    {
        var  _this=this;
        var oDiv= document.getElementById(obj);

         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.my_click(this);//要将TabSwitch对象的this传入到myclcik中,因此不能写成this.aBtn[i].onclick=this.myclick
            };
        }
    }

    TabSwitch.prototype.my_click=function (oBtn)
    {   

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

要说明的一点是:在构造函数中,由于按钮数组aBtn和div数组aDiv才是对象TabSwitch的属性,而在TabSwitch.prototype.my_click所出现的this关键字指的是TabSwitch对象,而不是指的是Button对象,因此,在构造函数中的点击事件不能这样写:this.aBtn[i].onclick=this.myclick;这样写下面代码中的this指的就是button 对象。因此我们需要这样写才行:

    this.aBtn[i].onclick=function()
            {
                _this.my_click(this);//要将TabSwitch对象的this传入到myclcik中,因此不能写成this.aBtn[i].onclick=this.myclick
            };

。
而TabSwitch.prototype.my_click也需要接受一个参数来表示当前的button对象。这样写才就是正确的

    TabSwitch.prototype.my_click=function (oBtn)
    {   

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

小结

写到这里,只能说将自己给将解清楚的,自己把思路也理清楚了,可能会将看此篇博文的别人给看晕了,如果是这样就真的对不起了。

this关键字确实相当重要,需要我们好好掌握。

你可能感兴趣的:(javascript)