Javascript中的for in循環(huán)和hasOwnProperty結(jié)合使用
與in操作符相比,for in 在循環(huán)對(duì)象的屬性時(shí)也會(huì)遍歷原型鏈,for in 不會(huì)讀取不可枚舉屬性,如數(shù)組的length屬性。
// 擴(kuò)展 Object.prototype
Object.prototype.bar = 1;
var foo = {moo: 2};
for(var i in foo) {
console.log(i); // 輸出 bar 和 moo
}
我們不可能改變 for in 循環(huán)的行為,當(dāng)需要對(duì)循環(huán)體內(nèi)某些屬性進(jìn)行過(guò)濾時(shí),可以利用Object.prototype的hasOwnProperty方法來(lái)完成。
提示:因?yàn)?for in 循環(huán)總是遍歷整個(gè)原型鏈,所以當(dāng)遍歷多繼承的對(duì)象時(shí)效率較低。
使用 hasOwnProperty 進(jìn)行過(guò)濾
// 仍舊針對(duì)上例的foo對(duì)象
for (var i in foo) {
if (foo.hasOwnProperty(i)) {
console.log(i);
}
}
例子中因?yàn)槭褂昧薶asOwnProperty,最終輸出moo;如果忽略 hasOwnProperty ,代碼將會(huì)輸出非預(yù)期結(jié)果,因?yàn)楸镜卦停ㄈ鏞bject.prototype)已經(jīng)被擴(kuò)展了。
Prototype框架就是擴(kuò)展Javascript原始對(duì)象的一個(gè)類庫(kù),并被廣泛使用,其缺點(diǎn)也很明顯,當(dāng)框架引入后,如果不使用 hasOwnProperty 進(jìn)行過(guò)濾判斷,輸出結(jié)果保證不是你想要的。
最佳實(shí)踐
推薦在 for in 時(shí),總是使用 hasOwnProperty 進(jìn)行判斷,沒(méi)人可以保證運(yùn)行的代碼環(huán)境是否被污染過(guò)。
hasOwnProperty
為了檢查某個(gè)對(duì)象是否擁有不在原型鏈上的自定義屬性,就有必要用到 hasOwnProperty 方法,任何一個(gè)對(duì)象都具有該方法,它繼承自 Object.prototype。
提示:我們無(wú)法完全檢測(cè)某個(gè)屬性是否是undefined,因?yàn)閷傩杂锌赡艽嬖?,但其值為undefined。hasOwnProperty 是Javascript中唯一一個(gè)可以處理對(duì)象屬性而不遍歷原型鏈的方法。
// 擴(kuò)展 Object.prototype
Object.prototype.bar = 1;
var foo = {goo: undefined};
foo.bar; // 1
'bar' in foo; // true
foo.hasOwnProperty('bar'); // false
foo.hasOwnProperty('goo'); // true
只有 hasOwnProperty 給出了正確的預(yù)期結(jié)果,當(dāng)遍歷對(duì)象的屬性時(shí)這是很有必要的,沒(méi)有其它辦法來(lái)排除定義在對(duì)象原型鏈上的屬性。
hasOwnProperty 作為屬性
Javascript 并沒(méi)有保護(hù) hasOwnProperty 為關(guān)鍵字或保留字,因此,如果某個(gè)對(duì)象擁有同名的屬性,就有必要利用擴(kuò)展的 hasOwnProperty 來(lái)獲取正確結(jié)果。
var foo = {
hasOwnProperty: function() {
return false;
},
bar: 'Here be dragons'
};
foo.hasOwnProperty('bar'); // 總是返回 false
// 使用另一個(gè) hasOwnProperty 并將 this 設(shè)置為 foo 來(lái)調(diào)用它
{}.hasOwnProperty.call(foo, 'bar'); // true
小結(jié)
當(dāng)檢測(cè)某個(gè)對(duì)象是否擁有某個(gè)屬性時(shí),hasOwnProperty 是唯一可以完成這一任務(wù)的方法,在 for in 循環(huán)時(shí),建議增加 hasOwnProperty 進(jìn)行判斷,可以有效避免擴(kuò)展本地原型而引起的錯(cuò)誤。
- js中hasOwnProperty()方法詳解
- js中hasOwnProperty的屬性及實(shí)例用法詳解
- JavaScript中in和hasOwnProperty區(qū)別詳解
- JavaScript hasOwnProperty() 函數(shù)實(shí)例詳解
- JS中的hasOwnProperty()和isPrototypeOf()屬性實(shí)例詳解
- javascript中hasOwnProperty() 方法使用指南
- Javascript學(xué)習(xí)筆記之 對(duì)象篇(三) : hasOwnProperty
- js中的hasOwnProperty和isPrototypeOf方法使用實(shí)例
- js的hasownproperty使用示例
- 理解JAVASCRIPT中hasOwnProperty()的作用
- JS中hasOwnProperty方法用法簡(jiǎn)介
相關(guān)文章
js 判斷圖片是否加載完以及實(shí)現(xiàn)圖片的預(yù)下載
這篇文章主要介紹了js 判斷圖片是否加載完以及實(shí)現(xiàn)圖片的預(yù)下載,需要的朋友可以參考下2014-08-08JavaScript 對(duì)引擎、運(yùn)行時(shí)、調(diào)用堆棧的概述理解
這篇文章旨在深入挖掘JavaScript,以及向大家解釋JavaScript是如何工作的。非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-10-10Echarts.js實(shí)現(xiàn)水滴球和海洋效果
這篇文章介紹了Echarts.js實(shí)現(xiàn)水滴球和海洋效果的方法,文中通過(guò)示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-04-04為JavaScript類型增加方法的實(shí)現(xiàn)代碼(增加功能)
大家在js開發(fā)過(guò)程中有些功能已經(jīng)滿足不了我們的需求,或沒(méi)有我們需要的功能,那么我們就可以自己擴(kuò)展下,個(gè)性化js2011-12-12javascript function調(diào)用時(shí)的參數(shù)檢測(cè)常用辦法
js中并不直接支持類似c#的方法重載,所以只能變相的來(lái)解決,示意代碼:(利用了內(nèi)置屬性arguments)2010-02-02js中數(shù)組(Array)的排序(sort)注意事項(xiàng)說(shuō)明
本篇文章主要是對(duì)js中數(shù)組(Array)的排序(sort)注意事項(xiàng)進(jìn)行了說(shuō)明介紹,需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2014-01-01js實(shí)現(xiàn)一個(gè)猜數(shù)字游戲
本文主要介紹了js實(shí)現(xiàn)一個(gè)猜數(shù)字游戲的實(shí)例代碼。具有很好的參考價(jià)值,下面跟著小編一起來(lái)看下吧2017-03-03如何用RxJS實(shí)現(xiàn)Redux Form
這篇文章主要介紹了如何用RxJS實(shí)現(xiàn)Redux Form,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-12-12TypeScript利用TS封裝Axios實(shí)戰(zhàn)
這篇文章主要介紹了TypeScript利用TS封裝Axios實(shí)戰(zhàn),TypeScript封裝一遍Axios,能進(jìn)一步鞏固TypeScript的基礎(chǔ)知識(shí),需要的小伙伴可以參考一下2022-06-06javascript檢查表單數(shù)據(jù)是否改變的方法
需要檢查用戶是否修改了一個(gè)表單中的內(nèi)容,可以使用本文提供的方法,如果修改了表單的內(nèi)容則返回true,沒(méi)修改則返回false,有需求的朋友可以參考下2013-07-07