Javascript學(xué)習(xí)筆記之 對(duì)象篇(四) : for in 循環(huán)
先上范例:
// Poisoning Object.prototype
Object.prototype.bar = 1;
var foo = {moo: 2};
for(var i in foo) {
console.log(i); // prints both bar and moo
}
這里我們要注意兩點(diǎn),一是 for in 循環(huán)會(huì)忽略 enumerable 設(shè)置為 false 的屬性。例如一個(gè)數(shù)組的 length 屬性。第二是,由于 for in 會(huì)遍歷整個(gè)原型鏈,所以當(dāng)原型鏈過(guò)長(zhǎng)時(shí),會(huì)對(duì)性能造成影響。
enumerable 是個(gè)很陌生的詞匯,實(shí)際上,你很難在 javascript 中發(fā)現(xiàn)它的影子,而它實(shí)際上也是作者從 ruby 中借鑒而來(lái)的。創(chuàng)建 enumerable 的目的不是為了獨(dú)立使用,而是采用“混用”的方式,而 Prototype 中很多方法都混用了 enumerable,所以它可以說(shuō)是 prototype 的奠基石。這里不做詳細(xì)介紹,詳細(xì)內(nèi)容可以參考 - Enumerable。
由于我們沒(méi)法改變 for in 循環(huán)本身的行為,所以我們只能采取其他方法來(lái)過(guò)濾掉那些不希望出現(xiàn)在循環(huán)內(nèi)的屬性,通過(guò) 《Javascript學(xué)習(xí)筆記之對(duì)象篇(三) : hasOwnProperty》 我們知道 hasOwnProperty 方法是可以做到這一點(diǎn)的。
使用 hasOwnProperty 過(guò)濾
仍然使用上個(gè)例子:
// Poisoning Object.prototype
Object.prototype.bar = 1;
var foo = {moo: 2};
for(var i in foo) {
if (foo.hasOwnProperty(i)) {
console.log(i);
}
}
這是唯一正確的寫(xiě)法,由于我們實(shí)用了 hasOwnProperty 方法,所以這次只輸出 moo。如果不適用 hasOwnProperty 方法,那么當(dāng) Object.prototype 擴(kuò)展時(shí),就會(huì)出現(xiàn)錯(cuò)誤。
現(xiàn)在很多框架都會(huì)選擇從 Object.prototype 擴(kuò)展方法,所以我們使用這些框架時(shí),如果使用沒(méi)有用 hasOwnProperty 過(guò)濾的 for in 循環(huán)時(shí)就會(huì)遇到問(wèn)題。
總結(jié)
建議養(yǎng)成 hasOwnProperty 過(guò)濾屬性的好習(xí)慣,不要對(duì)運(yùn)行環(huán)境做任何假設(shè),也無(wú)論原生的原型對(duì)象是否被擴(kuò)展。
相關(guān)文章
菜鳥(niǎo)javascript基礎(chǔ)資料整理2
JavaScript 對(duì)象,這里涉及到變量與數(shù)組等的使用。2010-12-12
簡(jiǎn)介JavaScript中toTimeString()方法的使用
這篇文章主要介紹了簡(jiǎn)介JavaScript中toTimeString()方法的使用,是JS入門(mén)學(xué)習(xí)中的基礎(chǔ)知識(shí),需要的朋友可以參考下2015-06-06
使用?Next.js?Cli?快速搭建和運(yùn)行?Web?應(yīng)用
這篇文章主要介紹了使用?Next.js?Cli?快速搭建和運(yùn)行?Web?應(yīng)用,需要的朋友可以參考下2024-04-04
設(shè)計(jì)模式中的facade外觀模式在JavaScript開(kāi)發(fā)中的運(yùn)用
外觀模式通過(guò)引入一個(gè)外觀角色來(lái)簡(jiǎn)化客戶(hù)端與子系統(tǒng)之間的交互,為復(fù)雜的子系統(tǒng)調(diào)用提供一個(gè)統(tǒng)一的入口,降低子系統(tǒng)與客戶(hù)端的耦合,接下來(lái)就來(lái)看設(shè)計(jì)模式中的facade外觀模式在JavaScript開(kāi)發(fā)中的運(yùn)用2016-05-05
詳解原生JS動(dòng)態(tài)添加和刪除類(lèi)
這篇文章主要介紹了原生JS動(dòng)態(tài)添加和刪除類(lèi),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
JavaScript實(shí)現(xiàn)關(guān)鍵字高亮功能
關(guān)鍵詞高亮技術(shù)各大CMS基本上都有,但基本都是后端代碼來(lái)實(shí)現(xiàn)的,今天我們探討下如何使用javascript來(lái)實(shí)現(xiàn)代碼高亮技術(shù)。2014-11-11
JS不用正則驗(yàn)證輸入的字符串是否為空(包含空格)的實(shí)現(xiàn)代碼
下面小編就為大家?guī)?lái)一篇JS不用正則驗(yàn)證輸入的字符串是否為空(包含空格)的實(shí)現(xiàn)代碼。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-06-06

