ES5 ES6 實現繼承

2021-10-23 20:15:36 字數 1285 閱讀 5526

function parent(value) 

parent.prototype.getvalue = function ()

function child(value)

child.prototype = new parent()

const child = new child(1)

child.getvalue()//1

我們來研究一下這段**到底想做什麼:子類child想要繼承父類parent的屬性val和方法getvalue。

一般我們所說的繼承,是繼承父類的prototype,所以父類的getvalue方法應新增到父類的prototype中,而不是通過 this.getvalue = function(){} 新增到父類的建構函式中。

然後child想要繼承屬性val,所以通過呼叫父類建構函式的方式來繼承,而非直接在自己的建構函式中寫 this.val = value 來繼承,這樣體現不出繼承的意義,因為相當於是直接給子類新增了val屬性而不是繼承了父類的val屬性。

雖然這例子可能本身就比較刻意,但是我們只要通過這個例子能理解繼承的思想即可。

理解了這段**的想法,也能發現這種方式的缺點所在了:那就是在這個過程中呼叫了父類的建構函式,所以在子類的原型中多了不需要的父類屬性,即原型鏈上有兩個val了,存在記憶體上的浪費

可以用其他繼承方式來解決這種問題,比如寄生組合繼承。

這裡就不多作分析了,自行研究哦~

function parent(value) 

parent.prototype.getvalue = function ()

function child(value)

child.prototype = object.create(parent.prototype,

})const child = new child(1)

child.getvalue() // 1

es6的class和extends語法其實就是es5繼承語法的語法糖,class的本質還是函式

class parent 

getvalue()

}class child extends parent

}let child = new child(1)

child.getvalue()//1

console.log(child);

es5 es6 繼承總結

一 原型鏈繼承 原型鏈繼承的原理 直接讓子類的原型物件指向父類例項,當子類例項找不到對應的屬性和方法時,就會往它的原型物件,也就是父類例項上找,從而實現對父類的屬性和方法的繼承。父類 function fat 父類上的原型方法 fat.prototype.getname function 子類 fu...

js的繼承實現(ES5,ES6)

es5 通過原型鏈實現繼承 通過原型實現繼承,最簡單的方法就是 subclass.prototype new superclass 但是這種方式有乙個弊端,就是會丟失subclass.prototype上的原有constructor constructor 屬性是建立例項物件的函式的引用,我們可以通...

ES5,ES6中的繼承

es5中的繼承 1,借助建構函式實現繼承 只能實現部分繼承 原理 通過call 函式改變this指向,將父類屬性掛載到子類例項中 function parent function child console.log new child 總結 優點 只呼叫一次父類的建構函式,避免了在子類原型中建立不必...