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 相关文章推荐
Code:findPosX 和 findPosY
Dec 20 Javascript
用javascript父窗口控制只弹出一个子窗口
Apr 10 Javascript
人人网javascript面试题 可以提前实现下
Jan 05 Javascript
jQuery实现数秒后自动提交form的方法
Mar 05 Javascript
js生成随机数的过程解析
Nov 24 Javascript
解决WordPress使用CDN后博文无法评论的错误
Dec 15 Javascript
微信小程序 转发功能的实现
Aug 04 Javascript
使用mint-ui开发项目的一些心得(分享)
Sep 07 Javascript
详解vue填坑之解决部分浏览器不支持pushState方法
Jul 12 Javascript
详解基于Vue,Nginx的前后端不分离部署教程
Dec 04 Javascript
微信小程序时间控件picker view使用详解
Dec 28 Javascript
JavaScript 接口原理与用法实例详解
May 12 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
YB217、YB235、YB400浅听
2021/03/02 无线电
php获取网页请求状态程序示例
2014/06/17 PHP
php源码分析之DZX1.5加密解密函数authcode用法
2015/06/17 PHP
php技术实现加载字体并保存成图片
2015/07/27 PHP
JavaScript中null与undefined分析
2009/07/25 Javascript
js 页面关闭前的出现提示的实现代码
2011/05/25 Javascript
js中的数组Array定义与sort方法使用示例
2013/08/29 Javascript
JavaScript函数获取事件源的小例子
2014/05/14 Javascript
基于jquery实现的自动补全功能
2015/03/12 Javascript
javascript关于继承解析
2016/05/10 Javascript
详解数组Array.sort()排序的方法
2020/05/09 Javascript
JavaScript仿微信(电话)联系人列表滑动字母索引实例讲解(推荐)
2017/08/16 Javascript
使用MUI框架模拟手机端的下拉刷新和上拉加载功能
2017/09/04 Javascript
NodeJS模块与ES6模块系统语法及注意点详解
2019/01/04 NodeJs
微信小程序实现多行文字超出部分省略号显示功能
2019/10/23 Javascript
mpvue实现微信小程序快递单号查询代码
2020/04/03 Javascript
openlayers4实现点动态扩散
2020/08/17 Javascript
Vue中inheritAttrs的使用实例详解
2020/12/31 Vue.js
在Django的视图(View)外使用Session的方法
2015/07/23 Python
安装Python和pygame及相应的环境变量配置(图文教程)
2017/06/04 Python
Python基于回溯法子集树模板实现图的遍历功能示例
2017/09/05 Python
pandas 按照特定顺序输出的实现代码
2018/07/10 Python
面向初学者的Python编辑器Mu
2018/10/08 Python
python求最大公约数和最小公倍数的简单方法
2020/02/13 Python
python链表类中获取元素实例方法
2021/02/23 Python
美国婚礼和派对礼品网站:Kate Aspen(新娘送礼会、迎婴派对)
2018/03/28 全球购物
6PM官网:折扣鞋、服装及配饰
2018/08/03 全球购物
计算机应用专业毕业生求职信
2013/10/24 职场文书
函授本科自我鉴定
2013/11/03 职场文书
售后服务经理岗位职责范本
2014/02/22 职场文书
公司爱心捐款倡议书
2014/05/14 职场文书
乡镇党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
博士论文答辩开场白
2015/06/01 职场文书
幼儿园奖惩制度范本
2015/08/05 职场文书
2016春季田径运动会广播稿
2015/12/21 职场文书
Python opencv缺陷检测的实现及问题解决
2021/04/24 Python