es5 상속과 es6 상속의 차이점은 무엇입니까?

es5 상속과 es6 상속의 차이점은 다음과 같습니다. es5는 먼저 하위 클래스를 생성하고 상위 클래스를 인스턴스화한 다음 이를 하위 클래스에 추가하여 상속을 달성하는 반면 es6은 상위 클래스를 먼저 생성하고 super 메서드를 호출하여 상위 클래스에 액세스합니다. 인스턴스화된 하위 집합에서 마지막으로 이를 수정하여 상속이 이루어집니다.

이 튜토리얼의 운영 환경: Windows 10 시스템, ECMAScript 버전 6.0, Dell G3 컴퓨터.

es5 상속과 es6 상속의 차이점은 무엇인가요?

ES5 상속은 기본적으로 먼저 하위 클래스의 인스턴스 객체를 생성한 다음 부모 클래스의 메서드를 this(Parent.apply(this))에 추가합니다.

ES6 상속 메커니즘 본질적으로 부모 클래스의 인스턴스 객체 this가 먼저 생성되고(따라서 부모 클래스의 super() 메서드가 먼저 호출되어야 함) 하위 클래스의 생성자를 사용하여 this가 수정됩니다.

ES5 상속은 프로토타입 또는 생성자 메커니즘을 통해 구현됩니다.

ES6에서는 생성자가 포함된 class 키워드를 통해 클래스를 정의하고, 클래스 간 상속은 extends 키워드를 통해 이루어집니다. 서브클래스는 생성자 메서드에서 슈퍼 메서드를 호출해야 합니다. 그렇지 않으면 새 인스턴스를 생성할 때 오류가 보고됩니다. 하위 클래스에는 자체 this 객체가 없지만 상위 클래스의 this 객체를 상속받아 처리하기 때문입니다. 슈퍼 메소드가 호출되지 않으면 서브클래스는 this 객체를 가져올 수 없습니다.

ES6의 상속

전통적인 JS에서 객체를 생성하는 방법은 생성자를 만든 다음 생성된 객체를 정의하는 것입니다

function parent(a,b){
    this.a = a;
    this.b = b;
}

그런 다음 프로토타입을 통해 해당 필수 메서드나 속성을 추가합니다

parent.prototype.methods = function(){
    return 'this is test methods';
}
parent.prototype.attr = 'this is test attr‘;

그리고 ES6에서는 클래스 개념을 도입했습니다. 입니다, 수업. 객체는 키워드 class를 통해 정의됩니다.

　 클래스는 생성된 객체를 좀 더 명확하게 이해할 수 있도록 하는 키워드입니다.

컨트롤 메소드에서 전달한 매개변수를 받기 위해 속성 생성자를 사용합니다.

class parent{
    curstructor(a,b){
        this.a = a;
        this.b = b;
    }
}

ES6의 상속은 클래스 간 상속을 기반으로 합니다. 이는 키워드 확장을 통해 달성됩니다.

슈퍼 인스턴스화를 통해 상위 클래스 호출

class parent{
　　constructor(a,b){
　　　　this.a = a;
　　　　this.b = b;
　　}
　　parentMethods(){
　　　　return this.a + this.b
　　}
}
class child extends parent{
　　constructor(a,b,c){
　　　　super(a,b);
　　　　this.c = c;
　　}
　　childMethods(){
　　　　return this.c + ',' + super.parentMethods()
　　}
}
const point = new child(1,2,3);
alert(point.childMethods());

위 코드는 ES6 상위-하위 클래스 상속의 간단한 집합입니다.

이미 보셨을 거라 믿습니다만, ES6에서는 새로운 인스턴스화를 생성하는 것이 아니라 상위 구성 요소를 활성화하는 슈퍼 메서드라는 점, 즉 상위 클래스의 인스턴스 객체가 먼저 생성된다는 점입니다. 를 호출한 다음 서브클래스의 생성자에서 이를 수정하여 프로토타입 객체를 완성합니다.

요약:

ES5와 ES6 상속의 가장 큰 차이점은 다음과 같습니다.

　 1. ES5는 먼저 하위 클래스를 생성하고 상위 클래스를 인스턴스화한 다음 이를 하위 클래스에 추가합니다.

　 2. ES6는 상위 클래스를 먼저 생성합니다. 인스턴스화된 하위 집합에서 슈퍼 메서드를 호출하여 부모에 액세스한 후 this

[관련 권장 사항: javascript 비디오 튜토리얼, 웹 프론트 엔드]

을 수정하여 상속이 실현됩니다.

위 내용은 es5 상속과 es6 상속의 차이점은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!