一個小問題啊 需要注意啊
當前這個狀態 class 內，hide 可是不能調用啊
你要是寫成了 this.hide 他這個this 可不是class tab 而是 你綁定事件的那個 button對象
所以依舊是找不到 hide 這個方法的。
解決辦法
以及面向對象其他測試代碼段的完整版
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
input.active{
background-color: red;
}
#box>div,#ccc>div{
width: 200px;
height: 200px;
background-color: #ccc;
display: none;
}
#box>div:first-of-type,
#ccc>div:first-of-type
{
display: block;
}
</style>
</head>
<body>
<div id="box">
<input type="button" value="1" class="active">
<input type="button" value="2">
<input type="button" value="3">
<div>aaaaaaaaaa</div>
<div>bbbbbbbbbb</div>
<div>cccccccccc</div>
</div>
<div id="ccc">
<input type="button" value="1" class="active">
<input type="button" value="2">
<input type="button" value="3">
<input type="button" value="4">
<input type="button" value="5">
<div>aaaaaaaaaa</div>
<div>bbbbbbbbbb</div>
<div>cccccccccc</div>
<div>dddddd</div>
<div>eeeeee</div>
</div>
<script type="text/javascript">
function show(){
console.log(Object.prototype.toString.call(arguments));
}
show();
//////////////////////////////////////////////////////////////////////////////
// 本來的，字符串的小區別
var str = "str===stringToArray";
console.log(str.split(''));
var strA = ["strA===stringToArray"];
// 這樣不行，這樣會報錯
// 00_ES6_demo6_面向對象.html:24 Uncaught TypeError: strA.split is not a function
// 數組不提供這個方法。
// console.log(strA.split(''));
// 怎麼辦 ？ =》
// 因爲數組自己沒有split這個方法
// 所以數組就找字符串去借用這個函數(用call的方式)
console.log(String.prototype.split.call(strA));
// 字符串也找數組去借個函數(用bind的方式)
console.log(Array.prototype.join.bind('abcdef')());
//////////////////////////////////////////////////////////////////////////////
var json = {a:20,b:30,length:2};
console.log(String.prototype.indexOf.call(json.a,0));
// 如果是json的話，那麼就相當於 json.toStirng()
// 所以輸出來的是 [object Object]
// 所以用的字符串的方法，處理的也都是 [object Object]
// 相當於'[object Object]'.indexOf('o');
console.log(String.prototype.indexOf.call(json,'o'));
// 相當於'[object Object]'.substring(0);
console.log(String.prototype.substring.call(json,0));
// 相當於'[object Object]'.substring(6,7);
// from 6 to 7
console.log(String.prototype.substring.call(json,6,7));
//////////////////////////////////////////////////////////////////////////////
// 原型鏈
// 下面的那個a 呀 b 呀好像就是show的原型鏈，他是個鏈
function show(){
console.log(1);
}
var a = show;
console.log("console.log(a);");
console.log(a);
console.log("console.log(a.prototype);");
console.log(a.prototype);
console.log("new a();");
new a();
// 給show追加一個 屬性
show.prototype.addprop = function (){
console.log("show.prototype.addprop");
}
// 調用
console.log("var b = new show();");
var b = new show();
b.addprop();
//////////////////////////////////////////////////////////////////////////////
// 類
class tab {
// 最大塊（模塊）的那個div
// 聲明所有的成員變量
// class 被new 對象的時候，最先開始運行的method
constructor(x){
// 自動播放的自類用
this.count = 0;
// node 爲 tab 類裏的成員變量
// 用來存放 最大的那個div節點對象
this.node = document.getElementById(x);
// 取得最大模塊div下的所有輸入元素
// 在這裏的輸入元素就是那三個button
// 第二個tab類的成員變量 allInput
// 用來存放 button元素的
// 蹡蹡~~~ 登場
// 取得的是個button 元素數組
this.allInput = this.node.getElementsByTagName('input');
// 同上原理 取得所有的div元素數組
this.allDiv = this.node.getElementsByTagName('div');
this.init();
}
// method 模塊化函數
// 那些成員變量啊 整個類應該都是看得見 可以直接拿來使用的
init(){
for(let i = 0;i<this.allInput.length;i++){
// 給每一個button綁定點擊事件
this.allInput[i].onclick = function(){
// console.log(" 沒有bind 時候的this 輸出一下："+this); // ①
// // 輸出結果是你點擊的那個 button 對象
// // <input type="button" value="2">
// console.log(this); // ①
console.log(" 有bind 時候的this 輸出一下："+this); // ①
// 輸出結果是你點擊的那個 tab 對象
// tab {node: div#box, allInput: HTMLCollection(3), allDiv: HTMLCollection(3)}allDiv: HTMLCollection(3) [div, div, div]allInput: HTMLCollection(3) [input, input.active, input]node: div#box__proto__: Object
console.log(this); // ②
// 初始化畫面狀態
this.hide();
// 顯示
this.show(i);
}.bind(this) // ②
// } // ①
}
}
// 所有的div先整體隱藏一下
hide(){
for(let j = 0;j<this.allDiv.length;j++){
// 所有按鈕選中狀態清除
this.allInput[j].className='';
// 所有div都隱藏
this.allDiv[j].style.display='none';
}
}
// 只顯示當前的按鈕 選中 以及div顯示
show(index){
// 只顯示當前的按鈕 選中 以及div顯示
this.allInput[index].className='active';
this.allDiv[index].style.display='block';
}
}
// new tab('box').init();
// new tab('box').init();
new tab('box');
// 很容易的 多出一個 選項卡
// new tab('ccc');
// 這個時候 ， 需要增加模塊了
// 需要一個可以自動切換div的模塊了
class autoTab extends tab{
constructor(x){
super(x);
this.autoPlay();
}
autoPlay(){
var _this = this;
setInterval(() => {
_this.count++;
_this.hide();
_this.show(_this.count);
if(_this.count == (this.allInput.length - 1)){
_this.count = -1;
}
}, 1e3);
}
}
new autoTab('ccc');
</script>
</body>
</html>