成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

如果再被問到原型和原型鏈......

muzhuyu / 2844人閱讀

摘要：事后整理當(dāng)時的思路如下簡約版第一步是對象，對象都有原型也叫原型指針，指向構(gòu)造函數(shù)的原型對象。第二步是構(gòu)造函數(shù)，構(gòu)造函數(shù)也是函數(shù)，函數(shù)除了有原型對象外，也有原型指針。第四步作為中的內(nèi)建構(gòu)造函數(shù)，同樣擁有原型指針和原型對象。

前段時間求職過程中，經(jīng)常會被問到關(guān)于原型和原型鏈，就問題本身而言并不難，主要是考察對JavaScript基本概念的理解，但如何能夠說明白確實(shí)需要認(rèn)真準(zhǔn)備下。

我印象比較深刻的一次，有個面試官出了一道面試題，大意如下：

function Person(name) {
    this.name = name;
}

let person = new Person("yuyongyu");

請講講person和Object的關(guān)系，形式不限。

我當(dāng)時下意識地脫口而出：Object在person的原型鏈上。當(dāng)時從面試官復(fù)雜的表情可以推斷出這不是他真正想要的答案，但我也基本可以斷定他真實(shí)的意圖就是想考察下對原型鏈的掌握，而且期望看到原型鏈的全貌。掌握了出題人的意圖，那接下來就好辦了。

事后整理當(dāng)時的思路如下：

簡約版
第一步：

person是對象，對象都有原型（也叫原型指針），指向構(gòu)造函數(shù)的原型對象。

此處即person的__proto__屬性指向Person的prototype。

注：__proto__最初是一個非標(biāo)準(zhǔn)屬性，ES6已將其標(biāo)準(zhǔn)化，可以用標(biāo)準(zhǔn)方法Object.getPrototypeOf()替代，本文出于舉例的直觀性考慮，仍采用此屬性。

第二步：

Person是構(gòu)造函數(shù)，構(gòu)造函數(shù)也是函數(shù)，函數(shù)除了有原型對象外，也有原型指針。

函數(shù)都是由Function構(gòu)造出來的，故函數(shù)的原型指針指向Function的原型對象。

此處即Person的__proto__屬性指向Function的prototype。

第三步：

Function是內(nèi)建構(gòu)造函數(shù)，內(nèi)建構(gòu)造函數(shù)也還是函數(shù)，除了有原型對象外，也有原型指針。

函數(shù)都是由Function構(gòu)造出來的，F(xiàn)unction作為函數(shù)，是由其自身構(gòu)建出來，故Function的原型指針指向其自身的原型對象。

此處即Function的__proto__屬性指向Function的prototype。

第四步：

Function的原型對象，其本身也是對象，故其原型指針指向Object的原型對象

此處即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á)到了面試官的要求，但事后思考，整個過程過于簡略，還可以進(jìn)一步擴(kuò)展，豐富整個過程。事后擴(kuò)展思路如下：

豪華版
第一步：

同上。

第二步：

Person的原型對象也是對象，同樣擁有構(gòu)造器屬性：constructor和原型指針。

函數(shù)的原型對象的構(gòu)造器屬性指向自身。

函數(shù)的原型對象的原型指針指向Object的原型對象

此處即Person.prototype的constructor屬性指向Person;Person.prototype的__proto__屬性指向Object的prototype。

第三步：

Function的原型對象和Person的原型對象一樣，不再贅述。

此處即Function.prototype的constructor屬性指向Function;Function.prototype的__proto__屬性指向Object的prototype。

第四步：

Object作為JavaScript中的內(nèi)建構(gòu)造函數(shù)，同樣擁有原型指針和原型對象。

Object既然是函數(shù)，故其原型指針指向Function的原型對象。

Object的原型對象同樣包含構(gòu)造器屬性：constructor和原型指針。

Object的原型對象的構(gòu)造器屬性指向自身。

Object的原型對象的原型指針指向null。

此處即Object的__proto__屬性指向Function的prototype;Object.prototype的constructor屬性指向Object;Object.prototype的__proto__屬性指向null.

示意圖如下（虛線僅代表不交叉，無特殊含義）：

代碼驗(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)睛之筆

注意到上圖中那個紅色的null了嗎？

JavaScript處處皆對象，而原型鏈的盡頭竟然是null，不由到想到一句佛語：萬物皆空。

如果從反向來看，是null衍生出了豐富多彩的JavaScript世界，不由得又想到了一句道語：一生二，二生三，三生萬物

另外，由上圖可知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ù)又是對象（函數(shù)都是對象），這似乎又進(jìn)入了“雞生蛋和蛋生雞”的哲學(xué)范疇。

由此可見JavaScript的設(shè)計(jì)思想可謂博大精深，不免感慨JavaScript的學(xué)習(xí)任重道遠(yuǎn)。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/96151.html

相關(guān)文章

  • 記錄一次杭州順網(wǎng)科技的面試過程

    摘要：以上是面試中筆試涉及到的知識點(diǎn)或者后面被問到的只是點(diǎn)。也許是根據(jù)薪資和面試的等級來出題的。我剛面試完回家，吃了一個泡面，回憶下面試題。同時作為傳遞到構(gòu)造函數(shù)，執(zhí)行了一次讓構(gòu)造函數(shù)里面的屬性和方法賦值了一份給。 css 如何水平垂直居中，請盡量多說幾種方法？很尷尬，我多次面試都被問到這個問題，fuck 定位（回答了）、table-cell布局、flex布局、translate+relat...

    shiguibiao 評論0 收藏0

  • 記錄一次杭州順網(wǎng)科技的面試過程

    摘要：以上是面試中筆試涉及到的知識點(diǎn)或者后面被問到的只是點(diǎn)。也許是根據(jù)薪資和面試的等級來出題的。我剛面試完回家，吃了一個泡面，回憶下面試題。同時作為傳遞到構(gòu)造函數(shù)，執(zhí)行了一次讓構(gòu)造函數(shù)里面的屬性和方法賦值了一份給。 css 如何水平垂直居中，請盡量多說幾種方法？很尷尬，我多次面試都被問到這個問題，fuck 定位（回答了）、table-cell布局、flex布局、translate+relat...

    caiyongji 評論0 收藏0

  • JavaScript系列（四） - 收藏集 - 掘金

    摘要：函數(shù)式編程前端掘金引言面向?qū)ο缶幊桃恢币詠矶际侵械闹鲗?dǎo)范式。函數(shù)式編程是一種強(qiáng)調(diào)減少對程序外部狀態(tài)產(chǎn)生改變的方式。 JavaScript 函數(shù)式編程 - 前端 - 掘金引言 面向?qū)ο缶幊桃恢币詠矶际荍avaScript中的主導(dǎo)范式。JavaScript作為一門多范式編程語言，然而，近幾年，函數(shù)式編程越來越多得受到開發(fā)者的青睞。函數(shù)式編程是一種強(qiáng)調(diào)減少對程序外部狀態(tài)產(chǎn)生改變的方式。因此，...

    cfanr 評論0 收藏0

  • 近期前端面試中經(jīng)常碰到的問題總結(jié)

    摘要：手寫深拷貝這個問題也是被問到了不止一遍，就連美團(tuán)也問到了。個人能力有限，沒能挺到美團(tuán)的最后一輪面試，不過面試的幾家公司也是涉及到了各行各業(yè)，這篇文章只是對即將面試的前端小伙伴們一個參考，最后效果還是要看個人努力的。 最近想著去市場中試試水，看看自己的幾斤幾兩。哈哈，然后大概遇到了這么幾類問題吧。寫出來和大家分享一下。 原生類 1.原型及原型鏈的問題 這個問題面試的公司都有問。其實(shí)這...

    shadowbook 評論0 收藏0

  • 前端面試回顧（2）---類型檢測

    摘要：運(yùn)算符用來判斷一個構(gòu)造函數(shù)的屬性所指向的對象是否存在另外一個要檢測對象的原型鏈上。所以大多數(shù)時候它返回的都是一個對象的構(gòu)造函數(shù)。想到了構(gòu)造函數(shù)可能不一樣，但說怎么判斷就有點(diǎn)想不出詞了，就持續(xù)懵逼中這篇內(nèi)容參考了高級程序設(shè)計(jì)和一篇文章 一個經(jīng)典的面試題 怎么去區(qū)分一個變量是一個數(shù)組還是一個對象呢？ typeof 看到這個題目，可能首先就會typeof,typeof是最基本的數(shù)據(jù)類型判斷方...

    fnngj 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<