原型鏈

gaomysion 發布于2019-08-23 16:19 / 1335人閱讀

摘要：不過，從編程習慣上，我們應該盡量讓對象的指向其構造函數，以維持這個慣例總結原型和原型鏈是實現繼承的一種模型原型鏈是靠形成的，它在其中的作用屬于連接的線

原型鏈概念

每個構造函數內部都會有一個（constructor，prototype原型對象），而且都會有一個內置樹形__proto__屬性用于指向創建它函數對象的prototype原型，當然原型對象也會有__proto__屬性，源源不斷的指向關聯，就形成了一個圓環，形成了原型鏈

原型prototype對象

函數對象

function f() {
}
console.log(f.prototype)

我們創建了一個函數f，通過打印它的原型對象，我們會得到一個對象，里面包含一個constructor指向自己本身的指針，還有一個內置__proto__屬性

console.log(f.prototype.__proto__)

那我們再看看它的內置屬性指向了哪里，我們可以很清楚的看到constructor指向了Object，而它還內置了toString()和valueOf()方法，這到了哪里已經不用我多說了吧

console.log(f.prototype.__proto__.__proto__)

那我們再繼續尋找往下找呢，我們會得到null，此可以得出結論，請看下面圖解

普通對象

let obj = {}
console.log(obj.prototype) // undefined

當然普通對象是沒有原型對象的

作用

原型鏈就是為了實現繼承

例子

function Father() {
    this.name = "aaa"
}

Father.prototype.f1 = function () {
    alert(this.name)
}

// 子函數 繼承父
function Son(name) {
    Father.call(this, name)
}

// 我認為繼承父
Son.prototype = Object.create(Father.prototype)

// minix 繼承多種 Object.assign(1,2,3)
Son.prototype.constructer = Son   //構造器指向

// 重寫父方法，改變數據變化，并且不會覆蓋父方法，這里稱為多態
Son.prototype.f1 = function () {
    console.log(this.name)
}

var S1 = new Son()
S1.f1() // 調用 aaa

檢查原型和實例的關系

第一種使用 instanceof 操作符
    console.log(S1 instanceof Object)//true
    console.log(S1 instanceof Father)//true
    console.log(S1 instanceof Son)//true
    
上面檢測S1這個實例是否屬于Object，Father，Son，結果都返回了true，有些小伙伴會疑問為什么我new的是Son，它還會屬于Father，因為Son.prototype = Object.create(Father.prototype)這段代碼已經將父的原型給了子了，并且又constructer指向了子函數，這相當于已經繼承成功




第二種使用isPrototypeOf

作用：檢測一個對象是否是另一個對象的原型。或者說一個對象是否被包含在另一個對象的原型鏈中

    console.log(Object.prototype.isPrototypeOf(S1))  //true
    console.log(Father.prototype.isPrototypeOf(S1))  //true
    console.log(Son.prototype.isPrototypeOf(S1))   //true

查找

Function.__proto__ === Function.prototype

每個函數聲明之后都會生成一個函數對象，這正如我們說的那樣函數的__proto__是指向它自己的原型的

Function.prototype.__proto__  === Object.prototype

函數原型再向上查找是什么，它們直接通過什么連接，當然是__proto__，它指向的則是Object.prototype

Object.prototype.__proto__  === null

然后再去查找Object.prototype，它會等于null，因為已經到達最底層了，這個記住就好

constructor屬性

constructor屬性不影響任何JavaScript的內部屬性。
instanceof檢測對象的原型鏈，通常你是無法修改的

constructor其實沒有什么用處，只是JavaScript語言設計的歷史遺留物。
由于constructor屬性是可以變更的，所以未必真的指向對象的構造函數，
只是一個提示。不過，從編程習慣上，我們應該盡量讓對象的constructor指向其構造函數，以維持這個慣例

總結
原型和原型鏈是JS實現繼承的一種模型
原型鏈是靠__proto__ 形成的，它在其中的作用屬于連接的線

GPU云服務器云服務器原型原型鏈原型鏈原型鏈繼承原型鏈圖

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

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

《javascript高級程序設計》筆記：原型圖解

摘要：不理解沒關系，下面會結合圖例分析上一篇高級程序設計筆記創建對象下一篇高級程序設計筆記繼承參考之原型鏈的解讀三張圖搞懂的原型對象與原型鏈繼承與原型鏈文章直接從原型圖解開始的，如果對一些概念不太清除，可以結合后面幾節查看 1. 圖解原型鏈 1.1 鐵三角關系（重點） function Person() {}; var p = new Person(); showImg(https://s...

vspiders 2019-08-21 17:29 評論0 收藏0
如何理解JavaScript的原型和原型鏈？

摘要：之前有朋友問怎么去理解原型和原型鏈的問題。理解原型鏈的小技巧將箭頭視作泛化子類到父類關系那么圖中所有的虛線將構成一個繼承層級，而實線表示屬性引用。原型鏈是實現繼承的重要方式，原型鏈的形成是真正是靠而非。之前有朋友問怎么去理解原型和原型鏈的問題。這個問題，在面試中，很多同學經常都會遇到。這里給大家講講，方便大家記憶。 JavaScript的特點JavaScript是一門直譯式腳本...

xuexiangjys 2019-08-02 16:12 評論0 收藏0
如何理解JavaScript的原型和原型鏈？

摘要：之前有朋友問怎么去理解原型和原型鏈的問題。理解原型鏈的小技巧將箭頭視作泛化子類到父類關系那么圖中所有的虛線將構成一個繼承層級，而實線表示屬性引用。原型鏈是實現繼承的重要方式，原型鏈的形成是真正是靠而非。之前有朋友問怎么去理解原型和原型鏈的問題。這個問題，在面試中，很多同學經常都會遇到。這里給大家講講，方便大家記憶。 JavaScript的特點JavaScript是一門直譯式腳本...

adie 2019-08-23 16:54 評論0 收藏0
【5】JavaScript 函數高級——原型與原型鏈深入理解（圖解）

摘要：探索是如何判斷的表達式如果函數的顯式原型對象在對象的隱式原型鏈上，返回，否則返回是通過自己產生的實例案例案例重要注意的顯示原型和隱式原型是一樣的。面試題測試題測試題報錯對照下圖理解原型與原型鏈深入理解（圖解）原型（prototype）函數的 prototype 屬性（圖）每個函數都有一個prototype屬性，它默認指向一個Object空對象（即稱為：原型對象）原型對象中有...

馬龍駒 2019-08-23 17:17 評論0 收藏0
JS基礎-原型、原型鏈真的不能一知半解

摘要：原型鏈和對象的原型是對象實例和它的構造函數之間建立的鏈接，它的值是構造函數的。對象的原型根據上文提到的構造調用函數的時候會創建一個新對象，自動將的原型指向構造函數的對象。 showImg(https://segmentfault.com/img/remote/1460000020185197); JS的原型、原型鏈一直是比較難理解的內容，不少初學者甚至有一定經驗的老鳥都不一定能完全說清...

changfeng1050 2019-08-26 11:00 評論0 收藏0
JavaScript面向對象---原型鏈繼承

摘要：因為這造成了繼承鏈的紊亂，因為的實例是由構造函數創建的，現在其屬性卻指向了為了避免這一現象，就必須在替換對象之后，為新的對象加上屬性，使其指向原來的構造函數。這個函數接收兩個參數子類型構造函數和超類型構造函數。最近一直在研究js面向對象，原型鏈繼承是一個難點，下面是我對繼承的理解以下文章借鑒自CSDN季詩筱的博客原型鏈繼承的基本概念： ES中描述了原型鏈的概念，并將原型鏈作為實現...

vspiders 2019-08-20 13:33 評論0 收藏0