詳解jQuery中的isPlainObject()使用方法
說(shuō)明
jQuery中的isPlainObject() 函數(shù)用于判斷指定參數(shù)是否是一個(gè)純粹的對(duì)象,返回值為Boolean類(lèi)型。
"純粹的對(duì)象",就是通過(guò) { }、new Object()、Object.create(null) 創(chuàng)建的對(duì)象。
這個(gè)方法的作用是為了跟其他的 JavaScript對(duì)象如 null,數(shù)組,宿主對(duì)象(documents),DOM 等作區(qū)分,因?yàn)檫@些用 typeof 都會(huì)返回object。
使用
語(yǔ)法:
$.isPlainObject( object )
參數(shù)說(shuō)明:
object:任意類(lèi)型 需要進(jìn)行判斷的任意值。
$.isPlainObject({}); //true $.isPlainObject(new Object); //true $.isPlainObject(Object.create(null)); //true $.isPlainObject([]); //false $.isPlainObject(document); //false
源碼分析
我們來(lái)看看jQuery 3.3.1 版本下的源碼:https://github.com/jquery/jquery/blob/ac9e3016645078e1e42120822cfb2076151c8cbe/src/core.js#L236
var class2type = {}; //Object.getPrototypeOf() 方法返回指定對(duì)象的原型(內(nèi)部[[Prototype]]屬性的值)。 var getProto = Object.getPrototypeOf; //相當(dāng)于 Object.prototype.toString var toString = class2type.toString; //hasOwnProperty() 方法會(huì)返回一個(gè)布爾值,指示對(duì)象自身屬性中是否具有指定的屬性 //相當(dāng)于 Object.prototype.hasOwnProperty var hasOwn = class2type.hasOwnProperty; //因?yàn)?hasOwn 是一個(gè)函數(shù),所以這里調(diào)用的是內(nèi)置對(duì)象 Function 的toString() 方法 //相當(dāng)于 Function.prototype.toString var fnToString = hasOwn.toString; //相當(dāng)于 Function.prototype.toString.call(Object) //就是Object 構(gòu)造函數(shù) 轉(zhuǎn)字符串的結(jié)果 // ObjectFunctionString 其實(shí)就是 "function Object() { [native code] }" 這樣的一個(gè)字符串 var ObjectFunctionString = fnToString.call(Object); function isPlainObject (obj) { var proto, Ctor;
總結(jié)
從源碼來(lái)看,isPlainObject()方法 的實(shí)現(xiàn),主要分三部分
1、去掉類(lèi)型不是Object 的,
用的是 Object.prototype.toString.call() 方法,這個(gè)方法所有類(lèi)型都會(huì)得到不同的字符串,而不是用 typeof,因?yàn)?typeof 只能區(qū)分基本類(lèi)型,比如數(shù)組,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]"
2、判斷對(duì)象有沒(méi)有原型,沒(méi)有原型的對(duì)象算純粹對(duì)象
3、判斷是不是通過(guò) "{}" 或 "new Object" 方式創(chuàng)建的對(duì)象
這就要判斷他們的構(gòu)造函數(shù)了,所以用 Function.prototype.toString 方法
Function 對(duì)象覆蓋了從 Object 繼承來(lái)的 Object.prototype.toString 方法。
函數(shù)的 toString 方法會(huì)返回一個(gè)表示函數(shù)源代碼的字符串。具體來(lái)說(shuō),包括 function關(guān)鍵字,形參列表,大括號(hào),以及函數(shù)體中的內(nèi)容。
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] }"
相關(guān)文章
JQuery實(shí)現(xiàn)的購(gòu)物車(chē)功能(可以減少或者添加商品并自動(dòng)計(jì)算價(jià)格)
這篇文章主要介紹了JQuery實(shí)現(xiàn)的購(gòu)物車(chē)功能(可以減少或者添加商品并自動(dòng)計(jì)算價(jià)格),本文的這個(gè)模擬實(shí)現(xiàn)的購(gòu)物車(chē)難登大雅之堂,但是可以從中得到一些啟發(fā)或者相關(guān)的知識(shí)點(diǎn),需要的朋友可以參考下2015-01-01Jquery 實(shí)現(xiàn)Tab效果 思路是js思路
Jquery 實(shí)現(xiàn)Tab效果,思路就是普通的用js的思路控制的,腳本之家發(fā)布過(guò)更精簡(jiǎn)的代碼,這個(gè)比較適合一直用js開(kāi)始學(xué)用jquery控制的朋友一個(gè)參考。2010-03-03jQuery CSS3自定義美化Checkbox實(shí)現(xiàn)代碼
這篇文章主要為大家詳細(xì)介紹了jQuery CSS3自定義美化Checkbox實(shí)現(xiàn)代碼,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-05-05Jquery解析json字符串及json數(shù)組的方法
這篇文章主要介紹了Jquery解析json字符串及json數(shù)組的方法,實(shí)例分析了jQuery操作json格式字符串與數(shù)組的相關(guān)技巧,需要的朋友可以參考下2015-05-05jQuery+Ajax+PHP+Mysql實(shí)現(xiàn)分頁(yè)顯示數(shù)據(jù)實(shí)例講解
這是一個(gè)典型的Ajax應(yīng)用,在頁(yè)面上,您只需要點(diǎn)擊“下一頁(yè)”,數(shù)據(jù)區(qū)將自動(dòng)加載對(duì)應(yīng)頁(yè)碼的數(shù)據(jù),重新刷新數(shù)據(jù)區(qū)。類(lèi)似的效果在很多網(wǎng)站上應(yīng)用,尤其在一些需要展示大量圖片數(shù)據(jù)的網(wǎng)頁(yè)如淘寶商品列表頁(yè),Ajax分頁(yè)效果讓您的網(wǎng)站數(shù)據(jù)加載顯得非常流暢。2015-09-09jQuery實(shí)現(xiàn)MSN中文網(wǎng)滑動(dòng)Tab菜單效果代碼
這篇文章主要介紹了jQuery實(shí)現(xiàn)MSN中文網(wǎng)滑動(dòng)Tab菜單效果代碼,基于jQuery鼠標(biāo)事件實(shí)現(xiàn)頁(yè)面元素屬性動(dòng)態(tài)切換的功能,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09基于jquery擴(kuò)展漂亮的CheckBox(自己編寫(xiě))
默認(rèn)的html復(fù)選框控件樣式可定義相當(dāng)有限,下面就與大家分享下自己編寫(xiě)的CheckBox控件。喜歡的朋友可以拿去使用2013-11-11jQuery實(shí)現(xiàn)按鈕點(diǎn)擊遮罩加載及處理完后恢復(fù)的效果
這篇文章主要介紹了jQuery實(shí)現(xiàn)按鈕點(diǎn)擊遮罩加載及處理完后恢復(fù)的效果,涉及jQuery與asp.net后臺(tái)交互實(shí)現(xiàn)頁(yè)面效果動(dòng)態(tài)變換的相關(guān)技巧,需要的朋友可以參考下2016-06-06jquery中toggle函數(shù)交替使用問(wèn)題
jQuery 的toggle()函數(shù)使用show()或hide()函數(shù)來(lái)切換HTML元素的可見(jiàn)狀態(tài)。今天我們來(lái)探討下jquery中toggle函數(shù)交替使用問(wèn)題2015-06-06