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

es5 상속과 es6 상속의 차이점: ES5 상속은 프로토타입 또는 생성자 메커니즘을 통해 구현됩니다. 먼저 하위 클래스를 만든 다음 상위 클래스를 인스턴스화하고 이를 하위 클래스 this에 추가합니다. ES6은 먼저 상위 클래스를 생성한 후 인스턴스화된 하위 집합에서 super 메소드를 호출하여 상위 클래스에 액세스한 다음 이를 수정하여 상속을 구현합니다.

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

es6 상속과 es5 상속의 차이점

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

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

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

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

super 키워드는 상위 클래스의 인스턴스, 즉 상위 클래스의 this 객체를 참조한다는 점에 유의하세요.

참고: 하위 클래스 생성자에서 this 키워드는 super를 호출한 후에만 사용할 수 있습니다. 그렇지 않으면 오류가 보고됩니다.

1. es5의 상속:

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

하위 집합을 통한 부모 상속:

parent.call(child,1,2)

기본 호출 방법을 살펴보면 상속 프로세스가 프로토타입 속성

child.prototype = new parent(1,2);

을 통해 이루어짐을 알 수 있습니다. 상속의 본질은 먼저 하위 클래스 요소 자식의 인스턴스 객체를 생성한 다음 상위 클래스 요소 부모의 프로토타입 객체에 있는 속성을 하위 클래스 요소 자식의 인스턴스 객체에 할당함으로써 상속을 실현하는 것입니다.

2, 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는 생성된 객체를 좀 더 명확하게 이해할 수 있도록 하는 키워드입니다.

컨트롤 메소드에서 전달한 매개변수는 속성 생성자를 통해 전달됩니다. 기본 매개변수

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 상속의 가장 큰 차이점은 다음과 같습니다.

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

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

[권장 학습:

javascript 비디오 튜토리얼]을 수정하여 상속이 구현됩니다.

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