JavaScript專題之資料類型偵測的那些事
目錄
寫在最後
（免費學習推薦： javascript影片教學）
#前言
在《JavaScript的資料類型》中我們也提到過簡單的類型檢測問題。
身為前端的同學，我們應該都知道可以使用typeof和instanceof在執行時判斷JavaScript資料的類型，那麼他們都是怎麼判斷的呢？一千個人會不會寫出來一千個判斷方法？
本文會從通用的typeof、到專攻物件的instanceof，再到isNull、isNumber、isString等方法，討論如何判斷資料類型，一起加油～
一、typeof
typeof：運算子傳回字串，表示未經計算的運算元的型別。
我們都知道，在ES6 前，JavaScript 共六種資料類型，分別是：
#然而當我們使用typeof 對這些資料類型的值進行操作的時候，傳回的結果但不是一一對應，分別是：
# String
有一些意外，
typeof null => 'object'且
typeof function(){} => 'function '所以在大多數情況下我們可以使用typeof來偵測基本資料類型，但是，偵測得到的Object後，卻無法區分是哪一種Object：
typeof [] === 'object'; //truetypeof {} === 'object'; //truetypeof null === 'object'; //true在偵測Js的原始型別時，除了
typeof null傳回
object
二、instanceof
如果對原型及原型鏈不太熟悉的同學不妨看看這篇文章從原型到原型鏈
定義
instanceof 運算子用於偵測建構函式的prototype 屬性是否出現在某個實例物件的原型鏈上。const arr = [];const obj = {};console.log(arr instanceof Array); // trueconsole.log(arr instanceof Object); // trueconsole.log(obj instanceof Array); // falseconsole.log(obj instanceof Object); // true
滿足class extends和原型鏈規則的父子類別關係的物件都能被匹配：
class
class Base {}class Current extends Base {}const obj = new Current();console.log(obj instanceof Current); // trueconsole.log(obj instanceof Base); // true原型鏈
function Foo() {}function Bar() {}Bar.prototype = new Foo();const obj = new Bar();console.log(obj instanceof Bar); // trueconsole.log(obj instanceof Foo); // truefunction Other() {}obj.__proto__ = new Other();console.log(obj instanceof Other); // trueconsole.log(obj instanceof Foo); // false
instanceof借助了原型鏈來判斷的實際上，只要一個型別
的prototype在一個物件obj的原型鏈上，那麼
obj instanceof Type就是true，否則就是false。
三、constructor
有時候我們不希望匹配父類型，只希望匹配當前類型，那麼我們可以用constructor來判斷：返回創建實例物件的Object
建構函數的參考。請注意，此屬性的值是對函數本身的引用，而不是一個包含函數名稱的字串。實例
const arr = [];console.log(arr.constructor === Array); // trueconsole.log(arr.constructor === Object); // false
物件的constructor會傳回它的類型，而類型在定義的時候，會建立一個name只讀屬性，值為類型的名字。 class Foo {}console.log(Foo.name); // Fooconst foo = new Foo();console.log(foo.constructor === Foo); // trueconsole.log(foo.constructor.name === 'Foo'); // trueconstructor.name 一定就是正確的嗎？
我們可以修改它嗎？
四、stringTag是什麼？ 4.1 stringTag——類型標籤
如果此方法在自定义对象中未被覆盖，toString() 返回 “[object type]”，其中 type 是对象的类型。以下代码说明了这一点：
实例
比如这是requirejs里面的代码片段。
var ostring = Object.prototype.toString;function isArray(it) {
return ostring.call(it) === '[object Array]';}toString时都做了什么？
这里直接将冴羽大大的总结搬了过来:
When the toString method is called, the following steps are taken:
- If the this value is undefined, return “[object Undefined]”.
- If the this value is null, return “[object Null]”.
- Let O be the result of calling ToObject passing the this value as the argument.
- Let class be the value of the [[Class]] internal property of O.
- Return the String value that is the result of concatenating the three Strings "[object ", class, and “]”.
当 toString 方法被调用的时候，下面的步骤会被执行：
注意
有几点我们需要注意：
对象；
五、实现几个数据检测的方法
好了看了几款常用的类型判断方法后，我们可不可以实现自己的类型判断工具？就利用上述提到的一个或多个方法。我们自己动手丰衣足食～
注意，我们认为null不是一个对象，它就是null～
function isObject(value) {
const type = typeof value;
return value != null && (type === 'object' || type === 'function');}function isNull(value) {
return value === null;}function isFunction(value) {
return typeof value === 'function';}var isArray = Array.isArray || function( value ) {
return type(value) === "array";}const toString = Object.prototype.toString;function getTag(value) {
// if (value === null) return '[object Null]';
// if (value == null) return '[object Undefined]'
if (value == null) {
return value === undefined ? '[object Undefined]' : '[object Null]'
}
return toString.call(value)}好了到最后，大家平时对类型检测的态度是什么样的呢？
相关免费学习推荐：javascript（视频）
以上是JavaScript專題之六：型別檢測的詳細內容。更多資訊請關注PHP中文網其他相關文章！
