これをJSで使用する方法

これは JavaScript で最も強力なキーワードの 1 つです。残念ながら、その仕組みを正確に知らなければ、正しく使用するのは難しいでしょう。

これは、オブジェクト指向言語の重要な概念です。JAVA や C# などの大きな言語では、実行時に現在のオブジェクトを固定的に指します。しかし、JavaScript では、JavaScript の動的な性質 (解釈と実行、もちろん、単純な事前コンパイル プロセスもあります) により、そのポイントは実行時にのみ決定されます。この機能は混乱をもたらすだけでなく、apply (call) メソッドと組み合わせることで、JS を非常に強力にすることができます。
2. これを変更しました
JavaScript では、これは通常、実行している関数自体、または関数が属するオブジェクト (ランタイム) を指します。ページ内で関数 doSomething() を定義すると、その所有者はページ、または JavaScript の ウィンドウ オブジェクト (またはグローバル オブジェクト) になります。 onclick 属性が属する HTML 要素 によって所有される場合、これはその HTML 要素を指す必要があります。
2.1 いくつかの一般的なシナリオでのこれへの変更
関数の例

function doSomething () 
{ 
alert(this.navigator); //appCodeName 
this.value = "I am from the Object constructor"; 
this.style.backgroundColor = "# 000000"; 
}

1. (A) 通常の関数として直接呼び出される場合
2. (B) コントロールイベントとしてトリガーされる場合
1) インラインイベントの登録 イベントを直接記述します。 HTML コード (<要素
onclick="doSomething()">)、この時点では window オブジェクトを指します。
2) 従来のイベント登録 (DHTML メソッド)
この時点では要素オブジェクトを指します
3) パラメーターは要素
3 を指すことができます。 (C) オブジェクトとして使用される場合、これは現在のオブジェクトを指します。形式: new doSomething();
4. (D) apply または call メソッドを使用する場合、これは渡されたオブジェクトを指します。
次のような形式: var obj={}; doSomething.apply(obj,new Array("nothing"); //thisàobj

ここでこれを イベント処理 で使用する方法を説明します。これに関連する例: 所有者
次の記事で説明する質問は次のとおりです: これは関数 doSomething() で何を指しますか?
JavaScript コード
function doSomething() {
this.style.color = ' # cc0000';
}
function doSomething() {
this.style.color = '#cc0000';
}
JavaScript では、これは通常、実行している関数を指します (翻訳者注: これが指す内容は)、または関数が属するオブジェクトを指します。ページ内で関数 doSomething() を定義すると、その所有者はページ、または JavaScript のウィンドウ オブジェクト (またはグローバル オブジェクト) になります。
この種の「所有権」は、連想配列としてのオブジェクトを参照してください。それ以上の準備をせずに doSomething() を実行すると、this キーワードは window を指し、関数は window の style.color を変更しようとします。これは非常に残念ながら JavaScript エラーで失敗します。これを最大限に活用したい場合は、これを使用する関数が正しい HTML 要素によって所有されている必要があることに注意する必要があります。つまり、この関数を従来のイベント登録で処理する必要があります。
element.onclick = doSomething;
element.onclick = doSomething; この関数は、HTML 要素を指すように完全にコピーされ、要素の色を変更できます。

このメソッドを使用すると、この関数を複数のイベント ハンドラーにコピーできます。これにより、毎回正しい HTML 要素が参照されます:


この方法で、this を最大限に活用できます。この関数が実行されるたびに、この関数が指す HTML 要素はイベントに正しく応答し、これらの HTML 要素には doSomething() のコピーが含まれます。
ただし、インラインイベント登録（インラインイベント登録）を使用する場合は、

とはなりません。この機能はコピーできるんです！むしろ、この違いは非常に重要です。 onclick 属性には実際の関数は含まれておらず、単なる関数呼び出しです。 Javascript コード
doSomething();
doSomething(); つまり、「doSomething() に移動して実行する」となります。 doSomething() に到達すると、this キーワードは再びグローバル ウィンドウ オブジェクトを指し、関数は
エラー メッセージ
を返します。


違い
this を使用して HTML 要素が応答するイベントを指す場合は、this キーワードが onclick 属性に記述されていることを確認する必要があります。この場合のみ、イベント ハンドラーによって登録された HTML 要素を指します。
JavaScript コード
element.onclick = doSomething;
alert(element.onclick)
element.onclick = doSomething;
alert(element.onclick) JavaScript コード function doSomething() {
this.style.color = '#cc0000'; }
function doSomething() {
this.style.color = '#cc0000';
}
ご覧のとおり、this キーワードは onclick 関数に表示されているため、HTML を指します。要素。
ただし、
JavaScript コードが実行されると、

alert(element.onclick)
JavaScript コードを取得します。
function onclick() {
doSomething()
}
function onclick() {
doSomething()
}
これは doSomething() 関数への単なる参照です。 this キーワードは onclick 関数には表示されないため、HTML 要素を指しません。
例 - copy
次の例では、これが onclick 関数に書き込まれます。
Javascript コード
element.onclick = doSomething
element.addEventListener('click', doSomething, false)
element.onclick = function() { this .style.color = '#cc0000';}

element.onclick = doSomething
element.addEventListener('click', doSomething, false )
element.onclick = function() {this.style.color = '#cc0000';}

例 -- 引用
次の場合、これはウィンドウを指します:
JavaScript コード
element.onclick = function() {doSomething()}
element.attachEvent('onclick', doSomething)
element.onclick = function() {doSomething()}
element.attachEvent('onclick', doSomething)

attachEvent() の外観に注目してください。 Microsoft イベント登録モデルの主な欠点は、attachEvent() が関数をコピーするのではなく、関数への参照を作成することです。そのため、どの HTML がイベントを処理しているのかを知ることができない場合があります。
併用
インラインイベント登録を使用する場合、これを関数に送信して通常どおりに使用できるようにします。
JavaScript コード

function doSomething(obj) {
//これはイベント ハンドラーに表示され、関数に送信されます
//obj は HTML 要素を指すため、次のようになります:
obj.style.color = '#cc0000';

以上がこれをJSで使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。