数据类型检测的方法有哪些???

数据类型检测的方法有哪些???

1. typeof

js 复制代码
console.log(typeof 2);               // number
console.log(typeof true);            // boolean
console.log(typeof 'str');           // string
console.log(typeof []);              // object    
console.log(typeof function(){});    // function
console.log(typeof {});              // object
console.log(typeof undefined);       // undefined
console.log(typeof null);            // object

其中数据、对象、null都会被判断为 object ,其他都正确

我们知道object是一种广泛类型,它涵盖了普通的对象、数组、函数,那为什么function没有被判断为object,而null却判断为object了呢??

  • 虽然函数确实是对象的一种类型,但在JavaScript中,函数被视为一种特殊的对象,因为它们具有可调用的行为。因此,typeof操作符将函数识别为函数类型,而不是对象类型。在JavaScript中,函数被视为一等公民,具有一些独特的特性,例如:

(1) 可调用性 :函数可以通过()运算符进行调用,执行其中的代码。

(2) 具有属性和方法:函数是对象的一种特殊形式,可以拥有属性和方法。

  • 在JavaScript中,将null判断为object是一个历史遗留问题,属于语言本身的设计缺陷。这个问题源于JavaScript的早期版本中的一个错误。在JavaScript的初始实现中,使用32位系统表示值的前三位用于标识该值的类型。其中,对象的标识位为000,而null被错误地赋予了000,因此被错误地判断为对象。

尽管这个问题已经存在了很长时间,但为了保持向后兼容性,JavaScript的设计者们选择不修复这个问题。因此,即使在现代的JavaScript引擎中,typeof null仍然返回"object"

2.instanceof

instanceof可以正确地判断对象的类型,其内部运行机制是判断在其原型链中能否找到该类型的原型

js 复制代码
console.log(2 instanceof Number);                    // false
console.log(true instanceof Boolean);                // false 
console.log('str' instanceof String);                // false 
 
console.log([] instanceof Array);                    // true
console.log(function(){} instanceof Function);       // true
console.log({} instanceof Object);                   // true

可以看到,instanceof只能判断引用数据类型,而不能判断基本数据类型。instanceof运算符还能用来测试一个对象在其原型链中是否存在一个构造函数的prototype属性

3.constructor

constructor有两个作用,一是判断数据类型,二是对象实例通过constructor对象访问它的构造函数。需要注意,如果创建一个对象来改变它的原型,constructor就不能用来判断数据类型了:

js 复制代码
function Fn(){};
 
Fn.prototype = new Array();
 
var f = new Fn();
 
console.log(f.constructor===Fn);    // false
console.log(f.constructor===Array); // true

4.Object.prototype.toString.call()

Object.prototype.toString.call() 使用 Object 对象的原型方法 toString 来判断数据类型:

js 复制代码
var a = Object.prototype.toString;
 
console.log(a.call(2));
console.log(a.call(true));
console.log(a.call('str'));
console.log(a.call([]));
console.log(a.call(function(){}));
console.log(a.call({}));
console.log(a.call(undefined));
console.log(a.call(null));

同样是检测对象obj调用toString方法,obj.toString()的结果和Object.prototype.toString.call(obj)的结果不一样,这是为什么?

这是因为toString是Object的原型方法,而Array、function等类型作为Object的实例,都重写了toString方法。不同的对象类型调用toString方法时,根据原型链的知识,调用的是对应的重写之后的toString方法(function类型返回内容为函数体的字符串,Array类型返回元素组成的字符串...),而不会去调用Object上原型toString方法(返回对象的具体类型),所以采用obj.toString()不能得到其对象类型,只能将obj转换为字符串类型;因此,在想要得到对象的具体类型时,应该调用Object原型上的toString方法。

相关推荐
怀旧,3 分钟前
【Python】3.函数与列表
java·前端·python
唐人街都是苦瓜脸1 小时前
uni-app 提供的页面跳转方法详细解释及其区别
前端·uni-app
咔咔库奇1 小时前
性能优化深度实践:突破vue应用性能
前端·vue.js·性能优化
编程乐学(Arfan开发工程师)2 小时前
28、请求处理-【源码分析】-请求映射原理
java·前端·spring boot·后端·spring
咔咔库奇2 小时前
前端开源JavaScrip库
前端·开源
_r0bin_3 小时前
前端面试准备2
前端·html
白皎3 小时前
立志成为一名优秀测试开发工程师(第九天)——使用fiddler工具、request库进行接口测试
前端·python·fiddler
saadiya~3 小时前
Vue3 + Element Plus 实现树形结构的“单选 + 只选叶子节点 + 默认选中第一个子节点”
前端·javascript·vue.js
方圆工作室3 小时前
HTML5 Canvas 星空战机游戏开发全解析
前端·html·html5
正函数3 小时前
HTML5有那些更新
前端·html·html5