JavaScript类型判断大揭秘:解析typeof、instanceof和Object.prototype.tostring

在前端开发中,对于JavaScript中的数据类型判断,常用的方法包括typeof、instanceof和Object.prototype.tostring。这些方法各自有其特点和适用场景,本文将深入探讨它们的原理和使用方法。

typeof:准确判断数据类型

typeof是JavaScript中常用的一种类型判断方法,它能够准确判断除null之外的原始数据类型,如字符串、数字、布尔值等,同时也可以判断function类型。下面我们将详细解释其使用方法和特点。

首先,让我们来看一个例子:

javascript 复制代码
console.log(typeof 'hello');//string
console.log(typeof 123);  //number
console.log(typeof true);//布尔
console.log(typeof undefined);//underfined
console.log(typeof Symbol(1));  //symbol
console.log(typeof 123n);//bigint
console.log(typeof null); // object
console.log(typeof ({}));  // object
console.log(typeof ([]));  // object
console.log(typeof (new Date())); // object
console.log(typeof (function () { }))  // function

从上面的例子可以看出,typeof能够准确判断除null之外的原始数据类型,以及function类型,但在判断null时会返回"object",这是因为在JavaScript早期版本中,null被错误地识别为对象类型

除此之外,需要注意的是,typeof对于数组类型的判断并不准确,会返回"object",而无法判断具体的类型。总的来说,typeof是一种简单易用、准确性较高的类型判断方法,但在某些情况下可能存在一些特殊之处,需要我们在使用时多加注意。

instanceof:引用类型判断利器

在JavaScript中,instanceof是一种常用的引用类型判断方法,不能判断简单类型。它通过原型链查找方式来进行判断,可以帮助我们准确判断一个对象是否属于某个特定的构造函数或类的实例。下面我们将详细解释其使用方法和特点。

javascript 复制代码
let obj = {}
let arr = [1, 2]
let date = new Date()
let fn = function () { }
console.log(obj instanceof Object); // ture
console.log(arr instanceof Array);  // true   arr.__proto__ === Array.prototype
console.log(date instanceof Date);// true
console.log(arr instanceof Object); // true   arr.__proto__.__proto__ === Object.prototype
console.log(fn instanceof Object);

从上面的例子可以看出,如果一个对象是某个构造函数或类的实例,那么使用instanceof操作符判断会返回true。同时,由于JavaScript中所有的对象都继承自Object,因此对于任何对象来说,它都是Object的实例,所以 arr instanceof Object 也会返回true。

面试题你可以手写一个instanceof 判断代码嘛

来展示

javascript 复制代码
function myInstance(L, R) {
 let left = L.__proto__
 let right = R.prototype

 while (left !== null) {
     if (left === right) {
         return true
     }
     left = left.__proto__
 }
 return false
}

console.log(myInstance({}, Array));

console.log(myInstance([], Object))

这个代码就是解释·instanceof的 ,就是一开始找原型链, arr.proto === Array.prototype,arr.proto .proto === Object.prototype 的方法

总的来说,instanceof是一种强大而灵活的引用类型判断方法,能够帮助我们准确判断一个对象是否属于某个特定的构造函数或类的实例。但需要注意的是,它只能判断引用类型,不能用于判断原始数据类型。在使用时,我们需要理解其原理并注意正确的使用场景。 Object.prototype.tostring方法是JavaScript中的一个内置方法,它通过读取数据结构内部属性来读取值,并返回表示对象类型的字符串值。该方法可以用于准确判断一个对象的类型,包括原始数据类型、引用类型以及内置对象类型等。

Object.prototype.tostring:

下面我们将详细解释Object.prototype.tostring方法返回不同类型的字符串值的规则,并剖析其内部实现原理。

首先,让我们来看一个例子:

javascript 复制代码
console.log(Object.prototype.toString.call(123)); // 输出:[object Number]
console.log(Object.prototype.toString.call('hello')); // 输出:[object String]
console.log(Object.prototype.toString.call(true)); // 输出:[object Boolean]
console.log(Object.prototype.toString.call(function(){})); // 输出:[object Function]
console.log(Object.prototype.toString.call([])); // 输出:[object Array]
console.log(Object.prototype.toString.call({})); // 输出:[object Object]
console.log(Object.prototype.toString.call(null)); // 输出:[object Null]
console.log(Object.prototype.toString.call(undefined)); // 输出:[object Undefined]

从上面的例子可以看出,使用Object.prototype.tostring方法,可以准确地判断各种类型的对象。而且,对于原始数据类型,也能够返回正确的字符串值。

需要注意的是,当我们直接使用toString方法时,会返回对象的字符串形式,而不是对象的类型信息。

vbscript 复制代码
console.log([1, 2, 3].toString()); // 输出:"1,2,3"
console.log((123).toString()); // 输出:"123"

因此,在进行类型判断时,我们需要使用Object.prototype.tostring方法,并通过call()方法将其绑定到需要判断类型的对象上。

总的来说,Object.prototype.tostring方法是一种强大而灵活的判断对象类型的方法,能够准确地判断各种类型的对象。但需要注意的是,在使用时需要将其绑定到需要判断类型的对象上,并理解其返回不同类型的字符串值的规则。

通过本文的学习,相信读者能对JavaScript中的类型判断有更清晰的认识,为日后的前端开发之路提供更坚实的基础。喜欢的来个关注 点赞 这个也是以后写文章的动力所在 谢谢大家能观看我的文章 咱下期再见 拜拜

相关推荐
cs_dn_Jie4 分钟前
钉钉 H5 微应用 手机端调试
前端·javascript·vue.js·vue·钉钉
开心工作室_kaic38 分钟前
ssm068海鲜自助餐厅系统+vue(论文+源码)_kaic
前端·javascript·vue.js
有梦想的刺儿1 小时前
webWorker基本用法
前端·javascript·vue.js
cy玩具1 小时前
点击评论详情,跳到评论页面,携带对象参数写法:
前端
清灵xmf2 小时前
TypeScript 类型进阶指南
javascript·typescript·泛型·t·infer
小白学大数据2 小时前
JavaScript重定向对网络爬虫的影响及处理
开发语言·javascript·数据库·爬虫
qq_390161772 小时前
防抖函数--应用场景及示例
前端·javascript
334554322 小时前
element动态表头合并表格
开发语言·javascript·ecmascript
John.liu_Test3 小时前
js下载excel示例demo
前端·javascript·excel
Yaml43 小时前
智能化健身房管理:Spring Boot与Vue的创新解决方案
前端·spring boot·后端·mysql·vue·健身房管理