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

时间：2021-07-03 14:47:43

《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关键字确实相当重要，需要我们好好掌握。

标签：

相关文章