Javascript for in的缺陷總結(jié)

更新時間：2017年02月03日 15:13:16 投稿：lqh

這篇文章主要介紹了Javascript for in的缺陷總結(jié)的相關(guān)資料,需要的朋友可以參考下

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時也是可遍歷的

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時所有瀏覽器都顯示了clone。

這或許還沒什么，因為一般不建議去擴(kuò)展內(nèi)置構(gòu)造器的原型，這也是Prototype.js走向沒落的原因之一。jQuery和Underscore沒有擴(kuò)展自原型，前者在jQuery對象上做文章，后者索性將所有方法都掛在下劃線上。

但有時我們?yōu)榱思嫒軪S5或后續(xù)版本，會在不支持ES5的瀏覽器上（IE6/7/8）去擴(kuò)展內(nèi)置構(gòu)造器的原型，這時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，其它瀏覽器則無。因為現(xiàn)代瀏覽器中bind是原生支持的，for in不到，IE6/7/8則是給Function.prototype添加了bind。

總結(jié)下：在跨瀏覽器的設(shè)計中，我們不能依賴于for in來獲取對象的成員名稱，一般使用hasOwnProperty來判斷下。

感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！

您可能感興趣的文章:

相關(guān)文章

Bootstrapvalidator校驗、校驗清除重置的實現(xiàn)代碼(推薦)
這篇文章給大家介紹了bootstrapvalidator校驗、校驗清除重置的實現(xiàn)代碼，在代碼中需要我們引入css與js文件，大家可以參考下文的代碼
2016-09-09
詳解webpack-dev-server的簡單使用
本篇文章主要介紹了詳解webpack-dev-server的簡單使用，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-04-04
MvcPager分頁控件適用于Bootstrap
這篇文章主要為大家詳細(xì)介紹了MvcPager分頁控件，修改后適用于Bootstrap，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-06-06
ES5新增數(shù)組的實現(xiàn)方法
這篇文章主要介紹了ES5新增數(shù)組的實現(xiàn)方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-05-05
JS面試題大坑之隱式類型轉(zhuǎn)換實例代碼
這篇文章主要介紹了JS面試題大坑之隱式類型轉(zhuǎn)換實例代碼,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下
2018-10-10
深入理解 ES6中的 Reflect用法
這篇文章主要介紹了深入理解 ES6中的 Reflect用法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-07-07
js跨域請求數(shù)據(jù)的3種常用的方法
這篇文章主要介紹了js跨域請求數(shù)據(jù)的3種常用的方法，需要的朋友可以參考下
2015-12-12
JS實現(xiàn)獲取時間已經(jīng)時間與時間戳轉(zhuǎn)換
這篇文章主要為大家提供了用JavaScript編寫的獲取時間的類，以及時間戳轉(zhuǎn)時間的三種格式，文中的示例代碼講解詳細(xì)，感興趣的可以了解一下
2022-03-03
微信小程序云開發(fā)實現(xiàn)增刪改查功能
這篇文章主要為大家詳細(xì)介紹了微信小程序云開發(fā)實現(xiàn)增刪改查功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2019-05-05
在localStorage中存儲對象數(shù)組并讀取的方法
頻繁ajax請求導(dǎo)致頁面響應(yīng)變慢，所以考慮將數(shù)據(jù)存儲在window.storage中，這樣只需請求一次ajax，接下來通過本文給大家介紹了在localStorage中存儲對象數(shù)組并讀取的方法,需要的朋友可以參考下
2016-09-09