一、繼承的概念 子類共用父類的數據和方法的行為,就叫繼承。 二、E55如何實現繼承?探索JavaScript繼承的本質 2.1構造函數之間的“複製粘貼” 第一條路是通過構造函數來繼承,這可以理解為子類直接複製了父類構造函數的代碼,然後按照一定的規矩“粘貼”在自己的構造函數中,為己所用。舉個例子: 如 ...
一、繼承的概念
子類共用父類的數據和方法的行為,就叫繼承。
二、E55如何實現繼承?探索JavaScript繼承的本質
2.1構造函數之間的“複製粘貼”
第一條路是通過構造函數來繼承,這可以理解為子類直接複製了父類構造函數的代碼,然後按照一定的規矩“粘貼”在自己的構造函數中,為己所用。舉個例子:
如果A要繼承B的屬性,是不是直接把this.name = name複製粘貼到A函數就可以了?簡單粗暴。
所以在A中,直接執行B函數,不就等於執行了this.name = name嗎。
直接這樣嘗試下,發現是不行的,這是因為B中的this指向B的實例化對象,A中的this指向A的實例化對象,所以要統一this的指向。
這樣,就完成了一次合乎規範的構造函數之間的“代碼複製粘貼”,也就是繼承。這其實也是後面ES6中super關鍵字的實現原理。
2.2原型鏈上要“擠進一位來客”
當然,這還是不夠的,因為在實際情況中,B這個構造函數還可以拓展一些方法和屬性到原型鏈上,比如:
我們在構造函數B中拓展了一個skill方法,發現上面那種“複製粘貼”的方法不好使了對嗎?這是因為A的原型鏈和B的原型鏈還沒有“建立聯繫”,我們需要在A和B之間搭一座橋,把他們聯繫起來。
熟悉基本原型鏈的同學都知道,原型鏈的“通信”是通過隱式原型(__proto__)來實現的。所以基本原型鏈是這樣的:
這就是基本的原型鏈,現在的情況是,A要繼承B的屬性和方法,所以B得加入到原型鏈中,並且,B要在A的上面,所以理想的情況是不是應該像下麵這樣:
實際上我們也確實是這麼做的,也就是令A.prototype.__proto__ = B.prototype。
控制台試一下,成功了。
總結一下:ES5實現繼承需要兩步,第一:合乎規範的“代碼複製粘貼”;第二,原型鏈上“搭座橋”。
三,ES6實現繼承,其實只是換了種叫法
首先,要明確JavaScript是沒有真正“類”的概念的,ES6中的類,就是ES5中構造函數。
這件事是很容易驗證的,類A的類型列印出來,就是function。
ES6實現類的繼承,是不是也要“兩步走”呢?答案是肯定的,看看ES6的繼承如何實現:
其實原理是完全一樣的,extends相當於做了A.prototype.__proto__ = B.prototype這件事,而super則相當於執行了ES5中的B.call(this,name)這個操作,只是換個操作的名字向Java靠攏而已。