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

相关推荐
海天胜景1 分钟前
无法加载文件 E:\Program Files\nodejs\npm.ps1,因为在此系统上禁止运行脚本
前端·npm·node.js
MingT 明天你好!4 分钟前
在vs code 中无法运行npm并报无法将“npm”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查
前端·npm·node.js·visual studio code
老兵发新帖9 分钟前
pnpm 与 npm 的核心区别
前端·npm·node.js
超级土豆粉10 分钟前
怎么打包发布到npm?——从零到一的详细指南
前端·npm·node.js
OpenTiny社区15 分钟前
TinyEngine 2.5版本正式发布:多选交互优化升级,页面预览支持热更新,性能持续跃升!
前端·低代码·开源·交互·opentiny
声声codeGrandMaster38 分钟前
Django框架的前端部分使用Ajax请求一
前端·后端·python·ajax·django
sunbyte1 小时前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | Expanding Cards (展开式卡片)
javascript·vue.js·ecmascript
肠胃炎1 小时前
React Contxt详解
javascript·react.js·ecmascript
xx24061 小时前
React Native简介
javascript·react native·react.js
重生之后端学习2 小时前
02-前端Web开发(JS+Vue+Ajax)
java·开发语言·前端·javascript·vue.js