Cara Mengekalkan Penunjuk \'ini\' dalam Fungsi JavaScript Bersarang

JavaScript "this" Pointer dalam Nested Functions

Dalam JavaScript, nilai "this" pointer boleh mengelirukan apabila bekerja dengan nested fungsi. Bertentangan dengan jangkaan, memanggil fungsi bersarang boleh menetapkan penuding "ini" kepada objek "tetingkap" global dan bukannya fungsi melampirkan.

Pertimbangkan kod berikut:

<code class="javascript">var std_obj = {
  options: { rows: 0, cols: 0 },
  activeEffect: "none",
  displayMe: function() {
    // this refers to std_obj
    if (this.activeEffect == "fade") { }

    var doSomeEffects = function() {
      // this unexpectedly refers to the window object
      if (this.activeEffect == "fade") { }
    };

    doSomeEffects();
  }
};

std_obj.displayMe();</code>

Dalam ini senario, apabila fungsi bersarang doSomeEffects dipanggil, penunjuk "ini" menghala ke objek "tetingkap", walaupun ia diisytiharkan dalam skop std_obj. Ini kerana JavaScript menentukan penunjuk "ini" berdasarkan cara fungsi dipanggil.

Dalam kes ini, doSomeEffects dipanggil tanpa objek induk utama, yang menghasilkan objek global (biasanya objek "tetingkap" ) ditugaskan untuk "ini." Untuk menyelesaikan isu ini, tiga kaedah boleh digunakan:

1. Panggil fungsi dengan Kaedah panggilan:

   <code class="javascript">doSomeEffects.call(std_obj);</code>

   Salin selepas log masuk

2. Gunakan fungsi dengan Kaedah apply:

   <code class="javascript">doSomeEffects.apply(std_obj, []);</code>

   Salin selepas log masuk

3. Buat Fungsi Terikat:

   <code class="javascript">var boundDoSomeEffects = doSomeEffects.bind(std_obj);
   boundDoSomeEffects();</code>

   Salin selepas log masuk

Atas ialah kandungan terperinci Cara Mengekalkan Penunjuk \'ini\' dalam Fungsi JavaScript Bersarang. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!