JavaScript Inheritance Using extends & super

extends그리고 super 사용하여 JavaScript 상속 구현

ES6 이전에는 적절한 상속을 구현하기 위해 여러 단계가 필요했습니다.가장 일반적으로 사용되는 전략 중 하나는 프로토타입 상속입니다.

다음 예시는 다음과 같습니다.Bird에서 속성을 상속합니다.Animal원형 상속 기법을 사용하여 다음을 수행합니다.

function Animal(legs) {
    this.legs = legs;
}

Animal.prototype.walk = function() {
    console.log('walking on ' + this.legs + ' legs');
}

function Bird(legs) {
    Animal.call(this, legs);
}

Bird.prototype = Object.create(Animal.prototype);
Bird.prototype.constructor = Animal;


Bird.prototype.fly = function() {
    console.log('flying');
}

var pigeon = new Bird(2);
pigeon.walk(); // walking on 2 legs
pigeon.fly();  // flying

ES6는 다음 명령을 사용하여 이러한 절차를 간소화했습니다.extends그리고.super키워드를 지정합니다.

다음 예시는 를 정의합니다.Animal그리고.Bird를 통해 상속을 분류하고 확립합니다.extends그리고.super키워드를 지정합니다.

class Animal {
    constructor(legs) {
        this.legs = legs;
    }
    walk() {
        console.log('walking on ' + this.legs + ' legs');
    }
}

class Bird extends Animal {
    constructor(legs) {
        super(legs);
    }
    fly() {
        console.log('flying');
    }
}


let bird = new Bird(2);

bird.walk();
bird.fly();

작동 방식.

먼저,extends키워드를 설정하다Bird에서 상속되는 클래스Animal클래스:

class Bird extends Animal {
   // ...
}

그Animal클래스는 기본 클래스 또는 상위 클래스라고 불리며,Birdclass는 파생 클래스 또는 자식 클래스로 알려져 있습니다.이렇게 함으로써Bird클래스는 의 모든 메서드와 속성을 상속합니다.Animal학급.

두 번째로는Bird의 컨스트럭터, 콜super()를 호출하다Animal를 사용하는 컨스트럭터legs논쟁.

JavaScript를 호출하려면 자식 클래스가 필요합니다.super()생성자가 있는지 확인합니다.에서 볼 수 있듯이Bird클래스,super(legs)는 ES5의 다음 문장에 해당합니다.

Animal.call(this, legs);

이 경우,Bird클래스에는 생성자가 없으므로 다른 작업을 수행할 필요가 없습니다.

class Bird extends Animal {
    fly() {
        console.log('flying');
    }
}

이는 다음 클래스에 해당합니다.

class Bird extends Animal {
    constructor(...args) {
        super(...args);
    }
    fly() {
        console.log('flying');
    }
}

단, 자클래스에는 컨스트럭터가 있기 때문에 콜해야 합니다.super()예를 들어, 다음 코드는 에러를 발생시킵니다.

class Bird extends Animal {
    constructor(legs) {
    }
    fly() {
        console.log('flying');
    }
}

오류:

ReferenceError: Must call super constructor in derived class before accessing 'this' or returning from derived constructor

왜냐하면super()를 초기화합니다.thisobject를 호출해야 합니다.super()접속하기 전에this물건.접속 시도 중this부르기 전에super()에러도 발생합니다.

예를 들어, 를 초기화하는 경우color의 특성Birdclass는 다음과 같이 실행할 수 있습니다.

class Bird extends Animal {
	constructor(legs, color) {
		super(legs);
		this.color = color;
	}
	fly() {
		console.log("flying");
	}
	getColor() {
		return this.color;
	}
}

let pegion = new Bird(2, "white");
console.log(pegion.getColor());

섀도우 방식

ES6에서는 자녀 클래스와 부모 클래스의 메서드를 같은 이름으로 설정할 수 있습니다.이 경우 자녀 클래스의 객체의 메서드를 호출하면 자녀 클래스의 메서드가 부모 클래스의 메서드를 섀도우합니다.

이하와 같다Dog클래스는Animal클래스화 및 재정의walk()방법:

class Dog extends Animal {
    constructor() {
        super(4);
    }
    walk() {
        console.log(`go walking`);
    }
}

let bingo = new Dog();
bingo.walk(); // go walking

자식 클래스의 부모 클래스의 메서드를 호출하려면super.method(arguments)다음과 같습니다.

class Dog extends Animal {
    constructor() {
        super(4);
    }
    walk() {
        super.walk();
        console.log(`go walking`);
    }
}

let bingo = new Dog();
bingo.walk();
// walking on 4 legs
// go walking

정적 멤버 상속

자식 클래스는 속성 및 메서드 외에 부모 클래스의 모든 정적 속성 및 메서드도 상속합니다.예를 들어 다음과 같습니다.

class Animal {
    constructor(legs) {
        this.legs = legs;
    }
    walk() {
        console.log('walking on ' + this.legs + ' legs');
    }
    static helloWorld() {
        console.log('Hello World');
    }
}

class Bird extends Animal {
    fly() {
        console.log('flying');
    }
}

이 예에서는Animal클래스에는helloWorld()static 메서드 및 이 메서드는 다음과 같이 사용할 수 있습니다.Bird.helloWorld()동작은 동일하며,Animal.helloWorld()방법:

Bird.helloWorld(); // Hello World

기본 제공 유형에서 상속

JavaScript를 사용하면 상속을 통해 Array, String, Map, Set 등의 기본 제공 유형을 확장할 수 있습니다.

이하와 같다Queue클래스는Array참조 유형. 구문은 생성자/프로토타입 패턴을 사용하여 구현된 것보다 훨씬 깨끗합니다.

class Queue extends Array {
    enqueue(e) {
        super.push(e);
    }
    dequeue() {
        return super.shift();
    }
    peek() {
        return !this.empty() ? this[0] : undefined;
    }
    empty() {
        return this.length === 0;
    }
}

var customers = new Queue();
customers.enqueue('A');
customers.enqueue('B');
customers.enqueue('C');

while (!customers.empty()) {
    console.log(customers.dequeue());
}

요약

• ES6에서 상속을 구현하려면 extens 키워드를 사용합니다.확장되는 클래스를 기본 클래스 또는 부모 클래스라고 합니다.기본 클래스 또는 상위 클래스를 확장하는 클래스를 파생 클래스 또는 하위 클래스라고 합니다.
• 문의처super(arguments)부모 클래스의 생성자를 호출하는 하위 클래스의 생성자.
• 사용하다super키워드를 지정하면 부모 클래스의 메서드를 자녀 클래스의 메서드로 호출할 수 있습니다.

 

 

 

 

 

참고: https://www.javascripttutorial.net/es6/javascript-inheritance/