ES6继承（类，构造函数）

继承

ES5时代，原型继承

function Person(name,age){
    this.name=name;         //属性
    this.age=age;
}
Person.prototype.showName=function(){
    return this.name;
}
Person.prototype.showAge=function(){
    return this.age;
}

// 属性继承
function Worker(name,age){
    Person.apply(this,arguments);
}
// 方法继承
Worker.prototype = new Person();

var worker = new Worker("Tom",26);
alert(worker.showName());

ES6中，子类可通过extends继承父类，子类中属性必须涵盖父类的属性，这需要通过super实现，在此基础上可以增加特有的属性，super中务必包含父类属性，不然新增的属性会覆盖所要继承的父类属性。

class Person{                   //类
    constructor(name,age){      
        this.name=name;         //属性
        this.age=age;
    }
    showName(){
        return(this.name);
    }
    showAge(){
        return(this.age);
    }
}

// 继承
class Worker extends Person{                    
    constructor(name,age,job="defualt"){        
        super(name,age);                        
        this.job = job;
    }
    showJob(){
        return(this.job);
    }
}

var worker = new Worker("bert",23,"前端开发工程师");
console.log(worker.showJob());

继承的应用

应用1 - 模拟队列

class Queue{
    constructor(content=[]){
        this._queue=[...content];        //数组赋值
    }
    pop(){                              //删除队列头结点
        const value = this._queue[0];   //定义固定变量,队列的头结点
        this._queue.shift();            //shift()方法删除第一个结点
        return this._queue;
    }
    push(n){
        this._queue.push(n);
        return this._queue;
    }
}

var q = new Queue([1,2,3,4]);
console.log(q._queue);               //查看数组值
console.log(q.pop());
console.log(q.push(5));

应用2 - tabs选项卡切换

html结构

<div id="content">
    <input type="button" value="1" class="btn btn-default active">
    <input type="button" value="2" class="btn btn-default">
    <input type="button" value="3" class="btn btn-default">
    <p class="h3 text-center" style="display: block;">111111</p>
    <p class="h3 text-center">222222</p>
    <p class="h3 text-center">333333</p>
</div>

css样式，这里我使用了bootstrap，所以需要写的样式内容很少

#content p{display: none;border: 1px solid red;width: 120px;height: 30px;}

JS部分

class Tabs{
constructor(id){
    this.content = document.getElementById(id);
    this.btn = this.content.getElementsByTagName("input");
    this.p = this.content.getElementsByTagName("p");
    this.eachBtn();
}
eachBtn(){
    for(let i=0; i<this.btn.length; i++){
        this.btn[i].onclick=function(){
            this.hide();
            this.show(i);
        }.bind(this)
    }
}
hide(){
    for(let i=0; i<this.btn.length; i++){
        this.btn[i].className="btn btn-default";
        this.p[i].style.display="none";
    }
}
show(index){
    this.btn[index].className="btn btn-default active";
    this.p[index].style.display="block";
}
}
new Tabs("content");

应用3 - 自动轮播Tabs选项卡

html结构

<!-- 选项卡1 -->
<div id="content" class="content">
    <input type="button" value="1" class="btn btn-default active">
    <input type="button" value="2" class="btn btn-default">
    <input type="button" value="3" class="btn btn-default">
    <p class="h3 text-left" style="display: block;">第一个选项卡：111111</p>
    <p class="h3 text-left">第一个选项卡：222222</p>
    <p class="h3 text-left">第一个选项卡：333333</p>
</div>
<!-- 选项卡2 -->
<div id="content2" class="content">
    <input type="button" value="1" class="btn btn-default active">
    <input type="button" value="2" class="btn btn-default">
    <input type="button" value="3" class="btn btn-default">
    <p class="h3 text-center" style="display: block;">第二个选项卡：1111111</p>
    <p class="h3 text-center">第二个选项卡：222222</p>
    <p class="h3 text-center">第二个选项卡：333333</p>
</div>

css样式，这里也使用了bootstrap，所以需要写的样式内容很少

.content p{display: none;width: 220px;height: 30px;font-size: 14px;}

JS部分

class Tabs{
    constructor(id){
        this.content = document.getElementById(id);
        this.btn = this.content.getElementsByTagName("input");
        this.p = this.content.getElementsByTagName("p");
        this.eachBtn();
        this.iNow = 0;
    }
    eachBtn(){
        for(let i=0; i<this.btn.length; i++){
            this.btn[i].onclick=function(){
                this.iNow = i;
                this.hide();
                this.show(i);
            }.bind(this)
        }
    }
    hide(){
        for(let i=0; i<this.btn.length; i++){
            this.btn[i].className="btn btn-default";
            this.p[i].style.display="none";
        }
    }
    show(index){
        this.btn[index].className="btn btn-default active";
        this.p[index].style.display="block";
    }
}

// 继承,第二个选项卡也可以切换
class autoTabs extends Tabs{
    constructor(id){
        super(id);
        setInterval(this.next.bind(this),1000);
    }
    // 自动切换播放
    next(){
        this.iNow++;
        if(this.iNow == this.btn.length){
            this.iNow = 0;
        }
        this.hide();
        this.show(this.iNow);
    }
}

new Tabs("content");
new autoTabs("content2");