JavaScript for in 語句

程式語言中，語法結構的命名通常與其功能存在一定關聯。

從for in語句這個名稱大致猜測出它的功能，for表示進行迴圈操作，in表示屬性所在的物件。

那麼for in合體可以大致猜測，功能是迴圈遍歷指定物件所具有的屬性。

程式碼例項如下：

[JavaScript] 純文字檢視 複製程式碼執行程式碼
var antzone={
  webName:"螞蟻部落",
  webAddress:"青島市南區",
  age:2
}
for(var prop in antzone){
  console.log(prop);
}

程式碼執行效果截圖如下：

可以看到使用for in語句可以迴圈遍歷物件中的屬性。

[JavaScript] 純文字檢視 複製程式碼執行程式碼
Object.prototype.ant="ES2015"; 
let antzone={
  webName:"螞蟻部落",
  webAddress:"青島市南區",
  age:2,
}
for(let prop in antzone){
  console.log(prop);
}

程式碼執行效果截圖如下：

由上面程式碼的執行結果可以看到，for in不但可以遍歷物件的自有屬性，也會遍歷到來自於原型鏈的屬性。

但是並不是所有原型鏈上的屬性都是可以遍歷到的，比如toString方法繼承自原型鏈，很明顯它並沒有被遍歷到。

因為像toString和toValue等內建屬性或者方法不會被for in遍歷到，所有標準瀏覽器行為一致。

再來看一段程式碼例項：

[JavaScript] 純文字檢視 複製程式碼執行程式碼
let antzone={
  webName:"螞蟻部落",
  webAddress:"青島市南區",
  age:6,
  toString:function(){
    // code
  }
}
for(let prop in antzone){
  console.log(prop);
}

程式碼執行效果截圖如下：

可以看到谷歌瀏覽器成功的遍歷到被重寫的toString方法，不止谷歌，所有標準瀏覽器和IE8+瀏覽器都可以。

再來看一段程式碼例項：

[JavaScript] 純文字檢視 複製程式碼
Object.prototype.toString=function(){
  console.log("JS教程");
}; 
let antzone={
  webName:"螞蟻部落",
  webAddress:"青島市南區",
  age:2,
}
antzone.toString()
for(let prop in antzone){
  console.log(prop);
}

程式碼執行效果截圖如下：

上面程式碼也對原型鏈上的進行了重寫，並且從列印結果來看，重寫完全正確。

但是for in並沒有遍歷到被重寫的內建方法toString。

這是因為toString方法重寫的位置在原型鏈上。

屬性是否可以被列舉：

遍歷和列舉是一個意思。

在前面的程式碼中，貌似只要是自定義屬性都可以被for in遍歷到。

其實並不是這樣，因為自定義屬性的enumerable特性預設值是true，也就是可以列舉，當然也可以設定為false。

程式碼例項如下：

[JavaScript] 純文字檢視 複製程式碼執行程式碼
let antzone={
  webName:"螞蟻部落",
  age:6
}
Object.defineProperty(antzone, "url", {
    value: "http://www.softwhy.com",
    enumerable: false
});
for(var prop in antzone){
  console.log(prop);
}

程式碼執行效果截圖如下：

可以看到屬性url並沒有被遍歷到，因為它被設定為不可列舉。

總結如下：

（1）.for in在所有瀏覽器都可以遍歷可列舉的自有屬性。

（2）.for in在所有瀏覽器都可以遍歷可列舉的原型鏈上的非內建屬性。

（2）.for in可以遍歷在物件自身上重寫的內建屬性，所有標準瀏覽器和IE8+瀏覽器支援。