[TOC] >[success] # es5 -- 繼承 ~~~ 1.下面的案例創建一個'Food'類，創建一個'Vegetables' 類。如果想繼承就 讓'Vegetables'的原型鏈等于'Food' 實例 ~~~ >[danger] ##### 繼承案例 ~~~ function Food(){ this.type = 'food' } // 通過原型鏈給 Food 寫方法 Food.prototype.getType = function(){ return this.type } function Vegetables(name) { this.name = name } // 將原型鏈里添加你要繼承的類實例(繼承) Vegetables.prototype = new Food() // 創建一個蔬菜的 實例 const tomato = new Vegetables() console.log(tomato.getType()) // 打印結果：food ，繼承了父類Food的getType方法 ~~~ >[success] # es6 -- 繼承 ~~~ 1.es6 的'class' 是一個語法糖，也就是說明我們看到的es6 繼承還是遵循了'es5'邏輯， 只是寫法變了 2.'es6' 的 繼承使用關鍵字'extends' 和 'super' 3.繼承同樣會繼承父類的靜態方法，但是別忘了靜態方法只有類能調用，因此子類想 用的時候還是需要子類去調用，別用實例去調用 ~~~ >[danger] ##### 案例 ~~~ 1.下面的案例創建了一個'Animal'類，我們創建了一個'People '類 繼承'Animal', 'People' 繼承'Animal' 的時候使用'extends '關鍵字，而且在'People '構造函數中 增加了'super()'他會繼承父類的'構造函數' ~~~ ~~~ class Animal { constructor (name,age){ this.name = name this.age = age } speak(){ return `在${this.name}說話` } } class People extends Animal{ constructor(name,age,sex){ super(name,age) // 等同于 Animal 中的constructor this.sex = sex } getSex(){ return `${this.name} 的性別：${this.sex} 年齡${this.age}` } } const xiaoMing = new People('xiaoMing',17,'男') console.log(xiaoMing.speak()) //繼承了父類方法 打印結果： 在xiaoMing說話 console.log(xiaoMing.getSex()) //繼承了父類age屬性打印結果： xiaoMing 的性別：男 年齡17 ~~~ >[danger] ##### 實例跟當前類和父類關系 ~~~ 1.使用'instanceof' 運算符用來測試一個對象在其原型鏈中是否存在一個構造函數,注意 是一個對象說否在，基本類型number 之類是有坑的，他們不是對象所以不存在判斷說法舉個例子: let num = 1 num instanceof Number // false // 轉成了對象 num = new Number(1) num instanceof Number // true 2.利用'instanceof ' 也能說明這個class其實是語法糖，他們跟es5 一樣的都在原型鏈上 ~~~ * 上面的案例 當前實例 和 父類都是true 也能說明他們都在原型鏈上 ~~~ console.log(xiaoMing instanceof People) // true console.log(xiaoMing instanceof Animal) // true ~~~ >[danger] ##### 判斷當前類的父類 -- getPrototypeOf ~~~ console.log(Object.getPrototypeOf(People) === Animal) // true ~~~ >[danger]##### super -- 作為對象/ 和函數 ~~~ 1.當'super' 是函數的時候，在'constructor' 中使用表示父類的構造函數 2.當作為對象'super作為對象',對象使用見案例 2.1.在普通方法中 -》 父類的原型對象 2.2 在靜態方法中 -》 父類 ~~~ * 案例 ~~~ class Parent { constructor () { this.type = 'parent' } getName () { return this.type } } Parent.getType = () => { return 'is parent' } class Child extends Parent { constructor () { super() console.log('constructor: ' + super.getName()) } getParentName () { // 調用了父類的方法，這個方法是實例調用，因此說是父類的原型對象 console.log('getParentName: ' + super.getName()) } static getParentType () { // 因為靜態方法只能類調用因此'super' 指代是父類 console.log('getParentType: ' + super.getType()) } } const c = new Child() c.getParentName() Child.getParentType() ~~~ >[danger] ##### __proto__ 和 prototype ~~~ 子類的__proto__指向父類本身 子類的prototype屬性的__proto__指向父類的prototype屬性 實例的__proto__屬性的__proto__指向父類實例的__proto__ ~~~ >[danger] #### es5 不能繼承原生構造函數es6可以 * 原生構造函數 ~~~ // Boolean // Number // String // Array // Date // Function // RegExp // Error // Object ~~~ ~~~ // Boolean // Number // String // Array // Date // Function // RegExp // Error // Object class CustomArray extends Array { constructor (...args) { super(...args) } } const arr = new CustomArray(3, 4, 5) // arr.fill('+') console.log(arr) console.log(arr.join('_')) ~~~