js_javascript スキルにおける for in の欠陥の簡単な分析

for in ステートメントは、次のようにオブジェクトの属性 (メンバー) をリストするために使用されます

コードをコピー コードは次のとおりです:

var obj = { name: "jack" ,
getName:function(){return this.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) {
アラート (atr);
}

何が出力されますか?
1. IE6/7/8 では、toString を書き換えない場合と同じです。
2. IE9/Firefox/Chrome/Opera/Safari では、name, getName を出力します。 toString

組み込みプロトタイプに属性/メソッドを追加すると、

の for 実行中にもトラバース可能になります。

コードをコピー コードは次のとおりです。

Object.prototype.clone = function() {}
var obj = {
name: 'jack',
age: 33
}
// name, age, clone
for (var n in obj) {
アラート (n)
}

メソッド clone を Object.prototype に追加し、すべてのブラウザで for の場合に clone が表示されます。

組み込みコンストラクターのプロトタイプを拡張することは一般に推奨されていないため、これは大したことではないかもしれません。これが Prototype.js の衰退の理由の 1 つでもあります。 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, argument)
}
}
}
function welcome(name) {
alert(this.greet ', ' name)
}
for (greet の var n) {
alert(n)
}

IE6/7/8 の出力はバインドされますが、他のブラウザーはバインドされません。最新のブラウザではバインドがネイティブにサポートされており、for in は使用できないため、IE6/7/8 では Function.prototype にバインドを追加します。

要約すると: クロスブラウザー設計では、オブジェクトのメンバー名を取得するために for in に依存することはできません。通常、hasOwnProperty を使用して判断します。