JavaScript 関数のエイリアスによって一部のブラウザではエラーが発生し、他のブラウザではエラーが発生しないのはなぜですか?

JavaScript 関数のエイリアス: 予期しない障害

質問:

エイリアス メソッドと関数ラッパー メソッドの両方を使用しようとしても、document.getElementById のエイリアスが失敗しますFirefox、Chrome、さらにはデバッグ ウィンドウでも。 Firefox ではエラーが発生しますが、Chrome では「不正な呼び出し」が発生します。さらに、この操作は Internet Explorer 8 でも動作します。

調査:

詳細な分析の結果、問題は JavaScript 関数がオブジェクトに緩やかに関連付けられ、スコープと対話する方法にあることがわかりました。

説明:

JavaScript 関数を呼び出すとき、インタープリターはスコープを割り当てて関数に渡します。関数がスコープを参照するために this を使用する場合、this の値は渡されたスコープになります。

ただし、apply メソッドを使用してスコープを手動で指定し、 interpreter.

エイリアスの問題:

document.getElementById を $ としてエイリアスするとエラーが発生します。これは、$('someElement') を呼び出すと、スコープがドキュメントではなくウィンドウ オブジェクトに設定されるためです。物体。したがって、getElementById の実装がスコープがドキュメントであることを予期している場合、関数は失敗します。

修正:

この問題を解決するには、$.apply(document, [' someElement']) を使用して、スコープをドキュメント オブジェクトに明示的に設定します。

Internet Explorer で機能する理由:

Internet Explorer でのエイリアスの予期せぬ成功は、IE でのエイリアシングの予期せぬ成功に起因する可能性があります。 、ウィンドウ オブジェクトはドキュメント オブジェクトと同等です。その場合、エイリアシングは IE で適切に機能するはずです。

包括的な例:

問題をさらに詳しく説明するには、次の Person 関数を考えてみましょう:

function Person(birthDate) {
  this.birthDate = birthDate;
  this.getAge = function() { return new Date().getFullYear() - this.birthDate.getFullYear(); };
  this.getAgeSmarter = function() { return this.getAge(); };
  this.getAgeSmartest = function() { return (this.constructor == Person ? this : self).getAge(); };
}

With作成された Person クラスの 2 つのインスタンス、yogi と anotherYogi。対応する出力は次のとおりです:

• console.log(yogi.getAge()): 100 (正解)
• console。 log(ageAlias()): -1 (間違ったスコープ)
• console.log(ageAlias.apply(yogi)): 100 (正しいスコープ)
• console.log(ageSmarterAlias()) : 100 (正しいスコープ)
• console.log(ageSmarterAlias.apply(anotherYogi)): 100 (間違ったスコープ)
• console.log(ageSmartestAlias()): 100 (正しいスコープ)
• console.log(ageSmartestAlias.apply(document)): 100 (正しいスコープ)
• console.log(ageSmartestAlias.apply(anotherYogi)): 200 (正しいスコープ)

この例は、スコープの複雑さと、関数のエイリアス作成時に apply メソッドを使用することの重要性を示しています。

以上がJavaScript 関数のエイリアスによって一部のブラウザではエラーが発生し、他のブラウザではエラーが発生しないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。