JS關(guān)于高頻題 原型與原型鏈的面試?針對(duì)這個(gè)問題,這篇文章詳細(xì)介紹了相對(duì)應(yīng)的分析和解答,希望可以幫助更多想解決這個(gè)問題的小伙伴找到更簡(jiǎn)單易行的方法。
網(wǎng)站建設(shè)公司,為您提供網(wǎng)站建設(shè),網(wǎng)站制作,網(wǎng)頁(yè)設(shè)計(jì)及定制網(wǎng)站建設(shè)服務(wù),專注于企業(yè)網(wǎng)站設(shè)計(jì),高端網(wǎng)頁(yè)制作,對(duì)成都輕質(zhì)隔墻板等多個(gè)行業(yè)擁有豐富的網(wǎng)站建設(shè)經(jīng)驗(yàn)的網(wǎng)站建設(shè)公司。專業(yè)網(wǎng)站設(shè)計(jì),網(wǎng)站優(yōu)化推廣哪家好,專業(yè)成都網(wǎng)站營(yíng)銷優(yōu)化,H5建站,響應(yīng)式網(wǎng)站。
國(guó)際慣例,讓我們先拋出問題:
或許你已經(jīng)有答案,或許你開始有點(diǎn)疑惑,無(wú)論是 get
新技能或是簡(jiǎn)單的溫習(xí)一次,讓我們一起去探究一番吧
如果文章中有出現(xiàn)紕漏、錯(cuò)誤之處,還請(qǐng)看到的小伙伴多多指教,先行謝過
JavaScript
是基于原型的我們創(chuàng)建的每個(gè)函數(shù)都有一個(gè)
prototype(原型)
屬性,這個(gè)屬性是一個(gè)指針,指向一個(gè)對(duì)象,而這個(gè)對(duì)象的用途是包含可以由特定類型的所有實(shí)例共享的屬性和方法。
簡(jiǎn)單來(lái)說(shuō),就是當(dāng)我們創(chuàng)建一個(gè)函數(shù)的時(shí)候,系統(tǒng)就會(huì)自動(dòng)分配一個(gè) prototype
屬性,可以用來(lái)存儲(chǔ)可以讓所有實(shí)例共享的屬性和方法
用一張圖來(lái)表示就更加清晰了:
圖解:
prototype
屬性,這個(gè)屬性指向一個(gè)對(duì)象,也就是原型對(duì)象constructor
屬性,指向指向它的那個(gè)構(gòu)造函數(shù)__proto__
,指向它的原型對(duì)象function Person(){} var p = new Person(); p.__proto__ === Person.prototype // true Person.prototype.constructor === Person // true
那么,原型對(duì)象都有哪些特點(diǎn)呢
function Person(){} Person.prototype.name = 'tt'; Person.prototype.age = 18; Person.prototype.sayHi = function() { alert('Hi'); } var person1 = new Person(); var person2 = new Person(); person1.name = 'oo'; person1.name // oo person1.age // 18 perosn1.sayHi() // Hi person2.age // 18 person2.sayHi() // Hi
從這段代碼我們不難看出:
既然原型也是對(duì)象,那我們可不可以重寫這個(gè)對(duì)象呢?答案是肯定的
function Person() {} Person.prototype = { name: 'tt', age: 18, sayHi() { console.log('Hi'); } } var p = new Person()
只是當(dāng)我們?cè)谥貙懺玩湹臅r(shí)候需要注意以下的問題:
function Person(){} var p = new Person(); Person.prototype = { name: 'tt', age: 18 } Person.prototype.constructor === Person // false p.name // undefined
一圖勝過千言萬(wàn)語(yǔ)
constructor
屬性指向 Object
,導(dǎo)致原型鏈關(guān)系混亂,所以我們應(yīng)該在重寫原型對(duì)象的時(shí)候指定 constructor
( instanceof
仍然會(huì)返回正確的值)Person.prototype = { constructor: Person }
注意:以這種方式重設(shè) constructor
屬性會(huì)導(dǎo)致它的 Enumerable
特性被設(shè)置成 true
(默認(rèn)為false
)
既然現(xiàn)在我們知道了什么是 prototype(原型)
以及它的特點(diǎn),那么原型鏈又是什么呢?
JavaScript
中所有的對(duì)象都是由它的原型對(duì)象繼承而來(lái)。而原型對(duì)象自身也是一個(gè)對(duì)象,它也有自己的原型對(duì)象,這樣層層上溯,就形成了一個(gè)類似鏈表的結(jié)構(gòu),這就是原型鏈
同樣的,我們使用一張圖來(lái)描述
Object
函數(shù)的 prototype
屬性Objec.prototype
指向的原型對(duì)象同樣擁有原型,不過它的原型是 null
,而 null
則沒有原型清楚了原型鏈的概念,我們就能更清楚地知道屬性的查找規(guī)則,比如前面的 p
實(shí)例屬性.如果自身和原型鏈上都不存在這個(gè)屬性,那么屬性最終的值就是 undefined
,如果是方法就會(huì)拋出錯(cuò)誤
ES6
提供了Class(類)
這個(gè)概念,作為對(duì)象的模板,通過class
關(guān)鍵字,可以定義類
為什么會(huì)提到 class
:
ES6
的 class
可以看作只是一個(gè)語(yǔ)法糖,它的絕大部分功能,ES5
都可以做到,新的 class
寫法只是讓對(duì)象原型的寫法更加清晰、更像面向?qū)ο缶幊痰恼Z(yǔ)法而已
class Point { constructor(x, y) { this.x = x; this.y = y; } toString() { return '(' + this.x + ', ' + this.y + ')'; } } // 可以這么改寫 function Point(x, y) { this.x = x; this.y = y; } Point.prototype.toString = function () { return '(' + this.x + ', ' + this.y + ')'; };
class
里面定義的方法,其實(shí)都是定義在構(gòu)造函數(shù)的原型上面實(shí)現(xiàn)實(shí)例共享,屬性定義在構(gòu)造函數(shù)中,所以 ES6
中的類完全可以看作構(gòu)造函數(shù)的另一種寫法
除去 class
類中的一些行為可能與 ES5
存在一些不同,本質(zhì)上都是通過原型、原型鏈去定義方法、實(shí)現(xiàn)共享。所以,還是文章開始那句話 JavaScript是基于原型的
更多 class
問題,參考這里
instanceof
最常用的確定原型指向關(guān)系的關(guān)鍵字,檢測(cè)的是原型,但是只能用來(lái)判斷兩個(gè)對(duì)象是否屬于實(shí)例關(guān)系, 而不能判斷一個(gè)對(duì)象實(shí)例具體屬于哪種類型
function Person(){} var p = new Person(); p instanceof Person // true p instanceof Object // true
hasOwnProperty
通過使用 hasOwnProperty
可以確定訪問的屬性是來(lái)自于實(shí)例還是原型對(duì)象
function Person() {} Person.prototype = { name: 'tt' } var p = new Person(); p.age = 15; p.hasOwnProperty('age') // true p.hasOwnProperty('name') // false
由于原型鏈的存在,我們可以讓很多實(shí)例去共享原型上面的方法和屬性,方便了我們的很多操作。但是原型鏈并非是十分完美的
function Person(){} Person.prototype.arr = [1, 2, 3, 4]; var person1 = new Person(); var person2 = new Person(); person1.arr.push(5) person2.arr // [1, 2, 3, 4, 5]
引用類型,變量保存的就是一個(gè)內(nèi)存中的一個(gè)指針。所以,當(dāng)原型上面的屬性是一個(gè)引用類型的值時(shí),我們通過其中某一個(gè)實(shí)例對(duì)原型屬性的更改,結(jié)果會(huì)反映在所有實(shí)例上面,這也是原型 共享
屬性造成的最大問題
另一個(gè)問題就是我們?cè)趧?chuàng)建子類型(比如上面的 p
)時(shí),沒有辦法向超類型( Person
)的構(gòu)造函數(shù)中傳遞參數(shù)
關(guān)于JS關(guān)于高頻題 原型與原型鏈的面試問題的解答就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,如果你還有很多疑惑沒有解開,可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道了解更多相關(guān)知識(shí)。
分享標(biāo)題:JS關(guān)于高頻題原型與原型鏈的面試
網(wǎng)站路徑:http://www.muchs.cn/article32/geeesc.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供全網(wǎng)營(yíng)銷推廣、電子商務(wù)、商城網(wǎng)站、響應(yīng)式網(wǎng)站、企業(yè)建站、網(wǎng)站策劃
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)