javascript之用代码实现typeof

最新推荐文章于 2022-08-25 20:27:26 发布

原创最新推荐文章于 2022-08-25 20:27:26 发布 · 置顶 · 406 阅读

1 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

29 篇文章

订阅专栏

本文详细介绍了JavaScript中的类型判断方法，重点讲解了typeof操作符的工作原理及其局限性，并提供了改进后的类型判断函数实现。

1.typeof 用来判断的类型

基本类型有：number, undefind, null, string, boolean, symbol(ES6新增)
引用数据类型有：Object, Arrary, RegExp, Date, Function
它们的区别：基本数据类型不可变，即存在栈中。引用数据类型可变，是根据栈中对应的地址去找到对应的堆，即引用数据类型在堆中（这里还可以延申到深浅拷贝的知识）。
typeof 对于引用数据类型，除了function之外，其他都只能判断成"object"

2.typeof的实现和图解

这里我们用到一个核心的方法：Object.prototype.toString
为了更明白我们深入源码查看

意思很明了：返回的是该判断对象的字符串形式

如下图所示
在这里插入图片描述

核心源码如下：

function typeofDemo(params) {
	// call用于改变this的指向 改变成params对应的this
	return Object.prototype.toString.call(params).slice(8, -1)
}

但是问题来了：
在这里插入图片描述

typeof判断null, array, object的都是 “object”, 说到这里为什么null也是object？因为js在开发初期为了性能而使用低位存储变量的类型信息，约定000开头为对象，而null二进制刚好设置为全0，所以这个是历史遗留的问题。

我们需要改进一下代码

function typeofDemo(params) {
    if(!params) return
    const result = Object.prototype.toString.call(params).slice(8, -1)
    let map = {
        Number: 'number',
        Array: 'object',
        String: 'string',
        Object: 'object',
        Null: 'object',
        undefined: 'undefined',
        Symbol: 'symbol',
        Boolean: 'boolean',
        Function: 'function'
    }
    return map[result]
}