首页/文章/javascript

浅谈Object.prototype.toString.call(obj)功能及原理

2022-11-19
23488 分钟
...

Object.prototype.toString.call(obj)的功能

可能作为程序员以及即将迈入程序员门槛的小伙伴都知道Object.prototype.toString.call(obj)方法,功能简单但是确是类型检测界的“扛把子”。 首先来讲,对刚接触的人来说,我们为什么要使用这种奇怪的方法呢?typeof也可以检测类型,然而它有什么优势?我们来引入一道JavaScript的题目来参考: 使用 typeof bar === "object" 检测 变量“bar”是否为对象有什么缺点?如何避免? 缺点很明确,typeof可以准确的检测bar是否为对象吗?答案是否定的。Array null…检测出来也均为object,因此规避方法还是要用到本文所提方法。接下来我们进行测试

`console.log(Object.prototype.toString.call("jerry"));//[object String]
console.log(Object.prototype.toString.call(12));//[object Number]
console.log(Object.prototype.toString.call(true));//[object Boolean]
console.log(Object.prototype.toString.call(undefined));//[object Undefined]
console.log(Object.prototype.toString.call(null));//[object Null]
console.log(Object.prototype.toString.call({name: "jerry"}));//[object Object]
console.log(Object.prototype.toString.call(function(){}));//[object Function]
console.log(Object.prototype.toString.call([]));//[object Array]
console.log(Object.prototype.toString.call(new Date));//[object Date]
console.log(Object.prototype.toString.call(/\d/));//[object RegExp]

function Person(){};
console.log(Object.prototype.toString.call(new Person));//[object Object]`

这即是此方法的用处,它可以精准判断所传入参数的数据类型。

它是如何做到的呢?接下来让我们一起来探讨一下其原理

Object.prototype.toString.call(obj)类型检测原理

此方法为什么能检测数据类型呢?起初我也很奇怪,只是记住了此方法,并未深究,今天让我们来一探究竟。

首先,这句话的意思是让我们用Object原型上的toString方法作用在传入的obj的上下文中(通过call将this指向obj),那么我们知道数组本身也有toString()方法,那我们为什么非要用Object上的呢? 首先,让我们再来看一下toString()方法:

`var num = 123
num.toString() // '123'

var str = 'hello'
str.toString() // 'hello'

var bool = false
bool.toString() // 'false'

var arr = [1, 2, 3]
arr.toString()  // '1,2,3'

var obj = {lang:'zh'}
obj.toString()  // '[object Object]'

var fn = function(){}
fn.toString()  // 'function(){}'

null.toString()  // Cannot read property 'toString' of null

undefined.toString() // Cannot read property 'toString' of undefined`

toString:由名字可以看出此方法是将传入的数据类型转换成字符串输出(null和undefined除外) 我们再来看一下Object以及其原型上的toString方法

`Object.toString()//"function Object() { [native code] }"
Object.prototype.toString()//"[object Object]"`

Object输出的是其函数体"function Object() { [native code] }"而Object上输出的是其类型。我们可以看出Object对象和它的原型链上各自有一个toString()方法,第一个返回的是一个函数,第二个返回的是值类型。

接下来让我们看一个表格:

数据类型例子return
字符串“foo”.toString()“foo”
数字1.toString()Uncaught SyntaxError: Invalid or unexpected token
布尔值false.toString()“false”
undefinedundefined.toString()Uncaught TypeError: Cannot read property ‘toString’ of undefined
nullnull.toString()Uncaught TypeError: Cannot read property ‘toString’ of null
StringString.toString()“function String() { [native code] }”
NumberNumber.toString()“function Number() { [native code] }”
BooleanBoolean.toString()“function Boolean() { [native code] }”
ArrayArray.toString()“function Array() { [native code] }”
FunctionFunction.toString()“function Function() { [native code] }”
DateDate.toString()“function Date() { [native code] }”
RegExpRegExp.toString()“function RegExp() { [native code] }”
ErrorError.toString()“function Error() { [native code] }”
PromisePromise.toString()“function Promise() { [native code] }”
ObejctObject.toString()“function Object() { [native code] }”
MathMath.toString()“[object Math]”
这就是各种数据类型调用toString()方法的返回值,由此我们看出不同的数据类型都有其自身toString()方法。所以上述toString()方法来自于Number、String、Boolean…等等这些类。
我们又知道,在JavaScript中,所有类都继承于Object,因此toString()方法应该也被继承了,但由上述可见事实并不像我们想的那样,其实各数据类型使用toString()后的结果表现不一的原因在于:所有类在继承Object的时候,改写了toString()方法。 Object原型上的方法是可以输出数据类型的。因此我们想判断数据类型时,也只能使用原始方法。继而有了此方法:Object.prototype.toString.call(obj)

接下来让我们进行验证

`// 定义一个数组
var arr = [1, 2, 3]

// 数组原型上是否具有 toString() 方法
console.log(Array.prototype.hasOwnProperty('toString')) //true

// 数组直接使用自身的 toString() 方法
console.log(arr.toString()) // '1,2,3'

// delete操作符删除数组原型上的 toString()
delete Array.prototype.toString

// 删除后,数组原型上是否还具有 toString() 方法
console.log(Array.prototype.hasOwnProperty('toString')) //false

// 删除后的数组再次使用 toString() 时,会向上层访问这个方法,即 Object 的 toString()
console.log(arr.toString()) // '[object Array]'`

当我们把Array自身的toString()方法删除之后,再次使用它时,由原型链它会向上查找这个方法,即Object的toString(),也便将Object上的toString()方法作用在数组上,得出其数据类型[object Array]

至此便透彻了Object.prototype.toString.call(obj)功能及原理。

bdd068dfc8da3c17ef351177fbe653dd.png

如果您觉得这篇文章有帮助,请点个赞吧~

分享文章

相关文章

更多文章 →
javascript2026-02-24
navigator.sendBeacon全指南
在前端开发中,埋点系统是必不可少的一环。我们经常需要在用户 关闭页面 、 刷新 或 跳转路由 时,向服务器发送最后一条统计数据(比如用户停留时长、页面跳出率)。 但这看似简单的需求,在实现时却危机四伏:请求发不出去?页面跳转卡顿?今天我们就来聊聊这个问题的终极解决方案 —— 。 一、 痛点与传统方案的挣扎 场景还原 当用户点击关闭按钮时,浏览器会触发生命周期事件( 或 )。如果我们直接使用普通的异步 AJAX ( 或 ) 发送请求,浏览...
学习
javascript2025-11-02
理解浏览器事件系统,从用户点击到事件对象的完整旅程
深入理解浏览器事件系统:从用户点击到事件对象的完整旅程 “当我点击页面按钮时,背后发生了什么?为什么回调函数能收到一个包含丰富信息的event对象?今天,让我们一起揭开浏览器事件系统的神秘面纱。” 一个令人困惑的现象 作为前端开发者,我们每天都在写这样的代码: 这段代码如此熟悉,以至于我们很少停下来思考:​ ​这个 对象到底从哪里来?它为什么能知道点击的精确坐标?为什么能识别是哪个元素被点击了?​ ​ 更神奇的是,当我们手动创建事件时:...
学习
javascript2025-10-01
实现大文件上传全流程详解
在日常开发中,大文件上传是个绕不开的坎——动辄几百 MB 甚至 GB 级的文件,直接上传不仅容易超时,还会让用户体验大打折扣。最近我用 Vue+Express 实现了一套完整的大文件上传方案,支持分片上传、断点续传、秒传和手动中。 一、先看效果:我们要实现什么? 先上核心功能清单,确保大家明确目标,知道我们要解决哪些实际问题: 大文件分片上传 :将文件切成固定大小的小片段分批上传,避免单次请求超时 秒传 :服务器已存在完整文件时,直接返...
学习
javascript2025-09-18
JavaScript 的多线程能力:Worker
如果你写过一些计算量稍大的 JavaScript 代码,比如图像处理、大量数据排序或者复杂的算法,你几乎肯定遇到过浏览器“卡死”的现象。点击页面没反应,动画也停了,就像整个世界都静止了。 这就是主线程被阻塞的典型后果。因为主线程既要负责执行 JavaScript,又要负责渲染页面、响应用户操作,一旦它被繁重的计算任务占满,就无暇顾及其他,用户体验便直线下降。 这个问题的根源,正是“主线程是单线程的”。那么,如何解决呢? 答案很简单:把这...
学习面试
javascript2025-09-15
一张 8K 海报差点把首屏拖垮
你给后台管理系统加了一个「企业风采」模块,运营同学一口气上传了 200 张 8K 宣传海报。首屏直接飙到 8.3 s,LCP 红得发紫。 老板一句「能不能像朋友圈那样滑到哪看到哪?」——于是你把懒加载重新翻出来折腾了一轮。 解决方案:三条技术路线,你全踩了一遍 1\. 最偷懒:原生 一行代码就能跑,浏览器帮你搞定。 🔍 关键决策点 2020 年后现代浏览器全覆盖,IE 全军覆没。 必须写死 ,否则 CLS 会抖成 PPT。 适用场景...
学习
javascript2025-09-10
🚀 Web Worker让你的应用丝滑
🌟 引言 在日常的前端开发中,你是否遇到过这样的困扰: 大数据处理时页面卡死 :处理几万条数据时,页面直接卡成PPT,用户点击毫无反应 复杂计算阻塞UI :图片处理、数据分析等计算密集型任务让整个应用假死 文件上传/下载卡顿 :大文件操作时,其他功能完全无法使用 实时数据处理性能差 :WebSocket接收大量数据时,页面渲染严重滞后 今天分享6个Web Worker的核心技巧,让你的应用告别卡顿,用户体验丝滑如德芙! 💡 核心技巧...
学习

评论

请登录后发表评论

去登录
加载评论中...

目录