第一记: 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) // true
    type.isString(123) // false
复制代码

-每记一问，考考你的小脑袋-

    1.如何判断一个变量是空对象{};
    2.如何截取[object String]里面的String，使用正则，注意，String只是举例，还可能是Array，Function等等
    3.写一方法获取字符串中出现次数最多的字符?
复制代码

---

查看答案请阅读第二记