6

Chromeでこのフィドルを見て、jsコンソールを開いた状態でトリガーテキストをクリックすると、次のように表示されます。

ここに画像の説明を入力してください

これらすべてのwithブロックの理由とその価値は何ですか？

4

2 に答える 2

6

HTMLの「onclick」属性として指定されたときに、ブラウザーがイベントハンドラーの関数を作成する方法のように見えます。私はそれが何をするかだと思います：

  • イベント オブジェクトと提供されたコードの 1 つのパラメーターを持つイベント ハンドラー関数を作成します。
  • 要素 (タグ)、空のオブジェクト (?)、およびドキュメント オブジェクトのプロパティを作成する<a>と、その関数のコードで使用できるシンボルのように見えます。

つまりthis[0]、<a>要素自体でthis[1]あり、空の Object インスタンスのように見えthis[2]、ドキュメント オブジェクトです。これが意味することは、「onfoo」イベント ハンドラー属性の一部として記述したコード (ストレートな JavaScript コードからバインドされた通常のイベント ハンドラーのコードではない) では、ターゲット要素 (の要素) のプロパティを参照できるということです。属性を設定している）とドキュメント要素のプロパティを、スコープチェーンに存在するかのように。

コードを少し変更すると、次のようになります。

$('<a href=# onclick="console.log(baseURI);"> ...

次に、要素の「baseURI」プロパティの値を取得します<a>。<a>要素の DOM ノードを明示的に参照するものを "baseURI" の前に付ける必要はありません。var囲んでいるスコープで宣言されているかのように、「そこに」あるだけです。

(現在 w3c の仕様を確認中 ...)編集— イ​​ベント ハンドラーのスクリプト コードで使用できるシンボルを規定するものは見つかりませんでした。これは本当に奇妙です。

もう一度編集with— 明示的なステートメントはどこにも見当たりませんが、Firefox は同じことをしているようです。

于 2013-01-14T19:18:37.020 に答える
1

withその引数をスコープ スタックの上に移動します。したがって、グローバルオブジェクト、関数パラメーターなどよりもさらに高くなります。なぜそれを使用するのかわかりません。おそらくそれは生成されたコードです。

于 2013-01-14T19:45:49.493 に答える