for in 語句用來列舉對(duì)象的屬性(成員),如下
復(fù)制代碼 代碼如下:
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用來列舉對(duì)象的顯示成員(自定義成員)。
如果重寫了內(nèi)置屬性呢,下面就重寫obj的toString
復(fù)制代碼 代碼如下:
var obj = {name:"jack",
getName:function(){return this.name},
toString:function(){return "I'm jack."}
}
for(var atr in obj) {
alert(atr);
}
會(huì)輸出什么呢?
1、IE6/7/8 下和沒有重寫toString一樣,仍然只輸出name,getName
2、IE9/Firefox/Chrome/Opera/Safari下則輸出name,getName,toString
如果給內(nèi)置原型添加屬性/方法,那么for in時(shí)也是可遍歷的
復(fù)制代碼 代碼如下:
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對(duì)象上做文章,后者索性將所有方法都掛在下劃線上。
但有時(shí)我們?yōu)榱思嫒軪S5或后續(xù)版本,會(huì)在不支持ES5的瀏覽器上(IE6/7/8)去擴(kuò)展內(nèi)置構(gòu)造器的原型,這時(shí)for in在各瀏覽器中就不同了。如下
復(fù)制代碼 代碼如下:
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來獲取對(duì)象的成員名稱,一般使用hasOwnProperty來判斷下。
新聞熱點(diǎn)
疑難解答
圖片精選