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