一个小问题啊 需要注意啊
当前这个状态 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>