面向過程的tab選項卡
<!DOCTYPE html>
<html>
<head>
<title>選項卡--面向?qū)ο?lt;/title>
<script type="text/javascript">
window.onload = function() {
var oLi = document.getElementsByTagName('li');
var aDiv = document.getElementsByTagName('div');
for (var i = 0; i < oLi.length; i++) {
oLi[i].index = i;//注意抱环，這里讓index等于i是為了點擊時切換到相應(yīng)的div
oLi[i].onclick = function() {
for (var j = 0; j < oLi.length; j++) {
aDiv[j].style.display = "none";
};
aDiv[this.index].style.display = "block";
}
};
}
</script>
<style type="text/css">
li {
list-style-type: none;
display: inline-block;
border: 1px solid #000;
}
.content{
width: 200px;
height: 400px;
border: 1px solid #000;
}
</style>
</head>
<body>
<ul>
<li>選項1</li>
<li>選項2</li>
<li>選項3</li>
</ul>
<div class="content">
內(nèi)容1
</div>
<div class="content" style="display:none">
內(nèi)容2
</div>
<div class="content" style="display:none">
內(nèi)容3
</div>
</body>
</html>
下面我們要把它改成面向?qū)ο蟮倪x項卡
- 第一步：解開所有嵌套函數(shù)
oLi[i].onclick = function() {...}
將onclick后面的匿名函數(shù)提到外面去
...
oLi[i].onclick =tab;
...
function tab() {
for (var j = 0; j < oLi.length; j++) {
aDiv[j].style.display = "none";
};
aDiv[this.index].style.display = "block";
}
將幾個變量定義到全局铺董，不然tab函數(shù)不能使用它
- 第二步钱慢，把window.onload變?yōu)椤皹?gòu)造函數(shù)”
function TabSwich() {
this.oLi = document.getElementsByTagName('li');
this.aDiv = document.getElementsByTagName('div');
for (var i = 0; i < this.oLi.length; i++) {
this.oLi[i].index = i;
this.oLi[i].onclick = this.tab;
}
}
用this.oLi這種表達(dá)將oLi變成這個構(gòu)造函數(shù)的屬性
- 第三步缰盏，將Tab函數(shù)變成它的方法
TabSwich.prototype.tab = function () {
for (var j = 0; j < this.oLi.length; j++) {
this.aDiv[j].style.display = "none";
};
this.aDiv[tis.index].style.display = "block";
}
- 第四步氓癌，檢查this指針的錯誤
如果就這樣執(zhí)行，會報錯“for (var j = 0; j < this.oLi.length; j++) {”這一行吨凑，tab is undefined。
這是因為在構(gòu)造函數(shù)中
this.oLi[i].onclick = this.tab;
這里”tis.tab“的this户辱，指向全局鸵钝。將li等于tab,那tab就被指向li.我們想讓的是這個this是指向構(gòu)造函數(shù)內(nèi)部的，那我們可以這樣做
//先定義一個變量存放this
var _this = this
//然后讓this.oLi[i].onclick等于一個匿名函數(shù)
this.oLi[i].onclick = function(){
_this.tab();
}
這樣改了之后庐镐，我們發(fā)現(xiàn)還是會報錯恩商，那我們繼續(xù)檢查this，我們發(fā)現(xiàn)這里的this有問題
this.aDiv[this.index].style.display = "block";
this.index中的this必逆，我們原意是讓它指向oLi的怠堪，這面向過程時是正確的，可是我們把它改成面向?qū)ο缶幊痰臅r候名眉，將tab提出來做構(gòu)造函數(shù)的一個方法粟矿，在這個方法中this就不再是oLi了，我們可以這樣改
this.oLi[i].onclick = function(){
_this.tab(this);
}
...
TabSwich.prototype.tab = function (oLi) {
...
this.aDiv[oLi.index].style.display = "block";
所以损拢，最終的改寫結(jié)果是這樣的
<!DOCTYPE html>
<html>
<head>
<title>選項卡--面向?qū)ο?lt;/title>
<script type="text/javascript">
window.onload = function() {
var tab1 = new TabSwich();
}
function TabSwich() {
var _this = this
this.oLi = document.getElementsByTagName('li');
this.aDiv = document.getElementsByTagName('div');
for (var i = 0; i < this.oLi.length; i++) {
this.oLi[i].index = i;
this.oLi[i].onclick = function(){
_this.tab(this);
}
}
}
TabSwich.prototype.tab = function (oLi) {
for (var j = 0; j < this.oLi.length; j++) {
this.aDiv[j].style.display = "none";
};
this.aDiv[oLi.index].style.display = "block";
}
</script>
<style type="text/css">
li {
list-style-type: none;
display: inline-block;
border: 1px solid #000;
}
.content{
width: 200px;
height: 400px;
border: 1px solid #000;
}
</style>
</head>
<body>
<ul>
<li>選項1</li>
<li>選項2</li>
<li>選項3</li>
</ul>
<div class="content">
內(nèi)容1
</div>
<div class="content" style="display:none">
內(nèi)容2
</div>
<div class="content" style="display:none">
內(nèi)容3
</div>
</body>
</html>
這樣的一次實戰(zhàn)我們發(fā)現(xiàn)陌粹，this在面向?qū)ο缶幊虝r非常重要，雖然我們在平時的 編程中很少用到面向?qū)ο缶幊烫匠鳎诿嬖嚂r這是一個大考點申屹，游戲公司大都采用面向?qū)ο蟮恼Z言。
最后隧膏，推薦一篇關(guān)于this的博客https://kb.cnblogs.com/page/48134/
