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中的类型判断有更清晰的认识,为日后的前端开发之路提供更坚实的基础。喜欢的来个关注 点赞 这个也是以后写文章的动力所在 谢谢大家能观看我的文章 咱下期再见 拜拜

相关推荐
GISer_Jing20 小时前
AI Agent操作系统架构师:Harness Engineer解析
前端·人工智能·ai·aigc
英俊潇洒美少年21 小时前
css中专门用来提升渲染性能、减少重排重绘的属性
前端·css
天若有情67321 小时前
前端HTML精讲01:别再乱 div 一把抓,吃透语义化标签才是进阶第一步
前端·html
Highcharts.js21 小时前
React 开发者的图表库生态:Highcharts React
前端·react.js·前端框架
阿部多瑞 ABU21 小时前
文明文化悖论
前端·人工智能·ai写作
钛态21 小时前
Flutter 三方库 react 泛前端核心范式框架鸿蒙原生层生态级双向超能适配:跨时空重塑响应式单向数据流拓扑与高度精密生命周期树引擎解耦视图渲染控制中枢(适配鸿蒙 HarmonyOS ohos)
前端·flutter·react.js
全栈前端老曹21 小时前
【前端地图】地图开发基础概念——地图服务类型(矢量图、卫星图、地形图)、WGS84 / GCJ-02 / BD09 坐标系、地图 SDK 简介
前端·javascript·地图·wgs84·gcj-02·bd09·地图sdk
只与明月听21 小时前
RAG深入学习之向量数据库
前端·人工智能·python
吕不说1 天前
AI 面试总挂?可能是表达出了问题:三层表达法 + STAR 进阶框架
前端
社恐的下水道蟑螂1 天前
LangChain 进阶实战:从玩具 Demo 到生产级 AI 应用(JS/TS 全栈版)
前端·langchain·openai