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

最新推荐文章于 2024-05-13 00:48:30 发布

HelloWorld_EE

最新推荐文章于 2024-05-13 00:48:30 发布

阅读量495

点赞数

分类专栏： javascript 文章标签： javascript 面向对象 this

本文链接：https://blog.csdn.net/u010412719/article/details/51623016

版权

javascript 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

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

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

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

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

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <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;i<aBtn.length;i++)
        {
            aBtn[i].index=i;
            aBtn[i].onclick=function()
            {   

                for(var j=0;j<aBtn.length;j++)
                {
                    aBtn[j].className='';
                    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">aaaaa</div>
        <div >bbb</div>
        <div >cccc</div>
    </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;i<aBtn.length;i++)
        {
            aBtn[i].index=i;
            aBtn[i].onclick=my_click;
        }
    };

    function my_click()
    {   

        for(var j=0;j<aBtn.length;j++)
        {
            aBtn[j].className='';
            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关键字确实相当重要，需要我们好好掌握。

HelloWorld_EE

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
《JavaScript学习笔记》：第一个面向对象的程序

《JavaScript学习笔记》：第一个面向对象的程序在看blue老师的js视频的时候，再将写第一个面向对象程序的时候，被那个this给整晕了，因此，就尝试了自己整理了下。下面以选项卡这个例子为例，来实现从一个面向过程的程序到面向对象的转换。先不管面向对象，我们一般实现一个选项卡的代码如下所示： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tran
复制链接

扫一扫

专栏目录