深入解析JQuery中的isPlainObject()使用方法

本篇文章給大家詳細分析了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

源碼分析

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;
//歡迎加入前端全棧開發交流圈一起吹水聊天學習交流：864305860 
//相當於 Function.prototype.toString.call(Object)
//就是Object 構造函數 轉字符串的結果
// ObjectFunctionString 其實就是 "function Object() { [native code] }" 這樣的一個字符串
var ObjectFunctionString = fnToString.call(Object);
 
function isPlainObject (obj) {
 var proto, Ctor;

總結

從源碼來看，isPlainObject()方法 的實現，主要分三部分
1、去掉類型不是Object 的，
用的是 Object.prototype.toString.call() 方法，這個方法所有類型都會得到不同的字符串，而不是用 typeof，因爲 typeof 只能區分基本類型，比如數組，typeof 返回的還是 “object” 字符串

var arr = [];
var obj = {};
 
typeof arr;    //"object"
typeof obj;    //"object"
typeof document;    //"object"
// 歡迎加入前端全棧開發交流圈一起吹水聊天學習交流：864305860
Object.prototype.toString.call(arr);    //"[object Array]"
Object.prototype.toString.call(obj);    //"[object Object]"
Object.prototype.toString.call(document);    //"[object HTMLDocument]"

2、判斷對象有沒有原型，沒有原型的對象算純粹對象
3、判斷是不是通過 "{}" 或 "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;
//}"
 //歡迎加入前端全棧開發交流圈一起吹水聊天學習交流：864305860 
Function.prototype.toString.call(Object);
//"function Object() { [native code] }"

結語

感謝您的觀看，如有不足之處，歡迎批評指正。

本次給大家推薦一個免費的學習羣，裏面概括移動應用網站開發，css，html，webpack，vue node angular以及面試資源等。
對web開發技術感興趣的同學，歡迎加入Q羣：864305860，不管你是小白還是大牛我都歡迎，還有大牛整理的一套高效率學習路線和教程與您免費分享，同時每天更新視頻資料。
最後，祝大家早日學有所成，拿到滿意offer，快速升職加薪，走上人生巔峯。