Javascript_javascript スキルにおけるこのキーワードの詳細な分析

まず結論を言いますと、「JavaScript では This キーワードは常に関数 (メソッド) の所有者 を指します」です。

関数

コードをコピー コードは次のとおりです:

function recruit() {
alert("Hello, I am Laruencern");
}

この関数の場合、 this キーワードは誰を指すのか?

前の記事 (JavaScript スコープ) で述べたように、グローバルに定義された関数の場合、関数の所有者は現在のページ、つまりウィンドウ オブジェクトです。

グローバルに定義された関数は実際にはウィンドウ オブジェクトのメソッドであるため、関数を引用符で囲んでいるのはこのためです。

したがって、関数名を介して直接呼び出すことも、ウィンドウ メソッド名を介して呼び出すこともできます。このとき、メソッド内の this キーワードはその所有者であるウィンドウ オブジェクトを指します。

ウィンドウの導入属性を見ると、次の結果が得られます:

コードをコピーします コードは次のとおりです。

var name = "私はラルエンスです";
function recruit() {
alert(this.name);
}
alert(window.introduce);

上記のコードを読んだ後、グローバル関数はウィンドウ オブジェクトのメソッドであり、グローバル変数はウィンドウ オブジェクトの属性であるため (Javasript スコープですでに説明されています)、次のように考えるかもしれません。グローバル関数内 this キーワードを使用してグローバル変数にアクセスできますか?

答えは「はい」です。紹介機能を呼び出すと、私が Laruence であることがわかります。

イベントハンドラー関数

おそらく、このキーワードに関する混乱のほとんどは、イベント処理での関数 (メソッド) の使用に由来しています。

コードをコピー コードは次のとおりです:

たとえば、「name」入力ボックスをクリックしたときに、名前入力ボックスの値を表示する必要があります。次に、次のコードを記述できます:

function showValue() {
alert(this.value);
}
document.getElementById('name').onclick = showValue;

上記のコード、正常に実行されますが、なぜですか?関数の this ポインターは常に関数の所有者を指すという意味ではないでしょうか?グローバル変数の所有者はウィンドウオブジェクトということですか？

はは、この質問を思いつくことができたということは、あなたが私の記事を真剣に読んでいることを意味します。そうでない場合は、最初から読むことをお勧めします。そうしないと、読んだ後も混乱するでしょう~

そうですね、上記のコードでは showValue がグローバル オブジェクトで定義されているため、onclick イベントがバインドされている場合にのみ問題が発生する可能性があるようです。

関数には実行可能な内部プロパティがあることを除いて、JS 内のすべてがオブジェクトであり、関数とメソッドもオブジェクトのプロパティであることがわかっています。したがって、上記のコードでは、プロセッサを onclick にバインドするときに、実際には、name という ID を持つ入力ボックス Dom オブジェクトの onclick 属性に値を割り当てます。

つまり、名前入力ボックス オブジェクトの onclick 属性に関数 showValue Copy を与えます。このときの onclick を見ると:

コードをコピー コードは次のとおりです:

function showValue() {
alert(this.value);
}
document.getElementById('name').onclick = showValue;
alert(document.getElementById('name'). onclick);

したがって、イベントがトリガーされると、名前入力ボックスの onclick メソッドが呼び出されます。このとき、this キーワードは当然名前入力ボックスを指します。

ただし、次のような書き方があり、混乱することがあります:

コードをコピー コードは次のとおりです:

function showValue() {
alert(this.value);
}

が正常に実行できません。これはなぜですか?

そうですね、現時点では、それは課題ではなく、参考になるためです。

onclick の 2 つの記述方法に注目すると、前のメソッドでは以下を使用したことがわかります。

dom.onclick = showvalue; //呼び出し元なし

今の方法は

onclick = "showvalue()" //呼び出し元があります

これは 2 つの違いを反映することもあります。前者では割り当て、後者では参照です。この時点で入力ボックスの onclick 属性を見ると、次のようになります:

alert(dom.onclick);

違いがわかりますか?その理由はわかりますよね？

これに関しては、非常に興味深い例があります。IE で試してみましょう。

このポイントを変更します

それでは、その理由が分かったので、どうすれば目的の場所に到達できるでしょうか?

上記のイベント処理関数は次のように記述できます:

dom.onclick = showValue();
dom.onclick = function() {alert(this.value) ;}
コードをコピーします コードは次のとおりです: