Javascript for in的缺陷總結

for in 語句用來列舉對象的屬性(成員)，如下

var obj = { name:"jack",   getName:function(){return this.name}};//輸出name,getName  for(var atr in obj) {  alert(atr);}

注意了嗎，沒有輸出obj的toString，valueOf等內置屬性（或稱內置成員，隱藏屬性和預定義屬性）。即for in用來列舉對象的顯示成員（自定義成員）。

如果重寫了內置屬性呢，下面就重寫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 

如果給內置原型添加屬性/方法，那么for in時也是可遍歷的

Object.prototype.clone = function() {}var obj = {  name: 'jack',  age: 33}// name, age, clonefor (var n in obj) {  alert(n)}

給Object.prototype添加了方法clone，for in時所有瀏覽器都顯示了clone。

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

但有時我們為了兼容ES5或后續版本，會在不支持ES5的瀏覽器上（IE6/7/8）去擴展內置構造器的原型，這時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，其它瀏覽器則無。因為現代瀏覽器中bind是原生支持的，for in不到，IE6/7/8則是給Function.prototype添加了bind。

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

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