您的位置：首页 > 其它

面向对象---使用面向对象写函数

2013-06-17 21:59 260 查看

避免this出现歧义

function Aaa()
{
var _this=this;
this.a=12;    //当前的对象的this
setInterval(function (){    //有定时器的时候，会出现this的误解问题
_this.show();            //把this存为一个变量，传递进来，因为this代表的不一样，所以定时器里面的this需要是外层的this，也就是Aaa
}, 1000);
}

Aaa.prototype.show=function ()
{
alert(this.a);
};
var obj=new Aaa();
//obj.show();

具体事例----选项卡切换的面向过程写法

<!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>
<style>
#div1 input {background:#CCC;}
#div1 .active {background:yellow;}
#div1 div {width:200px; height:200px; background:#CCC; display:none;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
window.onload=function ()
{
var oDiv=document.getElementById('div1');
var aBtn=oDiv.getElementsByTagName('input');
var aDiv=oDiv.getElementsByTagName('div');
var i=0;

for(i=0;i<aBtn.length;i++)
{
aBtn[i].index=i;
aBtn[i].onclick=function ()
{
for(i=0;i<aBtn.length;i++)
{
aBtn[i].className='';
aDiv[i].style.display='none';
}
this.className='active';
aDiv[this.index].style.display='block';
};
}
};
</script>
</head>

<body>
<div id="div1">
<input class="active" type="button" value="教育" />
<input type="button" value="财经" />
<input type="button" value="aaa" />
<div style="display:block;">1asdfasdfds</div>
<div>2xzcvxzcv</div>
<div>5332342345</div>
</div>
</body>
</html>

把面向过程的写法改为----面向对象的写法

原则：不能有函数套函数、但可以有全局变量

过程：

onload → 构造函数

全局变量 → 属性

函数 → 方法

改错： this、事件、闭包、传参

第一步-----不能有函数嵌套，把函数全部拎出来，为了函数起作用，需要把局部变量改为全局变量。

var aBtn=null;
var aDiv=null;　　//变为全局变量
window.onload=function ()
{
var oDiv=document.getElementById('div1');
aBtn=oDiv.getElementsByTagName('input');
aDiv=oDiv.getElementsByTagName('div');
var i=0;

for(i=0;i<aBtn.length;i++)
{
aBtn[i].index=i;
aBtn[i].onclick=tab;
}
};

function tab()　　　　//单独的函数
{
for(i=0;i<aBtn.length;i++)
{
aBtn[i].className='';
aDiv[i].style.display='none';
}
this.className='active';
aDiv[this.index].style.display='block';
}

第二步-----把普通函数改为原型，window onload里面的内容改为构造函数，具体的实例全部改为this。

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

function TabSwitch(id)
{
var oDiv=document.getElementById(id);
this.aBtn=oDiv.getElementsByTagName('input');
this.aDiv=oDiv.getElementsByTagName('div');
var i=0;

for(i=0;i<this.aBtn.length;i++)
{
this.aBtn[i].index=i;
this.aBtn[i].onclick=this.tab;
}
}

TabSwitch.prototype.tab=function ()
{
for(i=0;i<this.aBtn.length;i++)
{
this.aBtn[i].className='';
this.aDiv[i].style.display='none';
}
this.className='active';
this.aDiv[this.index].style.display='block';
}

第三步----修改不正确的this，使用一个变量传递只带不同的this含义。今天刚看到一个this的指针问题，可能涉及到这个。附上网址http://www.w3cfuns.com/thread-5593260-1-1.html，有兴趣的可以看看

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

function TabSwitch(id)
{
var oDiv=document.getElementById(id);
this.aBtn=oDiv.getElementsByTagName('input');
this.aDiv=oDiv.getElementsByTagName('div');
var i=0;

var _this=this;

for(i=0;i<this.aBtn.length;i++)
{
this.aBtn[i].index=i;
this.aBtn[i].onclick=function ()
{
_this.tab(this);
};
}
}

TabSwitch.prototype.tab=function (oBtn)
{
for(i=0;i<this.aBtn.length;i++)
{
this.aBtn[i].className='';
this.aDiv[i].style.display='none';
}
oBtn.className='active';
this.aDiv[oBtn.index].style.display='block';
};

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航