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

fnngj 發布于2019-08-22 11:06 / 869人閱讀

摘要：運算符用來判斷一個構造函數的屬性所指向的對象是否存在另外一個要檢測對象的原型鏈上。所以大多數時候它返回的都是一個對象的構造函數。想到了構造函數可能不一樣，但說怎么判斷就有點想不出詞了，就持續懵逼中這篇內容參考了高級程序設計和一篇文章

一個經典的面試題

怎么去區分一個變量是一個數組還是一個對象呢？

typeof

看到這個題目，可能首先就會typeof,typeof是最基本的數據類型判斷方式，在不考慮es6的情況下，typeof可能的返回值有下面這些：

"undefined"        //如果這個值未定義
"boolean"        //如果這個值是布爾值
"string"        //如果這個值是字符串
"number"        //如果這個值是數值
"object"        //如果這個值是對象或null
"function"        //如果這個值是函數

你可以發現typeof可能的返回值并沒有array,也就是說typeof并不能幫你檢測出一個數組。事實上，無論引用的是什么類型的對象，它都返回 "object"。如果使用typeof去檢測一個數組，返回的也將會是"object"。

instanceof

instanceof運算符用來判斷一個構造函數的prototype屬性所指向的對象是否存在另外一個要檢測對象的原型鏈上。
使用它的方式是：obj instanceof Object
這句話檢測Object.prototype是否存在于參數obj的原型鏈上。
其實它已經能夠很好區別開對象和數組了，看下面的例子：

var arr = [1, 2];
var obj = {
    name: "name"
}
console.log(arr instanceof Array);         //true
console.log(obj instanceof Array);         //false

但它也有一丟丟問題，既然它會去在整個原型鏈上去找，而ECMAScript中Object是所有對象的基礎，那么，如果使用instanceof去判斷一個數組是不是對象的時候，會不會也返回true呢？

var arr = [1,2];

console.log(arr instanceof Object);        //true
console.log(arr instanceof Array);        //true

答案是肯定的，所以感覺這種判斷方式也有小瑕疵。

constructor

constructor 屬性返回對創建此對象的函數的引用。所以大多數時候它返回的都是一個對象的構造函數。
看例子：

var arr = [1,2];

console.log(arr.constructor === Array);        //true
console.log(arr.constructor === Object);    //false

但既然想要挑刺，我們就想想這種方式有什么問題。constructor屬性其實是存在一個對象的原型中的，所以，如果他的原型被改變了，這種方法還會有用么？
還是例子：

var arr = [1,2];
arr.__proto__ = {}
console.log(arr.constructor === Array);            //false
console.log(arr.constructor === Object);        //true

哈哈，不錯所料的，我們改變了arr的__proto__屬性為一個對象之后，constructor也給我們做出了錯誤的判斷，所以，這種方法也有被玩壞的可能。

Object.prototype.toString()

最后就是通過toString()方法，數組原型和對象原型定義的toString()方法不同。

參考：http://www.cnblogs.com/ziyunf...

接著看例子：

var arr = [1, 2];
var obj = {
    name: "name",
}
console.log(Object.prototype.toString.call(arr) === "[object Array]"); //true
console.log(Object.prototype.toString.call(boj) === "[object Array]"); //false

后記

看到這道題還是我第一次面試的時候，比較萌新，抱的態度也是去積累點經驗，準備的不充分。被問到這個題的時候，首先我的第一反應是找一個數組中有的，對象中沒有的屬性去判斷，比如length,但說出來我就后悔了，對象中沒有length這個屬性難道我們不能給它賦一個么，而那時我還知道如果用typeof的話，他倆都會返回object。想到了構造函數可能不一樣，但說怎么判斷就有點想不出詞了，就持續懵逼中...

這篇內容參考了《JavaScript高級程序設計》和一篇文章：http://www.cnblogs.com/Walker...

GPU云服務器云服務器前端面試前端工程師面試前端ddos 攻擊面試前端開發工程師面試

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/91791.html

前端面試回顧（1）---javascript的面向對象

摘要：每個類有三部分構成第一部分是構造函數內，供實例對象化復制用。第二部分是構造函數外，直接通過點語法添加，供類使用，實例化對象訪問不到。組合繼承還有一個要注意的地方在代碼處，將子類原型的屬性指向子類的構造函數。前言前一陣面試，過程中發現問到一些很基礎的問題時候，自己并不能很流暢的回答出來。或者遇到一些基礎知識的應用，由于對這些點理解的不是很深入，拿著筆居然什么都寫不出來，于是有了回顧一...

animabear 2019-08-21 16:21 評論0 收藏0
我的前端面試日記（一）

摘要：組件化編碼的一切都是基于組件的。屬性返回目標節點的前一個兄弟節點。如果目標節點前面沒有同屬于一個父節點的節點，將返回屬性是一個只讀屬性。而當變量離開環境時，則將其標記為離開環境。第一次寫面試經歷，雖然之前有過一些電話面試經歷，但相對而言感覺此次的經歷對自己收獲還是比較大，這里留下面經當作日記吧！（面試時間：2018-6-12 下午2:10；時長：50min；公司：*） 1、說說Rea...

warkiz 2019-08-29 15:42 評論0 收藏0
我的前端面試日記（一）

摘要：組件化編碼的一切都是基于組件的。屬性返回目標節點的前一個兄弟節點。如果目標節點前面沒有同屬于一個父節點的節點，將返回屬性是一個只讀屬性。而當變量離開環境時，則將其標記為離開環境。第一次寫面試經歷，雖然之前有過一些電話面試經歷，但相對而言感覺此次的經歷對自己收獲還是比較大，這里留下面經當作日記吧！（面試時間：2018-6-12 下午2:10；時長：50min；公司：*） 1、說說Rea...

zhunjiee 2019-08-22 18:00 評論0 收藏0
回顧自己三次失敗的面試經歷

摘要：站在這個時間點上，我對自己之前三次失敗的面試經歷做了一次深度回顧。關于我第三次面試失敗的經歷，依然是與輪播圖有關。當然，這次思特奇面試之旅，最后也是以失敗告終，這也是我離進大廠最近的一次。 showImg(https://segmentfault.com/img/bVYQuP?w=528&h=513); 前言時間的齒輪已經來到了2017年的11月份，距離2018年僅僅還剩下不到兩...

DC_er 2019-08-21 17:42 評論0 收藏0