淺談ES5和ES6繼承和區別

最近想在重新學下ES6，所以就把自己學到的，記錄下加強下自己的理解

首先先簡單的聊下ES5和ES6中的繼承

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繼承最大的區別就是在於：
　　　　1.ES5先創建子類，在實例化父類並添加到子類this中
　　　　2.ES6先創建父類，在實例化子集中通過調用super方法訪問父級后，在通過修改this實現繼承