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结构

    
    
    
    
111111
    
222222
    
333333

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

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

html结构

    
    
    
    
第一个选项卡：111111
    
第一个选项卡：222222
    
第一个选项卡：333333



    
    
    
    
第二个选项卡：1111111
    
第二个选项卡：222222
    
第二个选项卡：333333

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