jQuery中的isPlainObject()方法 實現原理

說明

jQuery中的isPlainObject() 函數用於判斷指定參數是不是一個純粹的對象，返回值爲Boolean類型。

"純粹的對象"，就是經過 { }、new Object()、Object.create(null) 建立的對象。

這個方法的做用是爲了跟其餘的 JavaScript對象如 null，數組，宿主對象（documents），DOM 等做區分，由於這些用 typeof 都會返回object。

使用

語法：
$.isPlainObject( object )
參數說明：
object：任意類型 須要進行判斷的任意值。

$.isPlainObject({});    //true
$.isPlainObject(new Object);    //true
$.isPlainObject(Object.create(null));    //true
$.isPlainObject([]);    //false
$.isPlainObject(document);    //false

源碼分析

咱們來看看jQuery 3.3.1 版本下的源碼

var class2type = {};

//Object.getPrototypeOf() 方法返回指定對象的原型（內部[[Prototype]]屬性的值）。
var getProto = Object.getPrototypeOf;

//至關於  Object.prototype.toString
var toString = class2type.toString;

//hasOwnProperty() 方法會返回一個布爾值，指示對象自身屬性中是否具備指定的屬性
//至關於 Object.prototype.hasOwnProperty
var hasOwn = class2type.hasOwnProperty;

//由於 hasOwn 是一個函數，因此這裏調用的是內置對象 Function 的toString() 方法
//至關於  Function.prototype.toString
var fnToString = hasOwn.toString;

//至關於  Function.prototype.toString.call(Object)
//就是Object 構造函數 轉字符串的結果
// ObjectFunctionString 其實就是 "function Object() { [native code] }" 這樣的一個字符串
var ObjectFunctionString = fnToString.call(Object);

function isPlainObject (obj) {
  var proto, Ctor;

  //先去掉類型不是 Object 的
  //也就是用 Object.prototype.toString.call(obj) 這種方式，返回值不是 "[object Object]" 的，好比 數組 window history 
  if (!obj || toString.call(obj) !== "[object Object]") {
    return false;
  }

  //獲取對象原型，賦值給 proto 
  proto = getProto(obj);

  //若是對象沒有原型，那也算純粹的對象，好比用 Object.create(null) 這種方式建立的對象 
  if (!proto) {
    return true;
  }

  //最後判斷是否是經過 "{}" 或 "new Object" 方式建立的對象
  //若是 proto 有 constructor屬性，Ctor 的值就爲 proto.constructor，
  //原型的 constructor 屬性指向關聯的構造函數
  Ctor = hasOwn.call(proto, "constructor") && proto.constructor;

  //若是 Ctor 類型是  "function" ，而且調用Function.prototype.toString 方法後獲得的字符串 與 "function Object() { [native code] }" 這樣的字符串相等就返回true
  //用來區分 自定義構造函數和 Object 構造函數
  return typeof Ctor === "function" && fnToString.call(Ctor) === ObjectFunctionString;
}

總結

從源碼來看，isPlainObject()方法 的實現，主要分三部分
一、去掉類型不是Object 的，
用的是 Object.prototype.toString.call() 方法，這個方法全部類型都會獲得不一樣的字符串，而不是用 typeof，由於 typeof 只能區分基本類型，好比數組，typeof 返回的仍是 「object」 字符串

var arr = [];
var obj = {};

typeof arr;        //"object"
typeof obj;        //"object"
typeof document;        //"object"

Object.prototype.toString.call(arr);        //"[object Array]"
Object.prototype.toString.call(obj);        //"[object Object]"
Object.prototype.toString.call(document);        //"[object HTMLDocument]"

二、判斷對象有沒有原型，沒有原型的對象算純粹對象

三、判斷是否是經過 "{}" 或 "new Object" 方式建立的對象
這就要判斷他們的構造函數了，因此用 Function.prototype.toString 方法

Function 對象覆蓋了從 Object 繼承來的 Object.prototype.toString 方法。
函數的 toString 方法會返回一個表示函數源代碼的字符串。具體來講，包括 function關鍵字，形參列表，大括號，以及函數體中的內容。

function fn(said){
    this.say = said;
}

Function.prototype.toString.call(fn); 
//"function fn(said){
//    this.say = said;
//}"

Function.prototype.toString.call(Object);
//"function Object() { [native code] }"

參考文章：
JavaScript專題之類型判斷(下)