完成一个判断数据类型的方法

890 字

4 分钟

完成一个判断数据类型的方法

2022-08-07

前端

JS

题目要求#

写一个返回数据类型的函数，如果自定义的类实例化的对象返回定义的类名

为什么不直接使用`typeof`判断#

CAUTION
typeof null会等于object，值得注意的是typeof (null)会返回Object，这是因为JS二进制前三位都为0的话会被判断为Object类型，null的二进制表示是全0，自然前三位也是0，所以执行typeof时会返回Object，实际null为基本数据类型。
而且对于对象和数组来说，都会转换成object
对于null,我们可以使用===来进行判断
所以，typeof可以判断基本数据类型，但是难以判断除了函数以外的复杂数据类型

1
typeof 1 // 'number'
2
typeof '1' // 'string'
3
typeof null // 'object'
4
typeof undefined // 'undefined'
5

6
typeof [] // 'object'
7
typeof {} // 'object'
8
typeof function(){} // 'function'

`instanceof`是否能正确判断类型#

WARNING
instanceof是通过原型链来判断的，但是对于对象来说，Array也会被转换成Object，而且也不能区分基本类型string和boolean。

1
    function Func() {}
2
    const func = new Func()
3
    console.log(func instanceof Func) // true
4

5
    const obj = {}
6
    const arr = []
7
    obj instanceof Object // true
8
    arr instanceof Object // true
9
    arr instanceof Array // true
10

11
    const str = "abc"
12
    const str2 = new String("abc")
13
    str instanceof String // false
14
    str2 instanceof String // true

基于以上结论，先完成一个简易的函数:#

1
function myTypeof(data) {
2
    const type = typeof data
3
    if(data === null)
4
        return 'null'
5
     if(type !== 'object')
6
        return type
7
     if(data instanceof Array)
8
    return 'array'
9
    return 'object'
10
}

`constructor`#

TIP
constructor 判断方法跟instanceof相似,但是constructor检测Object与instanceof不一样,constructor还可以处理基本数据类型的检测,不仅仅是对象类型。
注意:

null和undefined没有constructor;

判断数字时使用(),比如 (123).constructor,如果写成123.constructor会报错

constructor在类继承时会出错,因为Object被覆盖掉了,检测结果就不对了:

1
// 注意当出现继承的时候，使用constructor会出现问题
2
function A() {}
3
function B() {}
4
A.prototype = new B()  // A继承自B
5
console.log(A.constructor === B) // false
6
var C = new A()
7
console.log(C.constructor === A) // false
8
console.log(C.constructor === B) // true
9
//解决这种情况,通常是手动调整对象的constructor指向
10
C.constructor = A
11
console.log(C.constructor === A) // true
12
console.log(C.constructor === B) // false

`Array.isArray()`#

1
 Array.isArray([1, 2, 3]); // true
2
 Array.isArray({foo: 123}); // false
3
 Array.isArray("foobar"); // false
4
 Array.isArray(undefined); // false

正则判断#

TIP
我们可以把对象和数组转成一个字符串，这样就可以做格式判断，从而得到最终的类型。

1
function myTypeof(data) {
2
    const str = JSON.stringify(data)
3
    if(/^{.*}$/.test(str)){
4
        return 'object'
5
    }
6
    if(/^\[.*\]$/.test(str)){
7
        return 'array'
8
    }
9
}

`Object.prototype.toString.call()`#

TIP
之所以要这样调用toString方法，在之前的文章中已经提到过，是为了确保调用的是Object原型上的toString方法
每个对象都有一个toString()方法，当要将对象表示为文本值或以预期字符串的方式引用对象时，会自动调用该方法。默认情况下，从Object派生的每个对象都会继承toString()方法。如果此方法未在自定义对象中被覆盖，则toString()返回[Object type]，其中type是对象类型。所以就有以下例子：

1
   Object.prototype.toString.call(new Date()) // [object Date]
2
   Object.prototype.toString.call("1") // [object String]
3
   Object.prototype.toString.call(1) // [object Numer]
4
   Object.prototype.toString.call(undefined) // [object Undefined]
5
   Object.prototype.toString.call(null) // [object Null]

综上，封装出以下通用类型的判断方法:#

1
function myTypeof(data){
2
    var toString = Object.prototype.toString
3
    var dataType = data instanceof Element ? 'Element' : toString.call(data).replace(/\[object\s(.+)\]/,"$1")
4
    return dataType
5
}

获取实例化对象的类名#

TIP
我们只需要对，上述获取的Object类型的数据，直接使用xx.constructor.name即可

最终实现💯#

1
function myTypeof(data) {
2
    var toString = Object.prototype.toString;
3
    var dataType = data instanceof Element ? "Element" : toString.call(data).replace(/\[object\s(.+)\]/, "$1")
4

5
    if(dataType === 'Object'){
6
        return data.constructor.name
7
    }
8

9
    return dataType
10
};

完成一个判断数据类型的方法

https://blog.oceanh.top/posts/frontend/写一个判断数据类型的方法/

作者

Ocean Han

发布于

2022-08-07

许可协议

CC BY-NC-SA 4.0

最后修改时间

2025-12-24 18:12:45

Object.prototype.toString.call()

题目要求#

为什么不直接使用typeof判断#

instanceof是否能正确判断类型#

基于以上结论，先完成一个简易的函数:#

constructor#

Array.isArray()#

正则判断#

Object.prototype.toString.call()#

综上，封装出以下通用类型的判断方法:#

获取实例化对象的类名#

最终实现💯#

为什么不直接使用`typeof`判断#

`instanceof`是否能正确判断类型#

`constructor`#

`Array.isArray()`#

`Object.prototype.toString.call()`#