第一記: 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.寫一方法獲取字符串中出現次數最多的字符?
複製代碼

---

查看答案請閱讀第二記