JavaScript 関数名が要素 ID と競合する場合があるのはなぜですか?

JavaScript 関数名が要素 ID と競合する理由: 徹底した調査

JavaScript 開発の領域では、関数名が要素 ID と競合する場合に、複雑な問題が発生します。 。このクエリは、根本的な理由を掘り下げ、そのような競合の制限と影響を調査します。

競合を理解する

次の例を考えてみましょう:

<script>
    function border(border) { alert(border); }
</script>

<select></select>

最初のフィドル内、このコードは、選択されたオプションの値を正常に警告します。ただし、フォーム要素 (選択を囲むフォーム) を使用する 2 番目のフィドルでは、コードは「border は関数ではありません」というエラーで失敗します。

この矛盾は、JavaScript のレガシー問題に起因します。ここで、イベント ハンドラー属性値のスコープ チェーンには、それを囲む Form オブジェクトが含まれます。この Form オブジェクトは、border select 要素などの子コントロールの名前を表すプロパティを持っています。

したがって、フォーム コンテキスト内のイベント ハンドラーで関数として border を参照する場合は、次のようになります。

これは、目的の関数ではなく Form オブジェクトのプロパティを参照する form.border(this.value) の呼び出しと同等です。

JavaScript 仕様と制限事項

JavaScript 言語仕様では、関数と要素 ID 間の名前の競合を明示的に禁止していません。ただし、DOM レベル 2 の HTML バインディングでは、HTMLCollections (フォームとそのコントロールを含む) に角括弧構文を使用した名前または ID でアクセスできることが指定されています。

これは次のことを意味します。

• 要素 ID親フォームのプロパティ名として機能する可能性があります。
• フォームのプロパティ名は、同じ名前を持つ関数と競合する可能性があります。 name.

競合の結果

要素と関数の両方に同じ識別子を使用すると、次の可能性があります。

• 関数呼び出しエラーの原因: スクリプトが関数を呼び出そうとすると、代わりに要素オブジェクトにアクセスする可能性があり、その結果、例外。
• シャドウ関数オブジェクト: 変数オブジェクトがスコープ チェーンの上位に存在するため、関数自体の中から関数にアクセスできなくなります。

競合の回避

これらの問題を回避するには、次のガイドラインに従うことを検討してください:

• 関数には個別の名前を使用する
• 関数には予約済みのフォーム プロパティ名 (「action」、「submit」、「reset」など) を使用しないでください。
• 両方に同じ識別子を使用することに注意してください。関数とその引数の 1 つは関数 недоступный.

をレンダリングする場合があります。

以上がJavaScript 関数名が要素 ID と競合する場合があるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。