業務寫了很多，依然不是前端大神，我相信這是很多‘入坑’前端開發同學的迷茫之處，個人覺得前端職業發展是有路徑可尋的，前期寫業務是一個積累過程，后期提煉總結，比如編程思想，父子類的原型繼承，還是對象之間的關聯委托，設計模式的熟悉和運用，這都是一個前端工程師成長為高級工程師的必經之路，而這條道路是需要我們耐住性子，請相信，生活早晚會回報我們的努力。

? ? ? 話不多說，進入我們今天的主題，JavaScript中判斷一個數據的類型有多種方式：typeof、instanceof、constructor、Object.prototype.toString.call，一般判斷簡單的數據類型我們會使用typeof，但是對于數組，正則類型的數據，typeof是無能為力的，instanceof一般用于判斷對象的繼承關系，今天我們主要說的是Object.prototype.toString.call這個方法。

? ? ? 1.判斷類型? ? ??

我們可以寫一個isType的方法來判斷數據的類型，傳入兩個參數，第一個是需要判斷的數據，第二個是數據類型。

前置知識：各個類型通過Object.prototype.toString.call方法后得到的結果console.log(Object.prototype.toString.call('hello')) //[object String] console.log(Object.prototype.toString.call(34)) //[object Number] console.log(Object.prototype.toString.call(true))// [object Boolean] console.log(Object.prototype.toString.call(undefined)) //[object Undefined] console.log(Object.prototype.toString.call(function f() {})) // [object Function]下面我們就開始擼代碼了： function isType(content,type){//這里我們通過正則匹配去掉'[object ]',只留下類型let t = Object.prototype.toString.call(content).replace(/\[object\s|\]/g,'');//將得到的t與傳入的type進行比較，返回結果，結果為Boolean類型return t === type; } //執行函數并將結果返回給res，打印res let res = isType('hello','String') console.log(res);//true

是不是非常簡單，對自己又充滿信心了，不過如此嘛！！確實很簡單，來，繼續，一點點深入~~

通過上面的一個函數我們就可以很容易的判斷一個JavaScript數據的類型，但是我們在使用的時候是這個樣子的：

let res1 = isType('hello','String'); let res2 = isType(123,'Number'); let res3 = isType(true,'Boolean');

我們每次在使用的時候都是手動傳入類型，很有可能手一抖，就傳錯類型了，本來'String'，我們傳入了'Strings'，是不是很坑爹呀~~

一般的庫或者插件不會這樣去讓我們使用，一般會這么使用utils.isString('hello')，我們只需要傳入我們的數據就可以了，插件會提供相應的判斷方法，比如

utils.isString('hello'); utils.isNumber(123); utils.isBoolean(true);

這里我們需要批量化生產函數，就需要用到下面的一個函數返回一個函數，也就是所謂的閉包，也被叫做高階函數，不要那些高大上，我們程序員都是接地氣的~~，初學者對于閉包理解起來比較困難，不著急，隨著你的深入，都會明白的~~~

? ? ? 2.一個函數返回一個函數

接下來我們對上面的isType函數進行改造，

let isNumber = isType('Number'); let isString = isType('String'); let isBoolean = isType('Boolean'); isNumber(12); isString('hello'); isBoolean(true)

通過執行isType()，我們可以得到想要的函數，說明在isType內部，我么返回了一個函數，返回的這個函數對于外層函數 (也就是isType) 的參數進行了引用，JavaScript的垃圾回收機制是不會回收被引用的數據的，所以type被保留在了返回函數的內部，這就是閉包機制。

function isType(type) {return function(content) {let t = Object.prototype.toString.call(content).replace(/\[object\s|\]/g,'');return t === type;} }

通過執行isType，我們得到了對內部函數的引用。

isNumber(12); isString('hello'); isBoolean(true);

上面其實就是對isType內部函數的執行。

也不過如此嘛，說好的手把手帶我們寫一個判斷類型插件呢！？

? ? ? 3.屬于我們自己的判斷JavaScript類型插件

有些同學已經有啟發了，我們可以這樣操作

let type = ['String','Number','Function','Undefined','Boolean','Array']; let utils = {}; type.forEach(item => {utils['is' item] = isType(item); })

下面是console.log(utils)的結果

是不是很驚喜~~

我們可以利用ES6的模塊化機制來封裝這個方法，然后erport 出去供小伙伴使用，是不是很簡單，也可以上傳到npm，供廣大開發者使用，是不是很有成就感。（估計這個難度的插件去你npm下載使用的人幾乎沒有，這里我們掌握怎么通過閉包去處理問題這個思想就行）下面是完整版utils.js

function isType(type) {return function(content) {let t = Object.prototype.toString.call(content).replace(/\[object\s|\]/g,'');return t === type;} }function createUtils(){let utils = {};let type = ['String','Number','Function','Undefined','Boolean','Array'];type.forEach(item => {utils['is' item] = isType(item);})return utils; } let utils = createUtils(); export default{utils}

希望對你有所幫助，這條路還很長，慢慢來~~~

后續敬請期待算法與數據結構系列~~~~

如果你覺得對你又幫你，請點個贊，這是對原創者最大的寫作分享動力~~~~

總結

以上是生活随笔為你收集整理的手把手带你写一个JavaScript类型判断小工具的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。