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를 통해 상위 클래스를 계승할 수 있다. 하위 클래스의 속성은 반드시 상위 클래스의 속성을 포함해야 한다. 이것은 슈퍼를 통해 실현해야 한다. 이를 바탕으로 특유의 속성을 증가시킬 수 있다. 슈퍼에는 반드시 상위 클래스의 속성을 포함해야 한다. 그렇지 않으면 새로 추가된 속성은 상속할 상위 클래스의 속성을 덮어씌울 것이다.

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 - 자동 탭 탭

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