Penunjuk Javascript \'ini\' dalam Fungsi Bersarang: Bagaimana untuk Menyelesaikan Kekeliruan?

Javascript "this" Pointer dalam Nested Function Conundrum

Dalam senario pembangunan web, kelakuan penunjuk "ini" dalam fungsi bersarang boleh membingungkan. Pertimbangkan kod berikut:

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 surprisingly refers to window object
      if (this.activeEffect == "fade") {}
    }

    doSomeEffects();
  }
};

std_obj.displayMe();

Dalam kod di atas, penunjuk "ini" di dalam fungsi bersarang "doSomeEffects()" secara tidak dijangka menghala ke objek "tetingkap". Tingkah laku ini bercanggah dengan jangkaan bahawa fungsi bersarang akan mewarisi skop fungsi luar, dengan "ini" merujuk kepada "std_obj".

Memahami Seruan dan Skop Fungsi Javascript

Kelakuan "ini" dalam fungsi Javascript bergantung pada cara fungsi itu digunakan. Secara umumnya, terdapat tiga cara:

1. Seruan Kaedah: someThing.someFunction(arg1, arg2, argN)
2. Function.call Invocation: someFunction.call(someThing, arg1, arg2, argN)
3. Function.apply Invocation: someFunction.apply(someThing, [arg1, arg2, argN])

Dalam semua seruan ini, objek "ini" akan menjadi "someThing". Walau bagaimanapun, menggunakan fungsi tanpa objek induk utama (cth., doSomeEffects() dalam contoh) biasanya akan menyebabkan objek "ini" ditetapkan kepada objek global, yang dalam kebanyakan penyemak imbas ialah objek "tetingkap".

Dalam kod contoh, fungsi bersarang "doSomeEffects()" digunakan tanpa objek induk, jadi ia mewarisi skop global dan penunjuk "ini"nya menghala ke objek "tetingkap". Inilah sebabnya mengapa anda melihat tingkah laku yang tidak dijangka.

Untuk memastikan bahawa fungsi bersarang mempunyai akses kepada skop "std_obj", anda boleh menggunakan kaedah Function.call() dengan objek "std_obj" sebagai hujah pertama:

var doSomeEffects = function() {
  // this now refers to std_obj
  if (this.activeEffect == "fade") {}
}

doSomeEffects.call(std_obj);

Memahami nuansa halus tingkah laku penunjuk "ini" dalam Javascript adalah penting untuk membina aplikasi yang mantap dan boleh diselenggara.

Atas ialah kandungan terperinci Penunjuk Javascript \'ini\' dalam Fungsi Bersarang: Bagaimana untuk Menyelesaikan Kekeliruan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!