ES5如何實現繼承

原型鏈繼承的原理很簡單，直接讓子類的原型物件指向父類例項，當子類例項找不到對應的屬性和方法時，就會往它的原型物件，也就是父類例項上找，從而實現對父類的屬性和方法的繼承

function
prant() 
prant.prototype.getname = function
() function child() {} //
子類//
讓子類的原型物件指向父類例項, 這樣一來在child例項中找不到的屬性和方法就會到原型物件(父類例項)上尋找
child.prototype = new
prant();
//根據原型鏈的規則,順便繫結一下constructor, 這一步不影響繼承, 只是在用到constructor時會需要
child.prototype.constructor =child;
const alias = new
child();
alias.name 
//hello
alias.getname();  //
hello

缺點：建構函式繼承，即在子類的建構函式中執行父類的建構函式，並為其繫結子類的this，讓父類的建構函式把成員屬性和方法都掛到子類的this上去，這樣既能避免例項之間共享乙個原型例項，又能向父類構造方法傳參

function
parent(name) 
parent.prototype.getname = function
() function child() 
const child1 = new
child();
const child2 = new
child();
child1.name[0] = '建構函式繼承';
console.log(child1.name) 
//建構函式繼承
console.log(child2.name) //
hello
child2.getname(); //
找不到,報錯

缺點：將以上兩者組合起來使用

function
parent(name) 
parent.prototype.getname = function
() function
child() 
//原型鏈繼承
child.prototype = new
parent()
child.prototype.constructor =child
//測試
const child1 = new
child()
const child2 = new
child()
child1.name[0] = 'hello'console.log(child1.name)          
//['hello']
console.log(child2.name)          //
['zhangsan']
child2.getname()                  //
['zhangsan']

缺點：解決建構函式被執行兩次的問題, 我們將指向父類例項改為指向父類原型, 減去一次建構函式的執行

function
parent(name) 
parent.prototype.getname = function
() function
child() 
//原型鏈繼承
= new parent()
child.prototype = object.create(parent.prototype)  //
將`指向父類例項`改為`指向父類原型`
child.prototype.constructor =child
//測試
const child = new
child()
const parent = new
parent()
child.getname()                  
//['zhangsan']
parent.getname()                 //
報錯, 找不到getname()

目前最成熟的繼承方式，js高階體現。

說到js繼承，最開始想到的應該是是原型鏈繼承，通過把子類例項的原型指向父類例項來繼承父類的屬性和方法，但原型鏈繼承的缺陷在於對子類例項繼承的引用型別的修改會影響到所有的例項物件以及無法向父類的構造方法傳參。

建構函式繼承, 通過在子類建構函式中呼叫父類建構函式並傳入子類this來獲取父類的屬性和方法，但建構函式繼承也存在缺陷，建構函式繼承不能繼承到父類原型鏈上的屬性和方法。

後面有了組合式繼承，但也有了新的問題，每次都會執行兩次父類的構造方法，最終有了寄生式組合式繼承。

ES5如何實現繼承

es5實現繼承

ES5實現繼承

ES5實現繼承

ES5如何實現繼承

es5實現繼承

ES5實現繼承

ES5實現繼承

相關推薦