Object.prototype.toString.call()的原理

简介: Object.prototype.toString.call()的原理

今天在项目中看到了用Object.prototype.toString.call()这个方法封装的检测数据类型的工具。

但是浏览器搜索相关原理的好回答凤毛麟角,故而想记录一下,万一可以帮助到更多的新手呢?我的文章都是非常通俗易懂的,因为我写文章的时候,都是根据一个前提,假如我是刚开始学习js的新手,别人如果这样讲解这个知识点,那么我也能听懂。我不喜欢那种用专业术语去解释一个知识点凸显自己水平高超的文章,所以我通常采用费曼学习法的方式去记录这些知识点。喜欢的话可以看看我其它文章,对新人极度友好的哟~😊

1.我相信大多数人对这个方法有一个误区,包括我,在刚开始学JS的时候,容易对这个方法产生了一个错误的认知。

比如const a = {name:"韩振方"},好像觉得a.toString方法应该返回字符串类型的{name:"韩振方"}。问题的关键点就恰恰在这个地方。

2.首先我们要知道toString这个方法,这个函数的返回值本来就应该是下面的固定格式。一个字符串个格式的[object xxxx]xxxx代表着调用这个方法的“数据”的数据类型。

image.png

3.重点来了:js其实是重写了某些数据类型的toString方法,所以才会造成下面的情况,在这里我们拿函数类型举例子,其他数据类型同理:

image.png

嗯...对,这才是我理想中的toString,会返回这个变量的字符串显示样子。

4.要想搞明白这个知识点,在这里你必须要对原型链和原型有清晰的认识。我们知道,JS的大原型其实是Object构造函数的prototype指向的那个Object,JS的世界的来源就是它。

image.png

这个对象上的toString方法才是原汁原味的toString

5.当我们用delete方法去删除Function.prototype(也就是Function构造函数的原型)身上的toString,然后我们再次调用name.toString会发生什么呢?

image.png

6.但是我们往往不会用delete去删除,所以就采用call方法去改变Object.prototype.toString方法this的指向。

image.png

是否恍然大悟了呢?

相关文章
|
2月前
Object.prototype.toString.call() 和 instanceOf 和 Array.isArray() 区别以及优缺点
Object.prototype.toString.call() 和 instanceOf 和 Array.isArray() 区别以及优缺点
21 0
|
2月前
|
JavaScript 前端开发
JavaScript中Object.prototype.toString.call()、instanceOf和Array.isArray()的区别
JavaScript中Object.prototype.toString.call()、instanceOf和Array.isArray()的区别
40 1
|
9月前
|
前端开发 JavaScript 索引
【前端】Object.keys()的使用方法及数组遍历,Object.keys(object).forEach(e => {您的代码})
【前端】Object.keys()的使用方法及数组遍历,Object.keys(object).forEach(e => {您的代码})
86 0
|
9月前
|
前端开发 索引
Object中常用的方法
Object中常用的方法
23 0
|
10月前
|
Python
str'object is not callable
str'object is not callable
234 1
|
JavaScript 前端开发
JavaScript总结:typeof与instanceof的区别,及Object.prototype.toString()方法
JavaScript总结:typeof与instanceof的区别,及Object.prototype.toString()方法
163 0
JavaScript总结:typeof与instanceof的区别,及Object.prototype.toString()方法
|
JavaScript 前端开发
Function(函数)与Object(对象)的关系
Function(函数)与Object(对象)的关系
66 0
String.prototype.matchAll()
String.prototype.matchAll()
64 0
TypeError: this.getOptions is not a function at Object.lessLoader
TypeError: this.getOptions is not a function at Object.lessLoader
250 0
重写toString()这个来自Object类的方法的意义
重写toString()这个来自Object类的方法的意义
96 0