6、JavaScript高級之繼承一(原型鏈)

大家都知道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實現繼承其他的方式

發佈了23 篇原創文章 · 獲贊 3 · 訪問量 6萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章