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, clone
for (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來判斷下。
留言列表
