1. 程式人生 > >ES5與ES6繼承的區別

ES5與ES6繼承的區別

1.ES5的繼承實質上是先建立子類的例項物件,然後再將父類的方法新增到this上(Parent.apply(this)).

2.ES6的繼承機制完全不同,實質上是先建立父類的例項物件this(所以必須先呼叫父類的super()方法),然後再用子類的建構函式修改this。

3.ES5的繼承時通過原型或建構函式機制來實現。

4.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繼承最大的區別就是在於:     1.ES5先建立子類,在例項化父類並新增到子類this中     2.ES6先建立父類,在例項化子集中通過呼叫super方法訪問父級後,在通過修改this實現繼承