\'this\'는 jQuery와 일반 JavaScript에서 어떻게 다르게 동작하며, 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>

예(각):

<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"는 일반적으로 개체를 나타냅니다. 그러나 이는 "this"가 어떤 값이든 가질 수 있는 ES5의 엄격 모드에서는 엄밀히 말하면 사실이 아닙니다.

함수 호출에서 "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>

출력:

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

Strict 모드에서 "this"는 함수의 정의가 아닌 호출 위치에 따라 결정되며, 객체가 아닌 값을 가질 수 있습니다.

위 내용은 \'this\'는 jQuery와 일반 JavaScript에서 어떻게 다르게 동작하며, DOM 요소 및 함수 호출 작업에 어떤 영향을 미치나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!