深刻解析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
複製代碼

源碼分析

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

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

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

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

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

三、判斷是否是經過 "{}" 或 "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; //}"
//歡迎加入前端全棧開發交流圈一塊兒吹水聊天學習交流：619586920
Function.prototype.toString.call(Object);
//"function Object() { [native code] }"
複製代碼

結語

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

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