第一记: JS变量类型判断(VUE源码解读)
学习摘要 :
以前总是对js变量类型的判断模糊不清楚,今天看到vue源码后才恍然大悟原来大神都是这样弄的,所以加以总结,写的不好的请大神们多多吐槽吐槽!!!!!!
Vue 源码
/* 获取值的原始类型字符串, 如 [object Object].*/var _toString = Object.prototype.toString;//通过call的特性获取类型,在通过.slice截取方括号最后的类型想必大家都知道function toRawType (value) {return _toString.call(value).slice(8, -1)}/**严格的对象类型检查。只返回true,这里主要用于普通的javascript对象*/function isPlainObject (obj) {return _toString.call(obj) === '[object Object]'}复制代码
- Object:大家都知道这是 对象的构造函数
- Object.prototype: 对象构造函数的原型对象
- Object.prototype.toString:对象构造函数的原型对象上的toString方法
- toString方法的作用是返回一个对象的字符串形式,默认情况下返回类型字符串。
[提问] : 为什么字符串调用toString方法和对象原型上的toString方法的结果不一样?
Object.prototype.toString('123') // "[object String]"
'123'.toString() // "123"
在控制台输入 new String('123')会发现实列对象的__proto__上面会有内置toString方法.
复制代码
总结 :
- 数组、字符串、函数、Date 对象调用toString方法,并不会返回[object Object],因为它们都自定义了toString方法,覆盖原始方法。
封装
/*判断数据类型@param s {Object Number Function Symbol}
*/
export const type = s => Object.prototype.toString.call(s).slice(8, -1).toLowerCase();['Array','Undefined','Boolean','Number','Function','Symbol','Object'
].forEach(v=>type['is'+v] = s => type(s) === v.toLowerCase())eg: type.isNumber(123) // truetype.isString(123) // false
复制代码
-每记一问,考考你的小脑袋-
1.如何判断一个变量是空对象{};2.如何截取[object String]里面的String,使用正则,注意,String只是举例,还可能是Array,Function等等3.写一方法获取字符串中出现次数最多的字符?
复制代码
查看答案请阅读第二记
第一记: JS变量类型判断(VUE源码解读)相关推荐
- 约2万字-Vue源码解读汇总篇(续更)
约2万字-Vue源码解读汇总篇(续更) 一.前言 1.系列汇总 未完待续... Vue源码解读:06Vue3探索篇 Vue源码解读:05生命周期篇 Vue源码解读:04模板编译篇 Vue源码解读:03 ...
- Vue源码解读(六):update和patch
Vue 的 _update 是实例上的一个私有方法,主要的作用就是把 VNode 渲染成真实的 DOM ,它在首次渲染和数据更新的时候被调用.在数据更新的时候会发生新 VNode 和 旧 VNode ...
- Vue 源码解读(11)—— render helper
当学习成为了习惯,知识也就变成了常识. 感谢各位的 关注.点赞.收藏和评论. 新视频和文章会第一时间在微信公众号发送,欢迎关注:李永宁lyn 文章已收录到 github 仓库 liyongning/b ...
- Vue源码解读(五):render和VNode
Vue 2.0 相比 Vue 1.0 最大的升级就是利用了虚拟DOM. 在 Vue 1.0 中视图的更新是纯响应式的.在进行响应式初始化的时候,一个响应式数据 key 会创建一个对应的 dep,这个 ...
- Vue 源码解读(12)—— patch
当学习成为了习惯,知识也就变成了常识. 感谢各位的 关注.点赞.收藏和评论. 新视频和文章会第一时间在微信公众号发送,欢迎关注:李永宁lyn 文章已收录到 github 仓库 liyongning/b ...
- html标签转化成vnode插件,vue源码解读之html与vNode间的转换
被compiler处理.compiler使用generate(ast, options)方法,将template转换为指定结构的对象. compiler编译 阅读源码逻辑可得,在实际上compiler ...
- Vue源码--解读vue响应式原理
原文链接:https://geniuspeng.github.io/2018/01/05/vue-reactivity/ Vue的官方说明里有深入响应式原理这一节.在此官方也提到过: 当你把一个普通的 ...
- Vue钩子函数中的this为什么能指向Vue的实例而不是指向传入的参数options(Vue源码解读)
起因 先看一段Vue的代码,在Vue的原型链上增加了一个setData方法,然后实例化Vue对象,传入一个Object类型的参数 Vue.prototype.setData = function (k ...
- Vue源码解读-1(世上无难事,只要肯放弃)
从19年开始由于一些原因好久没怎么写博客了,今天心血来潮记录下vue的源码解读历程(可能中间懒了就又停了,世上无难事,只要肯放弃嘛!) 正式开始 准备工作 我们把源码搞下来后,用vscode打开后不要 ...
最新文章
- 2002年3月英伟达发布核弹GPU与大算力自动驾驶芯片
- 通过扩展RandomAccessFile类使之具备Buffer改善I/O性能--转载
- SAP GraphQL on Kyma
- 计算机网络运输层的概述,计算机网络_运输层
- (转)SpringMVC学习(十)——SpringMVC与前台的json数据交互
- 如何以 JAVA call 一個現有的 dll 檔?
- python学习笔记之列表(list)
- Mac 开机没声音了?只需 2 招关闭/恢复Mac开机音效「咚」
- 2.9 使用快捷键快速隐藏和显示行列 [原创Excel教程]
- Python:次方计算
- PHP添加文字图片水印
- 计算机网络笔记02---网络边缘和网络核心
- cart细胞高效制备流程
- 我常用的 15 个 Sketch Plugins
- 《计算广告》_刘鹏_[一]在线广告市场与背景_(2)计算广告基础
- 今天高考╮(╯▽╰)╭
- ([\s\S]*?)正则表达式写法
- vncpasswd 更新登录密码 如何设置短密码 空密码
- MFC编写一个简单的端口扫描器
- 简单易上手的vue3.0+ts实战小项目!!附带后台接口