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 相关文章推荐
js实现翻页后保持checkbox选中状态的实现方法
Nov 03 Javascript
jQuery实现表头固定效果的实例代码
May 24 Javascript
jquery foreach使用示例
Sep 12 Javascript
使用firebug进行调试javascript的示例
Dec 16 Javascript
textarea不能通过maxlength属性来限制字数的解决方法
Sep 01 Javascript
js实现点击图片改变页面背景图的方法
Feb 28 Javascript
jQuery中dom元素上绑定的事件详解
Apr 24 Javascript
jquery获取节点名称
Apr 26 Javascript
JS实现随机颜色的3种方法与颜色格式的转化
Jan 05 Javascript
js处理层级数据结构的方法小结
Jan 17 Javascript
Vue2.0 实现歌手列表滚动及右侧快速入口功能
Aug 08 Javascript
微信小程序仿知乎实现评论留言功能
Nov 28 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
PHP中Enum(枚举)用法实例详解
2015/12/07 PHP
Smarty变量用法详解
2016/05/11 PHP
微信支付开发发货通知实例
2016/07/12 PHP
许愿墙中用到的函数
2006/10/07 Javascript
用javascript实现无刷新更新数据的详细步骤 asp
2006/12/26 Javascript
整理8个很棒的 jQuery 倒计时插件和教程
2011/12/12 Javascript
js实现图片放大缩小功能后进行复杂排序的方法
2012/11/08 Javascript
通过JS自动隐藏手机浏览器的地址栏实现原理与代码
2013/01/02 Javascript
javascript中onclick(this)用法介绍
2013/04/19 Javascript
使用jquery实现以post打开新窗口
2014/03/19 Javascript
jquery弹窗插件colorbox绑定动态生成元素的方法
2014/06/20 Javascript
js处理php输出时间戳对不上号的解决方法
2014/06/20 Javascript
jQuery的:parent选择器定义和用法
2014/07/01 Javascript
JS获取客户端IP地址、MAC和主机名的7个方法汇总
2014/07/21 Javascript
javascript强制点击广告的方法
2015/02/06 Javascript
jQuery插件pagewalkthrough实现引导页效果
2015/07/05 Javascript
原生JS 购物车及购物页面的cookie使用方法
2017/08/21 Javascript
关于Vue的路由权限管理的示例代码
2018/03/06 Javascript
JS原型prototype和__proto__用法实例分析
2020/03/14 Javascript
python计算N天之后日期的方法
2015/03/31 Python
Python输出9*9乘法表的方法
2015/05/25 Python
Python Socket编程之多线程聊天室
2018/07/28 Python
Python使用Flask-SQLAlchemy连接数据库操作示例
2018/08/31 Python
python学生管理系统
2019/01/30 Python
python如何解析配置文件并应用到项目中
2019/06/27 Python
python retrying模块的使用方法详解
2019/09/25 Python
TensorFlow固化模型的实现操作
2020/05/26 Python
html5自带表单验证体验优化及提示气泡修改功能
2017/09/12 HTML / CSS
HTML5实现的图片无限加载的瀑布流效果另带边框圆角阴影
2014/03/07 HTML / CSS
护理毕业生自荐信范文
2013/12/22 职场文书
防沙治沙典型材料
2014/05/07 职场文书
办公楼租房协议书范本
2014/11/25 职场文书
校长师德表现自我评价
2015/03/04 职场文书
同意转租证明
2015/06/24 职场文书
25张裸眼3D图片,带你重温童年的记忆,感受3D的魅力
2022/02/06 杂记
人物搭配车车超萌联名预备中 【咒术迴战】 ⨯ 【天竺鼠车车】 展开合作
2022/04/11 日漫