淺談js的幾種繼承方式(摘自js紅寶書)
阿新 • • 發佈:2021-07-07
1、原型鏈繼承
js的主要繼承方式就是通過原型鏈繼承,基本思想就是通過原型繼承多個引用的屬性和方法(js之所以有原型鏈這東西估計也就是為了繼承而設計的)
所有的建構函式都有一個原型(建構函式通過prototype指向原型,原型又通過constructor指回建構函式)
由建構函式new出來的例項也有一個屬性__proto__指向建構函式的原型,現在就知道原型中constructor的作用了,幫助例項物件找到他媽。
上述各個物件之間的扯蛋關係就稱之為原型鏈。
現在說說原型鏈繼承:
此處定義一個函式(富豪王林):
function WangLin() { this.money = 'hundreds of millions' }
王林家族又有一個癖好,炫耀財富:
WangLin.prototype.ShowWealth = function(){ return this.money; }
此時有一個王聰,口袋裡並沒有什麼錢:
function WangCong () { this.myMoney='0.1' }
王聰想要繼承王林的錢,怎麼辦,那就讓王聰的家族與王林產生關係:
WangCong.prototype = new WangLin();
此時我們給王聰家族也加一個方法:
WangCong.prototype.ShowMyWealth = function() { return this.myMoney; }
此時我們可以看到,王聰家族的人也可以搞到王林的錢了:
let Shacha = new WangCong() console.log(ShaCha.ShowWealth()) // 'hundereds of millions'
言歸正傳:
該方法使得王聰拋棄了自己的原型,直接用來王林new出來的例項,根據原型鏈的扯淡關係,王聰就可以使用王林例項和王林原型的任何屬性和方法了;
該方法在對引用型別使用時會存在重大缺陷,可以理解為一個人幹某些事後會影響所有相關鏈的家人。
2、搶劫建構函式實現繼承:
此處有一個白富美:
function BaiFunMei(){ this.features =[ 'bai', 'fun', 'mei' ] }
一傻蛋想要白富美的特點,直接強取就可以(簡單粗暴,不服打死):
function ShaDan() { BaiFuMei.call(this); }
言歸正傳:
該方法比較原型鏈繼承優點在於相互之間不會存在之前引用型別造成的影響,但缺點也是不能通過原型鏈訪問其被繼承者原型上的方法和屬性;
3、組合繼承
故名思義,將1和2中的方法結合起來,結合了兩者的優點,是目前js中使用最多的繼承模式;(具體可參考紅寶書,此處不在瞎扯)
4、原型式繼承
後續補充
5、寄生式繼承
後續補充
6、寄生式組合繼承
後續補充