学习摘要 :
以前总是对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) // true type.isString(123) // false复制代码
-每记一问,考考你的小脑袋-
1.如何判断一个变量是空对象{}; 2.如何截取[object String]里面的String,使用正则,注意,String只是举例,还可能是Array,Function等等 3.写一方法获取字符串中出现次数最多的字符?复制代码
查看答案请阅读第二记