Vue源码中要const _toStr = Object.prototype.toString的原因分析


Posted in Javascript onDecember 09, 2018

在vue的源码中,vue/src/shared/util.js文件中存放的是一些方法。其中作者用了Object.prototype.toString这个方法来判断类型,但是并没有直接用,而是单独保存在一个变量:

const _toStr = Object.prototype.toString

那么为什么要这么做呢?

先说下判断类型。众所周知,typeof在判断对象时不能正确判断Null,并且不能识别出Array,但在判断基础类型时是没问题的。所以尤大也写了:

export function isPrimitive (value: any): boolean %checks {
 return (
 typeof value === 'string' ||
 typeof value === 'number' ||
 // $flow-disable-line
 typeof value === 'symbol' ||
 typeof value === 'boolean'
 )
}

判断Object也做了区分,isObject和isPlainObject :

export function isObject (obj: mixed): boolean %checks {
 return obj !== null && typeof obj === 'object'
}
export function isPlainObject (obj: any): boolean {
 return _toString.call(obj) === '[object Object]'
}

到了判断复杂类型的时候,一般我们用Object.prototype.toString或者是instanceof。如果是前者的话会返回类似'[object Object]'的字符串。后者则会判断一个对象的原型链上是否存在一个构造函数。

两者还有一些不同。Object.prototype.toString.call(1) Object.prototype.toString.call(Number(1))时,返回的都是"[object Number]",也就是说,它并不能区分原始类型和复杂类型。可见,Object.prototype.toString.call并不像很多教程说的那样好用。

Object.prototype.toString.call(1)
"[object Number]"
Object.prototype.toString.call(Number(1))
"[object Number]"

如果要使用,就需要像尤大一样,把原始类型单独拎出来判断,再去判断复杂类型,而走到这一步的时候尤大就写了上面说那行const _toStr。这是因为,toString实在是太容易被重写了。如果toString被其他人重写,将会对代码中涉及到的部分造成影响,所以就保存下来防止这种情况发生。

补充:Object.prototype.toString方法的原理

前言

我们在判断一个对象的内置类型时,我们一般可以使用以下方法:

var arr = [];
console.log(Object.prototype.toString.call(arr)) //"[object Array]"

那么,这个方法的原理是什么呢?

ECMAScript 3

在toString方法被调用时,会执行下面的操作步骤:

1. 获取this对象的[[Class]]属性的值.

2. 计算出三个字符串"[object ", 第一步的操作结果Result(1), 以及 "]"连接后的新字符串.

3. 返回第二步的操作结果Result(2).

[[Class]]是一个内部属性,所有的对象(原生对象和宿主对象)都拥有该属性.在规范中,[[Class]]是这么定义的

[[Class]] 一个字符串值,表明了该对象的类型.

然后给了一段解释:

所有内置对象的[[Class]]属性的值是由本规范定义的.所有宿主对象的[[Class]]属性的值可以是任意值,甚至可以是内置对象使用过的[[Class]]属性的值.[[Class]]属性的值可以用来判断一个原生对象属于哪种内置类型.需要注意的是,除了通过Object.prototype.toString方法之外,本规范没有提供任何其他方式来让程序访问该属性的值。

ECMAScript 5

在toString方法被调用时,会执行下面的操作步骤

如果this的值为undefined,则返回"[object Undefined]".
如果this的值为null,则返回"[object Null]".
让O成为调用ToObject(this)的结果.
让class成为O的内部属性[[Class]]的值.
返回三个字符串"[object ", class, 以及 "]"连接后的新字符串.
ES5中,[[Class]]属性的解释更加详细:

所有内置对象的[[Class]]属性的值是由本规范定义的.所有宿主对象的[[Class]]属性的值可以是除了"Arguments", "Array", "Boolean", "Date", "Error", "Function", "JSON", "Math", "Number", "Object", "RegExp", "String"之外的的任何字符串.[[Class]]内部属性是引擎内部用来判断一个对象属于哪种类型的值的.需要注意的是,除了通过Object.prototype.toString方法之外,本规范没有提供任何其他方式来让程序访问该属性的值。

总而言之,要获取一个对象的真实的内置类型,我们需要通过获取[[Class]]的属性值,在es5之前,该属性值只能通由Object.prototype.toString来访问,因此,通过Object.prototype.toString.call(arr)改变tostring方法的this指向,从而获得对象的内置类型。

总结

以上所述是小编给大家介绍的Vue源码中要const _toStr = Object.prototype.toString的原因分析,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
asp.net+js 实现无刷新上传解析csv文件的代码
May 17 Javascript
js下通过prototype扩展实现indexOf的代码
Dec 08 Javascript
Javascript 倒计时源代码.(时.分.秒) 详细注释版
May 09 Javascript
js onkeypress与onkeydown 事件区别详细说明
Dec 13 Javascript
Javascript跨域请求的4种解决方式
Mar 17 Javascript
Java  Spring 事务回滚详解
Oct 17 Javascript
JS实现批量上传文件并显示进度功能
Jun 27 Javascript
Javasript设计模式之链式调用详解
Apr 26 Javascript
JavaScript事件委托原理与用法实例分析
Jun 07 Javascript
小程序视频或音频自定义可拖拽进度条的示例代码
Sep 30 Javascript
在Vue中使用HOC模式的实现
Aug 23 Javascript
JS一分钟在github+Jekyll的博客中添加访问量功能的实现
Apr 03 Javascript
vue form check 表单验证的实现代码
Dec 09 #Javascript
关于Vue Router中路由守卫的应用及在全局导航守卫中检查元字段的方法
Dec 09 #Javascript
vue打包之后生成一个配置文件修改接口的方法
Dec 09 #Javascript
基于Vue-Cli 打包自动生成/抽离相关配置文件的实现方法
Dec 09 #Javascript
JS数组去重的6种方法完整实例
Dec 08 #Javascript
原生JS实现的放大镜特效示例【测试可用】
Dec 08 #Javascript
JS实现的小火箭发射动画效果示例
Dec 08 #Javascript
You might like
PHP4实际应用经验篇(6)
2006/10/09 PHP
PHP 中文处理技巧
2010/04/25 PHP
PHP配置把错误日志以邮件方式发送方法(Windows系统)
2015/06/23 PHP
PHP商品秒杀问题解决方案实例详解【mysql与redis】
2019/07/22 PHP
PHP的imageTtfText()函数深入详解
2021/03/03 PHP
extjs关于treePanel+chekBox全部选中以及清空选中问题探讨
2013/04/02 Javascript
JavaScript动态操作表格实例(添加,删除行,列及单元格)
2013/11/25 Javascript
JS按回车键实现登录的方法
2014/08/25 Javascript
jQuery带箭头提示框tooltips插件集锦
2014/11/17 Javascript
js模糊查询实例分享
2016/12/26 Javascript
AngularJs返回前一页面时刷新一次前面页面的方法
2018/10/09 Javascript
Vue 3.x+axios跨域方案的踩坑指南
2019/07/04 Javascript
Android 自定义view仿微信相机单击拍照长按录视频按钮
2019/07/19 Javascript
Python守护进程用法实例分析
2015/06/04 Python
python批量替换页眉页脚实例代码
2018/01/22 Python
几种实用的pythonic语法实例代码
2018/02/24 Python
Python使用win32 COM实现Excel的写入与保存功能示例
2018/05/03 Python
tensorflow 获取模型所有参数总和数量的方法
2018/06/14 Python
Python PO设计模式的具体使用
2019/08/16 Python
IronPython连接MySQL的方法步骤
2019/12/27 Python
Python使用uuid库生成唯一标识ID
2020/02/12 Python
python检查目录文件权限并修改目录文件权限的操作
2020/03/11 Python
Python pandas 列转行操作详解(类似hive中explode方法)
2020/05/18 Python
美丽的珠宝配饰:SmallThings
2019/09/04 全球购物
买房子个人收入证明
2014/01/16 职场文书
幼儿园校车司机的岗位职责
2014/01/30 职场文书
军训自我鉴定怎么写
2014/02/13 职场文书
社区母亲节活动方案
2014/03/05 职场文书
马智宇婚礼主持词
2014/03/22 职场文书
法人授权委托书
2014/09/16 职场文书
财务会计岗位职责
2015/02/03 职场文书
2015年农村党员干部主题教育活动总结
2015/03/25 职场文书
银行岗位培训心得体会
2016/01/09 职场文书
幼儿园教学反思范文
2016/03/02 职场文书
2016年小学六一儿童节活动总结
2016/04/06 职场文书
MySQL RC事务隔离的实现
2022/03/31 MySQL