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

資訊專欄INFORMATION COLUMN

【JS基礎】原型對象的那些事（二）

yanbingyun1990 / 3177人閱讀

摘要：只是構造函數上的一個屬性，它是一個指針，指向原型對象，并不表示就是原型對象。在上一個例子中，就是一個對象，這個對象可以說是原生構造函數的實例，所以也是一個對象，所以它也有屬性，不過它的指向也就是原型鏈的頂端，再往上就沒有了。

上一篇講了
①原型對象是什么；
②__proto__、prototype、constructor的關系；
③原型對象的作用；
④原型對象帶來的一些需要注意的問題；

沒理解的可以再復習一下。
傳送門：JS基礎—原型對象的那些事（一）

今天講一下原型鏈以及原型鏈的關系圖。

原型鏈是什么

每個對象都有一個__proto__屬性，指向對象的原型。

ps:準確的說，是每一個實例都有一個[[Prototype]]屬性，指向原型對象。這是一個隱式屬性，存在但是我們的腳本訪問不到，不過瀏覽器廠商大部分都支持一個__proto__屬性，用來顯示指向原型，雖然能用，但__proto__不是ECMA中的規范。

原型的值可以是一個對象，也可以是null。如果它的值是一個對象，那么這個對象也一定有自己的原型。這樣就形成了一條線性的鏈，我們稱之為原型鏈。

當我們在對象上調用一個屬性或者方法時，會先在這個對象上尋找，沒有的話就去它的原型對象上找，原型對象上沒有就去原型對象的原型對象上找，一直找到原型對象為null為止，沒有的話就是undefined。

簡而言之，對象尋找一個屬性會沿著原型鏈向上尋找，直到原型鏈的頂端。

還是以上一篇的Person為例

function Person(name) {
    this.name = name
}
Person.prototype.sayName = function() {
    console.log(this.name)
}
var person = new Person("張三")

我們先來畫一個簡單的關于原型的關系圖

以上是實例、構造函數和原型對象三者的關系圖。

PS: prototype只是構造函數上的一個屬性，它是一個指針，指向原型對象，并不表示Person.prototype就是原型對象。這里將Person.prototype認為是原型對象，是為了方便理解，需要注意哦。

看不懂的同學去復習上一篇的內容，看懂的我們繼續。

注意點一 
原型對象也是對象，是對象就有__proto__屬性，指向它的原型對象。

在上一個例子中，Person.prototype就是一個對象，這個對象可以說是原生Object構造函數的實例，所以

Person.prototype.__proto__ === Object.prototype

Object.prototype也是一個對象，所以它也有__proto__屬性，不過它的__proto__指向null,也就是原型鏈的頂端，再往上就沒有了。

重新補充一下關系圖

看懂的我們繼續

注意點二 
任何函數都可以說是原生Function構造函數的實例。

所以Person構造函數是Function構造函數的實例。

Person.__proto__ === Function.prototype

繼續我完善我們的關系圖

可能有人疑惑，Person不是函數嗎，函數怎么也有__proto__，函數不是只有prototype嗎？

因為函數本質也是對象啊，在JS的世界里，萬物皆對象，所以函數有__proto__沒毛病。

注意點三

Function.prototype也是對象，所以和Person.prototype一樣，Function.prototype可以說是原生Object構造函數的實例，所以

Function.prototype.__proto__ === Object.prototype

補充我們的圖（紅色的線）

注意點四

Function和Object都是構造函數，根據第二點任何函數都可以說是原生Function構造函數的實例，那么

Function.__proto__ === Function.prototype

Object.__proto__ === Function.prototype

完善我們的圖（藍色的線），大功告成。

恩，就是這么神奇，Function是Function的實例。。。

以上就是原型鏈的關系圖，將這個圖弄懂，原型對象的知識基本就掌握了。

雖然在真實場景中，這些知識用到的沒這么復雜，但是掌握了最基礎的知識，將來出現問題時，就能更快的找到問題的原因。

對于新手而言，原型鏈和作用域鏈經常搞混，this和靜態作用域不知道在場景中怎么使用，確實是很頭疼的問題，但這也許就是js的魅力所在吧。有時間的話再寫一下作用域的知識~

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

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

相關文章

  • 【JS基礎】原型對象的那些事（一）

    摘要：通過同一個構造函數實例化的多個實例對象具有同一個原型對象。所以當給原型對象賦值一個新對象時，切記將原型對象的指回原構造函數以上就是本次分享的內容，關于原型對象的其他知識，下一篇基礎原型對象的那些事二會講到。 談起js的基礎，繞不過去的坎就是：原型鏈、作用域鏈、this（em...好吧，還有閉包），今天總結一下關于原型對象的一些知識，供自己和大家復習。 概念理解 什么是原型對象呢？有以下...

    edgardeng 評論0 收藏0

  • JavaScript面向對象那些事

    摘要：委托上面的代碼結合了構造函數和原型兩種方式去創建對象，首先聊聊構造函數構造函數構造函數本質上還是函數，只不過為了區分將其首字母大寫了而已。注意注釋掉的代碼是自動執行的，但這并不是構造函數獨有的，每個函數在聲明時都會自動生成。 首先看看下面兩個1+1=2的問題: 問題一：為什么改變length的值，數組的內容會變化？ var arr = [1]; arr.length = 3; aler...

    王偉廷 評論0 收藏0

  • 繼承的那些事

    摘要：借用構造函數繼承針對上面的繼承方法的缺點，開發人員使用一種叫做借用構造函數的技術，也就是我們平時說的跟繼承。 繼承是 OO 語言中一個最為津津樂道的概念，許多 OO 語言都支持兩種繼承方式：接口繼承和實現繼承。接口繼承只繼承方法簽名，而實現繼承則繼承實際的方法。由于函數沒有簽名，在 ECMAScript 中無法實現接口繼承。ECMAScript 只支持實現繼承而且實現繼承主要是依靠原型...

    CoyPan 評論0 收藏0

  • 嘮叨一下js對象與哈希表那些事

    摘要：的擴展知識對于哈希表來說，最重要的莫過于生成哈希串的哈希算法和處理沖突的策略了。由于鏈表的查找需要遍歷，如果我們將鏈表換成樹或者哈希表結構，那么就能大幅提高沖突元素的查找效率。 最近在整理數據結構和算法相關的知識，小茄專門在github上開了個repo https://github.com/qieguo2016...，后續內容也會更新到這里，歡迎圍觀加星星！ js對象 js中的對象是基...

    Nosee 評論0 收藏0

  • js面向對象淺析--繼承那些事

    摘要：有需要還可以修改指向謙龍寄生組合式繼承思路是通過借用構造函數來繼承屬性，通過原型鏈的混合形式來繼承方法改變執行環境實現繼承有需要還可以修改指向謙龍謙龍拷貝繼承該方法思路是將另外一個對象的屬性和方法拷貝至另一個對象使用遞歸 前言 js中實現繼承的方式只支持實現繼承，即繼承實際的方法，而實現繼承主要是依靠原型鏈來完成的。 原型鏈式繼承 該方式實現的本質是重寫原型對象，代之以一個新類型的實例...

    molyzzx 評論0 收藏0

發表評論

0條評論

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