国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

javaScript原型及原型鏈詳解（二）

widuu / 1932人閱讀

摘要：當然這還沒完，因為我們還有重要的一步沒完成，沒錯就是上面的第行代碼，如果沒有這行代碼實例中的指針是指向構造函數的，這樣顯然是不對的，因為正常情況下應該指向它的構造函數，因此我們需要手動更改使重新指向對象。

第一節內容：javaScript原型及原型鏈詳解（二）

第一節中我們介紹了javascript中的原型和原型鏈，這一節我們來講利用原型和原型鏈我們可以做些什么。

普通對象的繼承 
  var a = {
    x: 10,
    caculate: function(z) {
      console.log(this.x + this.y + z)
    }
  };

  var b = {
    y: 20,
    __proto__: a
  };

  var c = {
    y: 30,
    __proto__: a
  };

  b.caculate(30)    // 60
  c.caculate(40)    // 80

這樣我們就通過的原型鏈實現了普通對象的繼承，下面我們還是通過一張原型圖來講解一下繼承的過程。

上面代碼中我們創建了三個普通對象a、b、c，其中a有一個x屬性，和caculate方法；b和c都有一個y屬性，同時讓b和c的默認屬性__proto__屬性指向a對象，如圖所示。
這是時候我們調用了b.caculate(30), c.caculate(40),顯然b和c的自身方法中是沒有caculate方法的，那么這個時候就會沿著b的原型鏈向上查找，然后找到了a中有caculate方法，則返回caculate方法，
如果a中也沒有這個方法，那么會沿著原型鏈繼續向上查找，找到則返回，找不到則返回undefined

函數對象的繼承

比如我們有一個名為"Animal"的構造函數，還有一個叫做"Cat"的構造函數：

function Animal() {};
Animal.prototype.species = "動物";

function Cat(name, color) {
    this.name = name;
    this.color = color;
}

其中Animal對象中有一個原型屬性species = "動物"，Cat對象有兩個自身對象name和color，這個時候我們如果需要讓Cat對象擁有Animal對象中的屬性應該怎么辦呢？ 很簡單我們只需要讓Cat繼承Animal對象就行了，下面我們看如何讓Cat繼承Animal：

1    Cat.prototype= new Animal();
2    Cat.prototype.constructor = Cat;

3    var cat1 = new Cat("大白", "白色")
4    console.log(cat1.species)    // 動物

上面的方法是通過直接繼承prototype的方法實現的繼承，如上圖所示：我們一開始創建Cat對象時，Cat.prototype默認指向Cat的原型(如步驟1所示)。 然后我們更改Cat的原型鏈，讓Cat.prototype指向Animal 的實例(實例中具有構造函數的所有屬性和方法)，如步驟2所示，這樣就成功更改了Cat的原型鏈，當我們調用Cat.species屬性時，沿著原型鏈就查找到Animal實例中的species屬性了，這樣就實現了函數對象的繼承。
當然這還沒完，因為我們還有重要的一步沒完成，沒錯！就是上面的第2行代碼，如果沒有這行代碼Animal實例中的constructor指針是指向Animal構造函數的，這樣顯然是不對的，因為constructor正常情況下應該指向它的構造函數，因此我們需要手動更改:Cat.prototype.constructor = Cat; 使constructor重新指向Cat對象。

我們這里講的繼承的方法只是常見的一種，另外還有多種方法實現繼承，這里推薦阮一峰的一篇文章：構造函數的繼承，里面講了常見的實現繼承的方法。這篇文章也是參考了里面的方法。

如果看了這兩篇文章，你還是沒搞清楚原型和原型鏈，給你推薦我學習的時候看的幾篇文章，反復的看反復的閱讀，總會弄明白的，畢竟我是花了三天時間才搞懂了。
最詳盡的 JS 原型與原型鏈終極詳解
深入理解JavaScript系列（10）：JavaScript核心（晉級高手必讀篇）
前端開發必須知道的JS（一） 原型和繼承

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/83051.html

相關文章

  • javaScript原型及原型鏈詳解（一）

    摘要：執行行代碼，我們可以看到控制臺打印出來的結果如下結果印證了我們上面講的內容指向的構造函數指向的原型對象原型對象中指向構造函數。 在javascript中原型和原型鏈機制是最難懂的部分（沒有之一），同時也是最重要的部分，在學習的過程中你可能認認真真的看了一遍但還是完全不懂書上說的什么，的確是這樣的，我在學習的時候可是反復看了4、5遍才初步理解了。 下面我把我的理解總結了一下希望對你們有...

    springDevBird 評論0 收藏0

  • javascript中new關鍵字詳解

    摘要：本文給大家詳細介紹了下中關鍵字的使用方法，以及使用關鍵字的區別，有需要的小伙伴可以參考下。第行通過關鍵字創建了一個新對象行對象嘗試訪問和屬性，并調用方法。一般情況下，函數對象在產生時會內置屬性并將函數名作為賦值僅函數對象。 本文給大家詳細介紹了下javascript中new關鍵字的使用方法，以及javascript 使用new關鍵字的區別，有需要的小伙伴可以參考下。 function ...

    alaege 評論0 收藏0

  • 【前端基礎進階】JS原型、原型鏈、對象詳解

    摘要：二構造函數我們先復習一下構造函數的知識上面的例子中和都是的實例。這兩個實例都有一個構造函數屬性，該屬性是一個指針指向。原型鏈其中是對象的實例。 一. 普通對象與函數對象 JavaScript 中，萬物皆對象！但對象也是有區別的。分為普通對象和函數對象，Object 、Function 是 JS 自帶的函數對象。下面舉例說明 var o1 = {}; var o2 =new Objec...

    explorer_ddf 評論0 收藏0

  • 深入理解JavaScript

    摘要：深入之繼承的多種方式和優缺點深入系列第十五篇，講解各種繼承方式和優缺點。對于解釋型語言例如來說，通過詞法分析語法分析語法樹，就可以開始解釋執行了。 JavaScript深入之繼承的多種方式和優缺點 JavaScript深入系列第十五篇，講解JavaScript各種繼承方式和優缺點。 寫在前面 本文講解JavaScript各種繼承方式和優缺點。 但是注意： 這篇文章更像是筆記，哎，再讓我...

    myeveryheart 評論0 收藏0

  • 【連載】前端個人文章整理-從基礎到入門

    摘要：個人前端文章整理從最開始萌生寫文章的想法，到著手開始寫，再到現在已經一年的時間了，由于工作比較忙，更新緩慢，后面還是會繼更新，現將已經寫好的文章整理一個目錄，方便更多的小伙伴去學習。 showImg(https://segmentfault.com/img/remote/1460000017490740?w=1920&h=1080); 個人前端文章整理 從最開始萌生寫文章的想法，到著手...

    madthumb 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<