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

前端攻城小牛發表於2018-12-29
jQueryAIObject

本篇文章給大家詳細分析了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()方法 的實現，主要分三部分 1、去掉型別不是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
複製程式碼

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;
//}"
//歡迎加入前端全棧開發交流圈一起吹水聊天學習交流：619586920
Function.prototype.toString.call(Object);
//"function Object() { [native code] }"
複製程式碼

結語

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

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

相關文章