Bagaimanakah \"ini\" berkelakuan berbeza dalam jQuery dan JavaScript biasa, dan apakah implikasi untuk bekerja dengan elemen DOM dan panggilan fungsi?

Memahami "ini" dalam jQuery dan JavaScript

Dalam jQuery, "ini" biasanya merujuk kepada elemen DOM yang dikaitkan dengan fungsi sedang dipanggil. Contohnya, dalam panggilan balik acara, "ini" mewakili elemen yang mencetuskan acara.

Contoh:

<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 juga menggunakan "ini" dalam fungsi seperti html() dan each():

Contoh (html):

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

Contoh (setiap):

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

"ini" dalam JavaScript Generik

Di luar jQuery, "ini" dalam JavaScript biasanya merujuk kepada objek. Walau bagaimanapun, ini tidak benar dalam mod ketat ES5, di mana "ini" boleh mempunyai sebarang nilai.

Nilai "ini" dalam panggilan fungsi ditentukan oleh cara fungsi itu digunakan. Ia boleh ditetapkan secara eksplisit dengan memanggil fungsi melalui sifat objek atau ia boleh lalai kepada objek global (tetingkap dalam penyemak imbas).

Contoh:

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

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

Dalam contoh ini, "ini" ditetapkan secara eksplisit kepada objek obj, supaya ia boleh mengakses sifat firstName.

Walau bagaimanapun, adalah penting untuk ambil perhatian bahawa fungsi foo tidak terikat secara semula jadi pada mana-mana objek tertentu. Ia boleh dipanggil dengan nilai "ini" yang berbeza menggunakan fungsi seperti .call dan .apply:

<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>

Dalam contoh ini, foo dipanggil dengan objek obj sebagai "ini," membenarkannya mengakses sifat firstName.

Mod ketat ES5 memperkenalkan kerumitan lagi, membenarkan "ini" mempunyai nilai bukan objek seperti null, undefined atau primitif seperti rentetan dan nombor:

<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

Dalam mod ketat, "ini" ditentukan oleh tapak panggilan dan bukannya takrif fungsi dan ia boleh mempunyai nilai bukan objek.

Atas ialah kandungan terperinci Bagaimanakah \"ini\" berkelakuan berbeza dalam jQuery dan JavaScript biasa, dan apakah implikasi untuk bekerja dengan elemen DOM dan panggilan fungsi?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!