深入解析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,快速升職加薪,走上人生巔峰。