摘要:不過,從編程習(xí)慣上,我們應(yīng)該盡量讓對象的指向其構(gòu)造函數(shù),以維持這個慣例總結(jié)原型和原型鏈是實現(xiàn)繼承的一種模型原型鏈是靠形成的,它在其中的作用屬于連接的線
原型鏈概念
每個構(gòu)造函數(shù)內(nèi)部都會有一個(constructor,prototype原型對象),而且都會有一個內(nèi)置樹形__proto__屬性用于指向創(chuàng)建它函數(shù)對象的prototype原型,當然原型對象也會有__proto__屬性,源源不斷的指向關(guān)聯(lián),就形成了一個圓環(huán),形成了原型鏈原型prototype對象
函數(shù)對象
function f() { } console.log(f.prototype)
我們創(chuàng)建了一個函數(shù)f,通過打印它的原型對象,我們會得到一個對象,里面包含一個constructor指向自己本身的指針,還有一個內(nèi)置__proto__屬性
console.log(f.prototype.__proto__)
那我們再看看它的內(nèi)置屬性指向了哪里,我們可以很清楚的看到constructor指向了Object,而它還內(nèi)置了toString()和valueOf()方法,這到了哪里已經(jīng)不用我多說了吧
console.log(f.prototype.__proto__.__proto__)
那我們再繼續(xù)尋找往下找呢,我們會得到null,此可以得出結(jié)論,請看下面圖解
普通對象
let obj = {} console.log(obj.prototype) // undefined
當然普通對象是沒有原型對象的
作用原型鏈就是為了實現(xiàn)繼承
例子
function Father() { this.name = "aaa" } Father.prototype.f1 = function () { alert(this.name) } // 子函數(shù) 繼承父 function Son(name) { Father.call(this, name) } // 我認為繼承父 Son.prototype = Object.create(Father.prototype) // minix 繼承多種 Object.assign(1,2,3) Son.prototype.constructer = Son //構(gòu)造器指向 // 重寫父方法,改變數(shù)據(jù)變化,并且不會覆蓋父方法,這里稱為多態(tài) Son.prototype.f1 = function () { console.log(this.name) } var S1 = new Son() S1.f1() // 調(diào)用 aaa
檢查原型和實例的關(guān)系
第一種使用 instanceof 操作符 console.log(S1 instanceof Object)//true console.log(S1 instanceof Father)//true console.log(S1 instanceof Son)//true 上面檢測S1這個實例是否屬于Object,F(xiàn)ather,Son,結(jié)果都返回了true,有些小伙伴會疑問為什么我new的是Son,它還會屬于Father,因為Son.prototype = Object.create(Father.prototype)這段代碼已經(jīng)將父的原型給了子了,并且又constructer指向了子函數(shù),這相當于已經(jīng)繼承成功 第二種使用isPrototypeOf 作用:檢測一個對象是否是另一個對象的原型?;蛘哒f一個對象是否被包含在另一個對象的原型鏈中 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
每個函數(shù)聲明之后都會生成一個函數(shù)對象,這正如我們說的那樣函數(shù)的__proto__是指向它自己的原型的
Function.prototype.__proto__ === Object.prototype
函數(shù)原型再向上查找是什么,它們直接通過什么連接,當然是__proto__,它指向的則是Object.prototype
Object.prototype.__proto__ === null
然后再去查找Object.prototype,它會等于null,因為已經(jīng)到達最底層了,這個記住就好
constructor屬性constructor屬性不影響任何JavaScript的內(nèi)部屬性。 instanceof檢測對象的原型鏈,通常你是無法修改的 constructor其實沒有什么用處,只是JavaScript語言設(shè)計的歷史遺留物。 由于constructor屬性是可以變更的,所以未必真的指向?qū)ο蟮臉?gòu)造函數(shù), 只是一個提示。不過,從編程習(xí)慣上,我們應(yīng)該盡量讓對象的constructor指向其構(gòu)造函數(shù),以維持這個慣例
總結(jié)
原型和原型鏈是JS實現(xiàn)繼承的一種模型
原型鏈是靠__proto__ 形成的,它在其中的作用屬于連接的線
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/102899.html
摘要:不理解沒關(guān)系,下面會結(jié)合圖例分析上一篇高級程序設(shè)計筆記創(chuàng)建對象下一篇高級程序設(shè)計筆記繼承參考之原型鏈的解讀三張圖搞懂的原型對象與原型鏈繼承與原型鏈 文章直接從原型圖解開始的,如果對一些概念不太清除,可以結(jié)合后面幾節(jié)查看 1. 圖解原型鏈 1.1 鐵三角關(guān)系(重點) function Person() {}; var p = new Person(); showImg(https://s...
摘要:之前有朋友問怎么去理解原型和原型鏈的問題。理解原型鏈的小技巧將箭頭視作泛化子類到父類關(guān)系那么圖中所有的虛線將構(gòu)成一個繼承層級,而實線表示屬性引用。原型鏈是實現(xiàn)繼承的重要方式,原型鏈的形成是真正是靠而非。 之前有朋友問怎么去理解原型和原型鏈的問題。這個問題,在面試中,很多同學(xué)經(jīng)常都會遇到。這里給大家講講,方便大家記憶。 JavaScript的特點JavaScript是一門直譯式腳本...
摘要:之前有朋友問怎么去理解原型和原型鏈的問題。理解原型鏈的小技巧將箭頭視作泛化子類到父類關(guān)系那么圖中所有的虛線將構(gòu)成一個繼承層級,而實線表示屬性引用。原型鏈是實現(xiàn)繼承的重要方式,原型鏈的形成是真正是靠而非。 之前有朋友問怎么去理解原型和原型鏈的問題。這個問題,在面試中,很多同學(xué)經(jīng)常都會遇到。這里給大家講講,方便大家記憶。 JavaScript的特點JavaScript是一門直譯式腳本...
摘要:探索是如何判斷的表達式如果函數(shù)的顯式原型對象在對象的隱式原型鏈上,返回,否則返回是通過自己產(chǎn)生的實例案例案例重要注意的顯示原型和隱式原型是一樣的。面試題測試題測試題報錯對照下圖理解 原型與原型鏈深入理解(圖解) 原型(prototype) 函數(shù)的 prototype 屬性(圖) 每個函數(shù)都有一個prototype屬性,它默認指向一個Object空對象(即稱為:原型對象) 原型對象中有...
摘要:原型鏈和對象的原型是對象實例和它的構(gòu)造函數(shù)之間建立的鏈接,它的值是構(gòu)造函數(shù)的。對象的原型根據(jù)上文提到的構(gòu)造調(diào)用函數(shù)的時候會創(chuàng)建一個新對象,自動將的原型指向構(gòu)造函數(shù)的對象。 showImg(https://segmentfault.com/img/remote/1460000020185197); JS的原型、原型鏈一直是比較難理解的內(nèi)容,不少初學(xué)者甚至有一定經(jīng)驗的老鳥都不一定能完全說清...
摘要:因為這造成了繼承鏈的紊亂,因為的實例是由構(gòu)造函數(shù)創(chuàng)建的,現(xiàn)在其屬性卻指向了為了避免這一現(xiàn)象,就必須在替換對象之后,為新的對象加上屬性,使其指向原來的構(gòu)造函數(shù)。這個函數(shù)接收兩個參數(shù)子類型構(gòu)造函數(shù)和超類型構(gòu)造函數(shù)。 最近一直在研究js面向?qū)ο?,原型鏈繼承是一個難點,下面是我對繼承的理解以下文章借鑒自CSDN季詩筱的博客 原型鏈繼承的基本概念: ES中描述了原型鏈的概念,并將原型鏈作為實現(xiàn)...
閱讀 687·2021-09-30 09:47
閱讀 2876·2021-09-04 16:40
閱讀 864·2019-08-30 13:18
閱讀 3457·2019-08-29 16:22
閱讀 1563·2019-08-29 12:36
閱讀 593·2019-08-29 11:11
閱讀 1483·2019-08-26 13:47
閱讀 1134·2019-08-26 13:32