es6繼承和es5繼承的差別是什麼

es5和es6繼承的區別： ES5的繼承是透過原型或建構函數機制實現的；它先創建子類，再實例化父類並添加到子類this中。 ES6先建立父類，再實例化子集中透過呼叫super方法存取父級後，再透過修改this實作繼承。

本教學操作環境：windows7系統、ECMAScript 5&&ECMAScript 6版、Dell G3電腦。

es6繼承和es5繼承的區別

• #ES5的繼承實質上是先創建子類別的實例對象，然後再將父類別的方法加入this上（Parent.apply(this)）.

• ES6的繼承機製完全不同，實質上是先建立父類別的實例物件this（所以必須先呼叫父類別的super()方法），然後再用子類別的建構子修改this。

• ES5的繼承是透過原型或建構子機制來實現。

• ES6透過class關鍵字定義類，裡面有建構方法，類別之間透過extends關鍵字實作繼承。子類別必須在constructor方法中呼叫super方法，否則新實例報錯。因為子類別沒有自己的this對象，而是繼承了父類別的this對象，然後對其進行加工。如果不呼叫super方法，子類別就得不到this物件。

注意super關鍵字指父類別的實例，也就是父類別的this物件。

注意：子類別建構子中，呼叫super後，才可使用this關鍵字，否則報錯。

1、在es5中的繼承：

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

透過子集去繼承父級：

parent.call(child,1,2)

而去看call的底層方法可知，繼承的過程是透過prototype屬性

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

由此可知，ES5繼承的實質是先創建了子類元素child的的實例對象，然後再把父類元素parent的原型對像中的屬性賦值給子類別元素child的實例物件裡面，從而實現繼承

2、ES6中的繼承

在傳統JS中，生成物件是透過建立建構函數，然後定義生成物件

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

然後透過prototype增加對應所需方法或屬性

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

而ES6中引入了類別的概念，也就是class。透過關鍵字class去定義物件。

class是個關鍵字，語言糖，這樣能更清晰的讀取所創建的物件,

#透過屬性constructor來接收控制方法傳入的參數，如果不寫這個屬性，預設是沒有參數的

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

ES6中的繼承是基於class類別之間繼承的。透過關鍵字extends實現。

透過super實例化呼叫父類別

	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中，啟動父元件的是super方法，而不是新建實例化，也就是說，父類別的實例物件是先創建出來的，呼叫後，再去修改子類別的建構子中的this完善原型物件。

總結：

ES5和ES6繼承最大的差別就是在於：

• ES5先建立子類，在實例化父類別並加入到子類別this中

• ES6先建立父類，在實例化子集中透過呼叫super方法存取父級後，在透過修改this實作繼承

【推薦學習：javascript影片教學】

以上是es6繼承和es5繼承的差別是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章！