ES5 ES6的四種繼承方法

眾所周知，在es6之前，前端是不存在類的語法糖，所以不能像其他語言一樣，使用extends關鍵字就搞定繼承關係，需要一些額外的方法來實現繼承。

一. 原型鏈繼承

function parent()

parent.prototype.getname = function()
function child()
//主要精髓所在
child.prototype = new parent()
child.prototype.constructor = child
let mortalchild = new child()
mortalchild.getname() //'mortal'

1.每個例項對引用型別屬性的修改都會被其他的例項共享。

function parent()

function child()
//主要精髓所在
child.prototype = new parent()
child.prototype.constructor = child
let mortalchild2 = new child()
mortalchild2.name.push('mortal2')
console.log(mortalchild2.names) //['mortal','mortal1','mortal2']
let mortalchild3 = new child()
mortalchild3.name.push('mortal3')
console.log(mortalchild3.names) //['mortal','mortal1','mortal2','mortal3']

二. 借用建構函式(經典繼承)

function parent()

function child()
let mortalchild2 = new child()
mortalchild2.names.push('mortal2')
console.log(mortalchild.names) //['mortal','mortal1','mortal2']
let mortalchild3 = new child()
mortalchild3.names.push('mortal3')
console.log(mortalchild3.names) //['mortal','mortal1','mortal3']

1.解決了每個例項對引用型別屬性的修改都會被其他的例項共享的問題。

2.子類可以向父類傳值。

function parent(name)

function child(name)
let mortalchild = new child('mortal')
console.log(mortalchild.name) //mortal
let mortal2child = new child('mortal2')
console.log(mortal2child.name) //mortal2

1.無法復用父類的公共函式

2.每次子類構造例項都得執行一次父類函式。

三. 原型式繼承

複製傳入的物件到建立物件的原型上，從而實現繼承

function createobj(o)

f.prototype = o
return new f()
}let person = 
let person1 = createobj(person)
let person2 = createobje('person')
console.log(person1) //mortal
person1.body.push('head')
console.log(person2) //['foot','hand','head']

es6繼承

es6支援通過類來實現繼承，方法比較簡單，**如下：

class point

tostring()
}class colorpoint extends point
tostring()
}let colorpoint = new colorpoint('1','2','red')
console.log(colorpoint.tostring()) //red 12

es5 es6 繼承總結

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

ES5 ES6 實現繼承

function parent value parent.prototype.getvalue function function child value child.prototype new parent const child new child 1 child.getvalue 1我們來研究...

ES5，ES6中的繼承

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