jQuery と通常の JavaScript では「this」の動作はどのように異なりますか?また、DOM 要素と関数呼び出しの操作にどのような影響がありますか?

jQuery と JavaScript の「this」を理解する

jQuery では、「this」は通常、関数に関連付けられた DOM 要素を指します呼ばれている。たとえば、イベント コールバックでは、「this」はイベントをトリガーした要素を表します。

例:

<code class="javascript">$("div").click(function() {
  // Here, `this` will be the DOM element for the div that was clicked,
  // so you could (for instance) set its foreground color:
  this.style.color = "red";
});</code>

jQuery は関数でも「this」を使用します。 html() と each() のように:

例 (html):

<code class="javascript">$("#foo div").html(function() {
  // Here, `this` will be the DOM element for each div element
  return this.className;
});</code>

例 (each):

<code class="javascript">jQuery.each(["one", "two", "three"], function() {
  // Here, `this` will be the current element in the array
  alert(this);
});</code>

汎用 JavaScript の「this」

jQuery の外では、JavaScript の「this」は通常、オブジェクトを指します。ただし、これは ES5 の厳密モードでは厳密には当てはまりません。「this」は任意の値を持つことができます。

関数呼び出しの「this」の値は、関数の呼び出し方法によって決まります。オブジェクト プロパティを通じて関数を呼び出すことによって明示的に設定することも、グローバル オブジェクト (ブラウザーのウィンドウ) にデフォルト設定することもできます。

例:

<code class="javascript">var obj = {
  firstName: "Fred",
  foo: function() {
    alert(this.firstName);
  }
};

obj.foo(); // alerts "Fred"</code>

この例では、「this」は明示的に obj オブジェクトに設定されているため、firstName プロパティにアクセスできます。

ただし、関数 foo は本質的に特定のオブジェクトに関連付けられていないことに注意することが重要です。 .call や .apply のような関数を使用して、別の "this" 値で呼び出すことができます。

<code class="javascript">function foo(arg1, arg2) {
  alert(this.firstName);
  alert(arg1);
  alert(arg2);
}

var obj = {firstName: "Wilma"};
foo.call(obj, 42, 27); // alerts "Wilma", "42", and "27"</code>

この例では、foo が obj オブジェクトを "this" として呼び出して、 firstName プロパティ。

ES5 の厳密モードではさらに複雑になり、「this」に null、未定義な​​どの非オブジェクト値、または文字列や数値などのプリミティブを含めることができます:

<code class="javascript">(function() {
  "use strict";   // Strict mode

  test("direct");
  test.call(5, "with 5");
  test.call(true, "with true");
  test.call("hi", "with 'hi'");

  function test(msg) {
    console.log("[Strict] " + msg + "; typeof this = " + typeof this);
  }
})();</code>

Output:

[Strict] direct; typeof this = undefined
[Strict] with 5; typeof this = number
[Strict] with true; typeof this = boolean
[Strict] with 'hi'; typeof this = string

厳密モードでは、「this」は関数の定義ではなく呼び出しサイトによって決定され、オブジェクト以外の値を持つことができます。

以上がjQuery と通常の JavaScript では「this」の動作はどのように異なりますか?また、DOM 要素と関数呼び出しの操作にどのような影響がありますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。