PPK が JavaScript のこのキーワードについて語る [翻訳]_javascript スキル

まず、イベント処理 (イベント処理) での使用方法について説明し、次にこれの他の使用方法について説明します。

私

まず、関数 doSomething() のこれが正確に何を指しているのか見てみましょう (参照)。

function doSomething() {
  this.style.color = '#cc0000';
}

JavaScript の this は常に、実行されている関数「それ自体」を指します。つまり、関数オブジェクトを指すメソッドです。ページ内に doSomething() 関数を定義します。それ自体がページを参照します。つまり、JavaScriptのウィンドウオブジェクト（グローバルオブジェクト）を指します。 onclick 属性自体は HTML 要素に属します。

この「所有権」は、JavaScript の OO (オブジェクト指向) の性質の結果です。詳細については、オブジェクトを連想配列として作成する ページを参照してください。

------------ window --------------------------------------
|                     / \      |
|                      |      |
|                     this     |
|  ----------------            |      |
|  | HTML element | <-- this     ----------------- |
|  ----------------   |      | doSomething() | |
|        |     |      ----------------- |
|     --------------------             |
|     | onclick property |             |
|     --------------------             |
|                            |
----------------------------------------------------------

doSomething() がそれに関連する予約なしで実行される場合、キーワード this は window (ウィンドウ) を指し、この関数は window の style.color を変更します。また、ウィンドウにはオブジェクトのようなスタイルがないため、この関数は JavaScript エラーをトリガーします。

コピー中

そのため、これを上手に使うのは少し難しいです。上の例の場合と同様、関数で使用する場合は、HTML 要素「それ自体」を指す必要があります。つまり、onclick 属性を指す関数のコピーが存在します。 伝統的なイベントの登録で何が起こるかを見てみましょう。

element.onclick = doSomething;

関数 copy all は onclick 属性 (現在はメソッド) をポイントしているため、イベント ハンドラーが実行されると、これは HTML 要素をポイントし、色が変更されます。

------------ window --------------------------------------
|                            |
|                            |
|                            |
|  ----------------                   |
|  | HTML element | <-- this     ----------------- |
|  ----------------   |      | doSomething() | |
|        |     |      ----------------- |
|     -----------------------     |      |
|     |copy of doSomething()| <-- copy function  |
|     -----------------------            |
|                            |
----------------------------------------------------------

これにより、複数のイベント ハンドラーの関数のコピーを与えることができます。毎回、これは正しい HTML 要素を指します:

------------ window --------------------------------------
|                            |
|                            |
|                            |
|  ----------------                   |
|  | HTML element | <-- this     ----------------- |
|  ----------------   |      | doSomething() | |
|        |     |      ----------------- |
|     -----------------------     |      |
|     |copy of doSomething()| <-- copy function  |
|     -----------------------     |      |
|                      |      |
|  -----------------------         |      |
|  | another HTML element| <-- this    |      |
|  -----------------------   |      |      |
|        |        |      |      |
|     -----------------------     |      |
|     |copy of doSomething()| <-- copy function  |
|     -----------------------            |
|                            |
----------------------------------------------------------

関数が呼び出されるたびに、この関数は現在イベントを処理している HTML 要素 (「それ自体」 doSomething() のコピー) を指します。

参照

インラインイベント登録を使用するとどうなるでしょうか?

<element onclick="doSomething()">

ここにはコピー機能はありませんが、違いは何ですか? onclick 属性には実際の関数は含まれず、関数呼び出しのみが含まれます。

doSomething();

上記は、「doSomething() に移動して実行する」ことを意味します。 doSomething() で、 this キーワードが再びグローバル ウィンドウ オブジェクトを指すと、関数はエラー メッセージを返します。

------------ window --------------------------------------
|                     / \      |
|                      |      |
|                     this     |
|  ----------------            |      |
|  | HTML element | <-- this     ----------------- |
|  ----------------   |      | doSomething() | |
|        |     |      ----------------- |
|     -----------------------     / \      |
|     | go to doSomething() |     |      |
|     | and execute it   | ---- reference to   |
|     -----------------------    function    |
|                            |
----------------------------------------------------------

違うんですか？

これを使用して HTML 要素にアクセスしてイベントを処理する場合は、それが実際に onclick 属性に書き込まれていることを確認する必要があります。さらに、HTML 要素を指すイベント ハンドラーも登録されます。これを行う場合:

element.onclick = doSomething;
alert(element.onclick)

あなたが得るものは

function doSomething()
{
	this.style.color = '#cc0000';
}

です

ご覧のとおり、このキーワードは onclick メソッド内にあります。 HTML 要素を指します。

しかし、これを行うと:

<element onclick="doSomething()">
alert(element.onclick)

あなたが得るものは

function onclick()
{
	doSomething()
}

です

これは関数 doSomething() を指しているだけです。このキーワードは onclick メソッドにはありません。これは HTML 要素を指しません。

例のコピー

次の例では、これは onclick メソッドで記述されています:

element.onclick = function () {doSomething()}
element.attachEvent('onclick',doSomething)
<element onclick="doSomething()">

例 -

をポイントします

次の例では、これはウィンドウを指します:

element.onclick = function () {doSomething()}
element.attachEvent('onclick',doSomething)
<element onclick="doSomething()">

上記のattachEventに注目してください。欠点は、Microsoft イベント登録モデル が関数へのポインターを作成し、それをコピーしないことです。そのため、どの HTML イベントが現在処理されているかを把握できない場合があります。

組み合わせ

インラインイベント登録を使用する場合、これを関数に送信することもできます。したがって、次のように使用できます:

<element onclick="doSomething(this)">
 
function doSomething(obj) {
	// this is present in the event handler and is sent to the function
	// obj now refers to the HTML element, so we can do
	obj.style.color = '#cc0000';
}