資訊專欄INFORMATION COLUMN
摘要：事后整理當(dāng)時(shí)的思路如下簡(jiǎn)約版第一步是對(duì)象，對(duì)象都有原型也叫原型指針，指向構(gòu)造函數(shù)的原型對(duì)象。第二步是構(gòu)造函數(shù)，構(gòu)造函數(shù)也是函數(shù)，函數(shù)除了有原型對(duì)象外，也有原型指針。第四步作為中的內(nèi)建構(gòu)造函數(shù)，同樣擁有原型指針和原型對(duì)象。
前段時(shí)間求職過程中，經(jīng)常會(huì)被問到關(guān)于原型和原型鏈，就問題本身而言并不難，主要是考察對(duì)JavaScript基本概念的理解，但如何能夠說明白確實(shí)需要認(rèn)真準(zhǔn)備下。
我印象比較深刻的一次，有個(gè)面試官出了一道面試題，大意如下：
function Person(name) {
this.name = name;
}
let person = new Person("yuyongyu");
請(qǐng)講講person和Object的關(guān)系，形式不限。
我當(dāng)時(shí)下意識(shí)地脫口而出：Object在person的原型鏈上。當(dāng)時(shí)從面試官?gòu)?fù)雜的表情可以推斷出這不是他真正想要的答案，但我也基本可以斷定他真實(shí)的意圖就是想考察下對(duì)原型鏈的掌握，而且期望看到原型鏈的全貌。掌握了出題人的意圖，那接下來就好辦了。
事后整理當(dāng)時(shí)的思路如下：
簡(jiǎn)約版person是對(duì)象，對(duì)象都有原型（也叫原型指針），指向構(gòu)造函數(shù)的原型對(duì)象。
此處即person的__proto__屬性指向Person的prototype。
注：__proto__最初是一個(gè)非標(biāo)準(zhǔn)屬性，ES6已將其標(biāo)準(zhǔn)化，可以用標(biāo)準(zhǔn)方法Object.getPrototypeOf()替代，本文出于舉例的直觀性考慮，仍采用此屬性。
Person是構(gòu)造函數(shù)，構(gòu)造函數(shù)也是函數(shù)，函數(shù)除了有原型對(duì)象外，也有原型指針。
函數(shù)都是由Function構(gòu)造出來的，故函數(shù)的原型指針指向Function的原型對(duì)象。
此處即Person的__proto__屬性指向Function的prototype。
Function是內(nèi)建構(gòu)造函數(shù)，內(nèi)建構(gòu)造函數(shù)也還是函數(shù)，除了有原型對(duì)象外，也有原型指針。
函數(shù)都是由Function構(gòu)造出來的，F(xiàn)unction作為函數(shù)，是由其自身構(gòu)建出來，故Function的原型指針指向其自身的原型對(duì)象。
此處即Function的__proto__屬性指向Function的prototype。
Function的原型對(duì)象，其本身也是對(duì)象，故其原型指針指向Object的原型對(duì)象
此處即Function.prototype的__proto__屬性指向Object的prototype。
為更加直觀表示，作示意圖如下：
以上為推導(dǎo)過程，必須代碼驗(yàn)證，結(jié)果如下（node環(huán)境，ES6版）：
function Person(name) {
this.name = name;
}
let person = new Person("yuyongyu");
//第一步驗(yàn)證
console.log(person.__proto__ === Person.prototype); // true
//第二步驗(yàn)證
console.log(Person.__proto__ === Function.prototype); // true
//第三步驗(yàn)證
console.log(Function.__proto__ === Function.prototype); // true
//第四步驗(yàn)證
console.log(Function.prototype.__proto__ === Object.prototype); // true
至此基本達(dá)到了面試官的要求，但事后思考，整個(gè)過程過于簡(jiǎn)略，還可以進(jìn)一步擴(kuò)展，豐富整個(gè)過程。事后擴(kuò)展思路如下：
豪華版同上。
Person的原型對(duì)象也是對(duì)象，同樣擁有構(gòu)造器屬性：constructor和原型指針。
函數(shù)的原型對(duì)象的構(gòu)造器屬性指向自身。
函數(shù)的原型對(duì)象的原型指針指向Object的原型對(duì)象
此處即Person.prototype的constructor屬性指向Person;Person.prototype的__proto__屬性指向Object的prototype。
Function的原型對(duì)象和Person的原型對(duì)象一樣，不再贅述。
此處即Function.prototype的constructor屬性指向Function;Function.prototype的__proto__屬性指向Object的prototype。
Object作為JavaScript中的內(nèi)建構(gòu)造函數(shù)，同樣擁有原型指針和原型對(duì)象。
Object既然是函數(shù)，故其原型指針指向Function的原型對(duì)象。
Object的原型對(duì)象同樣包含構(gòu)造器屬性：constructor和原型指針。
Object的原型對(duì)象的構(gòu)造器屬性指向自身。
Object的原型對(duì)象的原型指針指向null。
此處即Object的__proto__屬性指向Function的prototype;Object.prototype的constructor屬性指向Object;Object.prototype的__proto__屬性指向null.
示意圖如下（虛線僅代表不交叉，無(wú)特殊含義）：
代碼驗(yàn)證結(jié)果如下：
function Person(name) {
this.name = name;
}
let person = new Person("yuyongyu");
//第一步驗(yàn)證
console.log(person.__proto__ === Person.prototype); // true
console.log(person.constructor === Person); // true
//第二步驗(yàn)證
console.log(Person.__proto__ === Function.prototype); // true
console.log(Person.prototype.constructor === Person); // true
console.log(Person.prototype.__proto__ === Object.prototype);// true
//第三步驗(yàn)證
console.log(Function.__proto__ === Function.prototype); // true
console.log(Function.prototype.constructor === Function);
console.log(Function.prototype.__proto__ === Object.prototype);
//第四步驗(yàn)證
console.log(Object.__proto__ === Function.prototype); // true
console.log(Object.prototype.constructor === Object); // true
console.log(Object.prototype.__proto__ === null); // true
點(diǎn)睛之筆
注意到上圖中那個(gè)紅色的null了嗎？
JavaScript處處皆對(duì)象，而原型鏈的盡頭竟然是null，不由到想到一句佛語(yǔ)：萬(wàn)物皆空。
如果從反向來看，是null衍生出了豐富多彩的JavaScript世界，不由得又想到了一句道語(yǔ)：一生二，二生三，三生萬(wàn)物
另外，由上圖可知Object.__proto__ === Function.prototype，F(xiàn)unction.prototype.__proto__ === Object.prototype，即Object作為內(nèi)建函數(shù)由Function構(gòu)造出來，F(xiàn)unction作為內(nèi)建構(gòu)造函數(shù)又是對(duì)象（函數(shù)都是對(duì)象），這似乎又進(jìn)入了“雞生蛋和蛋生雞”的哲學(xué)范疇。
由此可見JavaScript的設(shè)計(jì)思想可謂博大精深，不免感慨JavaScript的學(xué)習(xí)任重道遠(yuǎn)。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/96151.html
摘要：以上是面試中筆試涉及到的知識(shí)點(diǎn)或者后面被問到的只是點(diǎn)。也許是根據(jù)薪資和面試的等級(jí)來出題的。我剛面試完回家，吃了一個(gè)泡面，回憶下面試題。同時(shí)作為傳遞到構(gòu)造函數(shù)，執(zhí)行了一次讓構(gòu)造函數(shù)里面的屬性和方法賦值了一份給。 css 如何水平垂直居中，請(qǐng)盡量多說幾種方法？很尷尬，我多次面試都被問到這個(gè)問題，fuck 定位（回答了）、table-cell布局、flex布局、translate+relat...
摘要：以上是面試中筆試涉及到的知識(shí)點(diǎn)或者后面被問到的只是點(diǎn)。也許是根據(jù)薪資和面試的等級(jí)來出題的。我剛面試完回家，吃了一個(gè)泡面，回憶下面試題。同時(shí)作為傳遞到構(gòu)造函數(shù)，執(zhí)行了一次讓構(gòu)造函數(shù)里面的屬性和方法賦值了一份給。 css 如何水平垂直居中，請(qǐng)盡量多說幾種方法？很尷尬，我多次面試都被問到這個(gè)問題，fuck 定位（回答了）、table-cell布局、flex布局、translate+relat...
摘要：函數(shù)式編程前端掘金引言面向?qū)ο缶幊桃恢币詠矶际侵械闹鲗?dǎo)范式。函數(shù)式編程是一種強(qiáng)調(diào)減少對(duì)程序外部狀態(tài)產(chǎn)生改變的方式。 JavaScript 函數(shù)式編程 - 前端 - 掘金引言 面向?qū)ο缶幊桃恢币詠矶际荍avaScript中的主導(dǎo)范式。JavaScript作為一門多范式編程語(yǔ)言，然而，近幾年，函數(shù)式編程越來越多得受到開發(fā)者的青睞。函數(shù)式編程是一種強(qiáng)調(diào)減少對(duì)程序外部狀態(tài)產(chǎn)生改變的方式。因此，...
摘要：手寫深拷貝這個(gè)問題也是被問到了不止一遍，就連美團(tuán)也問到了。個(gè)人能力有限，沒能挺到美團(tuán)的最后一輪面試，不過面試的幾家公司也是涉及到了各行各業(yè)，這篇文章只是對(duì)即將面試的前端小伙伴們一個(gè)參考，最后效果還是要看個(gè)人努力的。 最近想著去市場(chǎng)中試試水，看看自己的幾斤幾兩。哈哈，然后大概遇到了這么幾類問題吧。寫出來和大家分享一下。 原生類 1.原型及原型鏈的問題 這個(gè)問題面試的公司都有問。其實(shí)這...
摘要：運(yùn)算符用來判斷一個(gè)構(gòu)造函數(shù)的屬性所指向的對(duì)象是否存在另外一個(gè)要檢測(cè)對(duì)象的原型鏈上。所以大多數(shù)時(shí)候它返回的都是一個(gè)對(duì)象的構(gòu)造函數(shù)。想到了構(gòu)造函數(shù)可能不一樣，但說怎么判斷就有點(diǎn)想不出詞了，就持續(xù)懵逼中這篇內(nèi)容參考了高級(jí)程序設(shè)計(jì)和一篇文章 一個(gè)經(jīng)典的面試題 怎么去區(qū)分一個(gè)變量是一個(gè)數(shù)組還是一個(gè)對(duì)象呢？ typeof 看到這個(gè)題目，可能首先就會(huì)typeof,typeof是最基本的數(shù)據(jù)類型判斷方...
閱讀 2661·2021-09-23 11:21
閱讀 1923·2021-09-22 15:15
閱讀 1014·2021-09-10 11:27
閱讀 3470·2019-08-30 15:54
閱讀 690·2019-08-30 15:52
閱讀 1364·2019-08-30 15:44
閱讀 2379·2019-08-29 15:06
閱讀 3007·2019-08-28 18:21
