大家都知道JavaScript中沒有類的概念,那麼 怎麼實現繼承呢?這就是今天要實現的內容。
在實現之前,先來看一道騰訊的js面試題:
有一隻小狗,叫“花花”,它會‘汪汪’叫,它的同伴也會‘汪汪’叫,後來環境發生變化,新出生的狗狗不會‘汪汪’叫了,而是變成‘嗚嗚’。試通過繼承來達到目的。
帶着實際問題去學習,更能知道自己想要的是什麼,更能抓住重點。先憋開面試題不說,先看看,js如何實現繼承。
一、通過“原型”實現繼承
JavaScript中既然沒有類的概念,肯定不是通過類來實現繼承的。這裏先介紹第一種常見的繼承方式——原型繼承
1、定義一個“狗”的父類,有“叫”的方法
function Dog(){
this.bark = function(){alert('汪汪');};
}
2、定義一個“獵狗”的子類
function HuntingDog(){
this.climb = function(){alert('我會爬樹');};
}
3、讓“獵狗”也會“叫”
HuntingDog.prototype = new Dog(); //通過關鍵字‘prototype’開始繼承
4、測試
var huntingDog = new HuntingDog();
huntingDog.bark();//獵狗也會叫,調用Dog的函數
到此,已經實現子類“獵狗”繼承父類“狗”,這種繼承方式是通過關鍵字“prototype”來實現的,指定“獵狗”的原型是“狗”,這樣“獵狗”就具有了“狗”的全部屬性。其實在JavaScript中,每個對象都有一個原型對象,直至頂層的Object對象,當然Object對象的原型值爲null。
輸出 “獵狗”對象 console.log(huntingDog); 如圖:
那麼,“獵狗”對象huntingDog是如何找到bark()方法的呢?
獵狗huntingDog首先在自身對象上尋找bark()方法,尋找不到,去原型尋找,原型Dog對象上,有bark方法,調用bark方法。
其實這裏也就涉及到了JavaScript高級中一個重要的概念——原型鏈
對象 -> 原型 -> 原型的原型 -> Object -> null ,這樣的一條鏈,稱爲原型鏈
對象的屬性和方法,就是沿着原型鏈來查找和調用的,也就是js的原型繼承
通過原型關鍵字”prototype“實現js繼承是最常用的方法,但是原型繼承時,發生的改變會影響下游的所有子類,由於篇幅關係,下篇文章中繼續介紹js實現繼承其他的方式。