ES5與ES6繼承的區別

2021-08-31 07:13:39 字數 1434 閱讀 4363

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)

function child(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)
然後通過prototype增加對應所需方法或屬性

parent.prototype.methods = function()

parent.prototype.attr = 'this is test attr『;

class parent

}

class parent

parentmethods()

} class child extends parent

childmethods()

} const point = new child(1,2,3);

alert(point.childmethods());

上面的**,是一套簡單的es6父子類繼承。

相信已經看出來了,雖明顯的區別就是在於es6中,啟用父元件的是super方法,而不是新建例項化,也就是說,父類的例項物件是先建立出來的,呼叫後,再去修改子類的建構函式中的this完善原型物件。

總結:es5和es6繼承最大的區別就是在於:

1.es5先建立子類,在例項化父類並新增到子類this中

2.es6先建立父類,在例項化子集中通過呼叫super方法訪問父級後,在通過修改this實現繼承

ES6 與 ES5 繼承的區別

es6 中有類 class 的概念,類 class 的繼承是通過 extends 來實現的,es5 中是通過設定建構函式的 prototype 屬性,來實現繼承的,es6 與 es5 的繼承有什麼區別呢?下面通過 3 個 demo,來分析它們之間的區別。1.es5 繼承 直接上 function a...

es5繼承與es6繼承

es5中的繼承方式 1.原型鏈繼承 缺點 1.建立例項時無法像父類建構函式傳遞引數 2.因為指定了原型,所以不能實現多繼承 3.父類建構函式上的屬性被所有子類共用,給原型上的屬性賦值會改變其他子類的屬性值 es5 const parent function name,age parent.proto...

ES6與ES5的繼承

類與es5中的建構函式寫法類似 區別在於屬性要放入constructor中,靜態方法和屬性實列不會繼承 子類與父類不會相互影響 es5 這三個函式是用來改變this的指向。聽不懂沒關係,我們來看個例子就明白。繼承 子類繼承父類所有屬性和行為,父類不受影響。目的 找到類之間的共性,精簡 提高 復用性,...