JS繼承 筆記

來源:互聯網
上載者:User

JS繼承
JavaScript中沒有類的概念,與類相關的繼承的概念更是無從談起,但是我們可以通過特殊的文法來

類比物件導向語言中的繼承。
在JS中類比繼承有多種方式,其中寄生組合模式是一種比較容易簡單的類比繼承模式,下面我們就來

介紹一下用寄生組合模式類比繼承。
JS的繼承包括屬性的繼承和方法的繼承,他們分別通過不同的方法來實現。
1屬性的繼承
屬性的繼承通過改變函數的執行環境來實現的。而改變函數的執行環境可以使用call()和apply()兩種

方法來實現。
我們首先建立一個Animal“類”(因為JS中沒有類的概念,這裡只是一個類比,它實際上只是一個

Function函數對象)。
複製代碼 代碼如下:
   function Animal(name){
   this.name=name;
  }

再建立一個Lion“類”,“繼承”於Animal
複製代碼 代碼如下:
  function Lion(){
   Animal.apply(this, ["獅子"]);
   }

這裡使用了Animal的apply方法,把Animal的執行環境改成Lion被調用時的執行環境。
這裡要解釋一下,我們要想使用Lion這個“類”,通常需要new一個Lion。如:
       var l = new Lion();
而new關鍵字是十分偉大的,在上段代碼中,new關鍵字完成了以下幾項工作:
   1)開闢堆空間,以準備儲存Lion對象
  2)修改Lion對象本身的執行環境,使得Lion函數的this指向了Lion函數對象本身。
  3)調用Lion“類”的“建構函式”,建立Lion對象
  4)將Lion函數對象的堆地址賦值給變數l,這個時候l就指向了這個Lion函數對象
所以經過new關鍵字以後Animal.apply(this, ["獅子"])中的this已經指向了Lion函數對象本身了,所

以這段代碼就將Animal函數的執行環境改變成了Lion函數中,相當於以下代碼:
複製代碼 代碼如下:
  function Lion(){
  function Animal(name){
  this.name=name;
   }
  }

而此時的this已經是Lion函數對象了所以上段代碼進一步相當於:
複製代碼 代碼如下:
  function Lion(){
   this.name=name;
  }

這樣就給Lion函數對象添加了name屬性,也類比了Lion函數繼承於Animal函數的效果。
2方法的繼承
在JS中每一個“類”(即函數,注意不是函數對象)都有一個prototype屬性,prototype表示該函數

的原型,也表示一個類的成員的集合(通常是方法的集合)。我們可以通過函數的prototype屬性來實現方

法的繼承。
我們同樣首先建立一個Animal“類”:
複製代碼 代碼如下:
   function Animal(name){
  this.name=name;
  }

給Animal的原型中加入一個eat方法:
複製代碼 代碼如下:
  Animal.prototype.eat=function(){
   alter("我能吃!~");
  }

建立一個Lion“類”,同時完成對Animal“類”的屬性的繼承
複製代碼 代碼如下:
   function Lion(){
Animal.apply(this, ["獅子"]);
  }

注意下面的代碼,我們馬上要完成方法的繼承了
Lion.prototype=new Animal();
這樣就把一個Animal函數對象儲存在了Lion的原型中了,Lion也就包含了Animal中的方法了(其實也

包含了屬性)。這樣就類比了Lion函數對Animal的繼承。

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.