es5 상속과 es6 상속의 차이점: ES5 상속은 프로토타입 또는 생성자 메커니즘을 통해 구현됩니다. 먼저 하위 클래스를 만든 다음 상위 클래스를 인스턴스화하고 이를 하위 클래스 this에 추가합니다. ES6은 먼저 상위 클래스를 생성한 후 인스턴스화된 하위 집합에서 super 메소드를 호출하여 상위 클래스에 액세스한 다음 이를 수정하여 상속을 구현합니다.
이 튜토리얼의 운영 환경: Windows 7 시스템, ECMAScript 5&&ECMAScript 6 버전, Dell G3 컴퓨터.
es6 상속과 es5 상속의 차이점
ES5 상속은 기본적으로 먼저 하위 클래스의 인스턴스 객체를 생성한 다음 이(Parent.apply(this))에 상위 클래스의 메서드를 추가합니다.
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 상속의 가장 큰 차이점은 다음과 같습니다.javascript 비디오 튜토리얼]을 수정하여 상속이 구현됩니다.
위 내용은 es6 상속과 es5 상속의 차이점은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!