JavaScript でのコード スニッフィングによるネイティブ オブジェクトとプロトタイプの拡張_JavaScript のヒント

注: 翻訳に不適切な点があった場合は、修正してください。皆様が幸せなダブルホリデーを過ごせることをお祈りしています。
特別なニーズなしにネイティブ オブジェクトやプロトタイプを拡張することは良いことではありません

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

//これは行わないでください
Array.prototype.map = function() {
// 何らかのコード
};たとえば、一部の古いブラウザに ECMAScript5 メソッドを追加するなど、そうする価値があります。
この場合、通常はこれを行います:

コードをコピーします コードは次のとおりです: if (!Array.prototype.map) {

Array.prototype.map = function() {

//コード
}


もっと偏執的な場合は、他の人がマップを true やその他の予期しない値として定義するのを防ぐために、検出コードを次のように変更できます:

コードをコピーします

コードは次のとおりです: if (typeof Array.prototype.map !== "function") { Array.prototype .map = function() {

// 一部のコード

}


(ただし、これは他の開発者のマップ定義を壊し、その関数の実装に影響します)
ただし、敵対的で競争的な環境では (つまり、JS ライブラリを提供または使用する場合)、誰も信頼すべきではありません。他の人の JS コードが自分の JS コードより先にロードされ、ES5 と完全に互換性のない Map() メソッドが何らかの理由で定義されていて、コードが適切に実行されなくなった場合はどうすればよいでしょうか。

ただし、Webkit カーネルが map() メソッドを実装している場合は、このメソッドが確実に正常に実行されるので安心してください。それ以外の場合は、コードを使用して検出する必要があります。

幸いなことに、これは JavaScript で簡単に実装できます。ネイティブ関数の toString メソッドを呼び出すと、関数の関数本体が [ネイティブ コード] として返されます。
たとえば、Chrome コンソールで:




コードをコピーします

コードは次のとおりです: > ; Array.prototype.map.toString(); "function map() { [ネイティブ コード] }"

適切なコード検査は常に少々不快なものです。ブラウザによってスペースや改行の扱いが軽すぎるためです。テストは次のとおりです:

コードをコピーします

コードは次のとおりです: Array.prototype .map.toString() .replace(/s/g, '*'); // "*function*map()*{*****[ネイティブ*コード]*}*" // IE // " function*map()*{*****[native*code]*}" // FF

// "function*map()*{*[native*code]*} " // Chrome

s を削除するだけで、より実用的な文字列になります:

コードをコピー

コードは次のとおりです。 Array.prototype.map.toString().replace(/s/g, ''); // "functionmap(){[nativecode] }"

これを再利用可能な shim() 関数にカプセル化すると、次のようなすべての操作を繰り返す必要がなくなります。

Array.prototype... など操作。この関数は、パラメーターとしてオブジェクト (たとえば、Array.prototype)、追加されるプロパティ (たとえば、「map」)、および追加される関数を受け入れます。

コードをコピー

コードは次のとおりです。 function shim(o, prop, fn) { var nbody = "function" prop "(){[nativecode]}"; if (o.hasOwnProperty(prop) &&

o[prop].toString().replace(/s/ g, ' ') === nbody) {

//テーブル名はネイティブです。
return true;
}
//新しく追加された
o[prop] = fn;
}


テスト:

コードをコピー

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

//This is the native method
shim(
Array.prototype, 'map',
function(){/*...*/}
); / / true
//This is the newly added method
shim(
Array.prototype, 'mapzer',
function(){alert(this)}
);
[ 1,2,3].mapzer(); // alerts 1,2,3

(End)^_^