Javascript for in的缺陷總結(jié)
Javascript for in的缺陷總結(jié)
for in 語句用來列舉對象的屬性(成員),如下
var obj = { name:"jack", getName:function(){return this.name} }; //輸出name,getName for(var atr in obj) { alert(atr); }
注意了嗎,沒有輸出obj的toString,valueOf等內(nèi)置屬性(或稱內(nèi)置成員,隱藏屬性和預(yù)定義屬性)。即for in用來列舉對象的顯示成員(自定義成員)。
如果重寫了內(nèi)置屬性呢,下面就重寫obj的toString
var obj = {name:"jack", getName:function(){return this.name}, toString:function(){return "I'm jack."} } for(var atr in obj) { alert(atr); }
會輸出什么呢?
1、IE6/7/8 下和沒有重寫toString一樣,仍然只輸出name,getName
2、IE9/Firefox/Chrome/Opera/Safari下則輸出name,getName,toString
如果給內(nèi)置原型添加屬性/方法,那么for in時(shí)也是可遍歷的
Object.prototype.clone = function() {} var obj = { name: 'jack', age: 33 } // name, age, clone for (var n in obj) { alert(n) }
給Object.prototype添加了方法clone,for in時(shí)所有瀏覽器都顯示了clone。
這或許還沒什么,因?yàn)橐话悴唤ㄗh去擴(kuò)展內(nèi)置構(gòu)造器的原型,這也是Prototype.js走向沒落的原因之一。jQuery和Underscore沒有擴(kuò)展自原型,前者在jQuery對象上做文章,后者索性將所有方法都掛在下劃線上。
但有時(shí)我們?yōu)榱思嫒軪S5或后續(xù)版本,會在不支持ES5的瀏覽器上(IE6/7/8)去擴(kuò)展內(nèi)置構(gòu)造器的原型,這時(shí)for in在各瀏覽器中就不同了。如下
if (!Function.prototype.bind) { Function.prototype.bind = function(scope) { var fn = this return function () { fn.apply(scope, arguments) } } } function greet(name) { alert(this.greet + ', ' + name) } for (var n in greet) { alert(n) }
IE6/7/8輸出了bind,其它瀏覽器則無。因?yàn)楝F(xiàn)代瀏覽器中bind是原生支持的,for in不到,IE6/7/8則是給Function.prototype添加了bind。
總結(jié)下:在跨瀏覽器的設(shè)計(jì)中,我們不能依賴于for in來獲取對象的成員名稱,一般使用hasOwnProperty來判斷下。
感謝閱讀,希望能幫助到大家,謝謝大家對本站的支持!
- js字符串的各種格式的轉(zhuǎn)換 ToString,F(xiàn)ormat
- javascript 循環(huán)語句 while、do-while、for-in、for用法區(qū)別
- JavaScript中for..in循環(huán)陷阱介紹
- 在Linux上用forever實(shí)現(xiàn)Node.js項(xiàng)目自啟動
- 關(guān)于js中for in的缺陷淺析
- JavaScript中for-in遍歷方式示例介紹
- 得到form下的所有的input的js代碼
- 為javascript添加String.Format方法
- js使用for循環(huán)與innerHTML獲取選中tr下td值
- js在指定位置增加節(jié)點(diǎn)函數(shù)insertBefore()用法實(shí)例
相關(guān)文章
JavaScript+html5 canvas制作色彩斑斕的正方形效果
這篇文章主要介紹了JavaScript+html5 canvas制作色彩斑斕的正方形效果,實(shí)例分析了JavaScript結(jié)合html5 canvas實(shí)現(xiàn)圖形動態(tài)繪制的技巧,需要的朋友可以參考下2016-01-01一文教你用純JS實(shí)現(xiàn)一個(gè)五子棋游戲
實(shí)現(xiàn)一個(gè)五子棋游戲, 簡要分析其原理, 頁面并沒有很花哨, 原理搞懂了, 后面的就是很輕松的事了,本文給大家介紹了如何用純JS實(shí)現(xiàn)一個(gè)五子棋游戲,文中通過代碼示例給大家介紹的非常詳細(xì),具有一定的參考價(jià)值,需要的朋友可以參考下2023-12-12JS數(shù)據(jù)類型(基本數(shù)據(jù)類型、引用數(shù)據(jù)類型)及堆和棧的區(qū)別分析
這篇文章主要介紹了JS數(shù)據(jù)類型(基本數(shù)據(jù)類型、引用數(shù)據(jù)類型)及堆和棧的區(qū)別,結(jié)合實(shí)例形式分析了JS基本數(shù)據(jù)類型、引用數(shù)據(jù)類型概念、用法,以及堆和棧的區(qū)別,需要的朋友可以參考下2020-03-03小程序云開發(fā)教程如何使用云函數(shù)實(shí)現(xiàn)點(diǎn)贊功能
這篇文章主要為大家詳細(xì)介紹了小程序云開發(fā)教程如何使用云函數(shù)實(shí)現(xiàn)點(diǎn)贊功能,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-05-05JavaScript實(shí)現(xiàn)簡單進(jìn)度條效果
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)簡單進(jìn)度條效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-03-03在knockoutjs 上自己實(shí)現(xiàn)的flux(實(shí)例講解)
下面小編就為大家分享一篇在knockoutjs 上自己實(shí)現(xiàn)的flux方法,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2017-12-12淺析JavaScript的幾種Math函數(shù),random(),ceil(),round(),floor()
本文主要對JavaScript的幾種Math函數(shù),random(),ceil(),round(),floor()的作用進(jìn)行簡要解析,具有很好的參考價(jià)值,需要的朋友一起來看下吧2016-12-12微信小程序獲取微信運(yùn)動步數(shù)的實(shí)例代碼
本篇文章主要介紹了微信小程序微信運(yùn)動步數(shù)的實(shí)例代碼,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-07-07