首頁 > web前端 > js教程 > 關於js中for in的缺陷淺析_javascript技巧

關於js中for in的缺陷淺析_javascript技巧

WBOY
發布: 2016-05-16 17:11:08
原創
971 人瀏覽過

for in 語句用來列舉物件的屬性(成員),如下

複製程式碼 代碼如下:

var obj = { name:">

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

注意了嗎,沒有輸出obj的toString,valueOf等內建屬性(或稱為內建成員,隱藏屬性和預先定義屬性)。即for in用來列舉物件的顯示成員(自訂成員)。

如果重寫了內建屬性呢,下面就重寫obj的toString

代碼如下:


var obj = {name:"jack",


var obj = {name:"jack",


var obj = {name:"jack" >      getName:function(){return this.name},
      toString:function(){return "I'm jack."}}

forvar atr in obj) {}

會輸出什麼呢?

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 nert (n)

}

為Object.prototype新增了方法clone,for in時所有瀏覽器都顯示了clone。

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

但有時我們為了相容於ES5或後續版本,會在不支援ES5的瀏覽器上(IE6/7/8)去擴充內建構造器的原型,這時for in在各瀏覽器中就不同了。如下
複製程式碼


程式碼如下:


if (!Function.prototype.bind) {

if (!Function.prototype.bind) {    Function.prototype.bind = function(scope) {
        var fn = this
       
        }
    }
}
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來判斷下。
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板